Language Settings

आरंभ करे

यह पृष्ठ आपको एक p5.js प्रोजेक्ट सेट करने और आपका पहला स्केच बनाने के बारे में बताता है। शुरू करने का सबसे आसान तरीका p5.js editor, का उपयोग करना है आप वेब संपादक खोल सकते हैं और अपने आपका पहला स्केच तक नीचे स्क्रॉल कर सकते हैं। यदि आप p5.js के डेस्कटॉप संस्करण पर काम करना चाहते हैं तो आप नीचे स्क्रॉल कर सकते हैं निर्देश डाउनलोड.

आपका पहला स्केच

अंडाकार के साथ कोड स्निपेट

p5.js वेब संपादकमें आपको निम्न कोड मिलना चाहिए:


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

उपरांतbackground(220);कोड की इस पंक्ति को शामिल करें: ellipse(50,50,80,80);.

अब आपका कोड इस तरह होना चाहिए:

अंडाकार के साथ कोड स्निपेट


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

आपके द्वारा अभी जोड़ी गई रेखा एक दीर्घवृत्त खींचती है, जिसका केंद्र बाईं ओर से 50 पिक्सेल ऊपर और ऊपर से 50 पिक्सेल नीचे है, जिसकी चौड़ाई और ऊँचाई 80 पिक्सेल है।

अपने कोड को क्रिया में प्रदर्शित करने के लिए संपादक पर प्ले दबाएं!

स्क्रीनरीडर उपयोगकर्ताओं के लिए नोट

यदि आप एक स्क्रीन रीडर का उपयोग कर रहे हैं, तो आपको p5 ऑनलाइन संपादक में पहुंच योग्य आउटपुट को चालू करना होगा, संपादक के बाहर आपको अपने एचटीएमएल में एक्सेसिबिलिटी लाइब्रेरी को जोड़ना होगा। अधिक जानने के लिए स्क्रीन रीडर ट्यूटोरियल के साथ p5 का उपयोग करना.

यदि आपने सब कुछ सही टाइप किया है, तो यह डिस्प्ले विंडो में दिखाई देगा:

80 x और 80 y of की स्थिति में कैनवास की चौड़ाई और ऊंचाई 50 का एक वृत्त है

यदि कुछ दिखाई नहीं देता है, तो संपादक को यह समझने में समस्या हो सकती है कि आपने क्या लिखा है। यदि ऐसा होता है, तो सुनिश्चित करें कि आपने उदाहरण कोड को ठीक से कॉपी किया है: संख्याएं कोष्ठक के भीतर होनी चाहिए और उनमें से प्रत्येक के बीच अल्पविराम होना चाहिए, रेखा अर्धविराम के साथ समाप्त होनी चाहिए, और दीर्घवृत्त की वर्तनी सही होनी चाहिए।

प्रोग्रामिंग के साथ आरंभ करने के बारे में सबसे कठिन चीजों में से एक यह है कि आपको सिंटैक्स के बारे में बहुत विशिष्ट होना चाहिए। आपका मतलब जानने के लिए ब्राउज़र हमेशा पर्याप्त स्मार्ट नहीं होता है और विराम चिह्नों की नियुक्ति के बारे में काफी उधम मचा सकता है। थोड़े से अभ्यास से आपको इसकी आदत हो जाएगी। संपादक के नीचे बाईं ओर, आपको कंसोल अनुभाग मिलेगा। यहां, आप संपादक से प्राप्त होने वाली किसी भी त्रुटि के विवरण के साथ संदेश पा सकते हैं।

इंटरैक्शन के साथ कोड स्निपेट

इसके बाद, हम एक स्केच पर आगे बढ़ेंगे जो थोड़ा अधिक रोमांचक है। इसे आज़माने के लिए अंतिम उदाहरण को संशोधित करें:


function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

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

कैनवास पर माउस के पथ का अनुसरण करते हुए कई वृत्त खींचे जाते हैं

आगे क्या?

  • अधिक जनने के लिए learn page तथा examples pageदेखें।
  • देखें The Coding Train तथा Kadenze अनके वीडियो शिक्षण।
  • पूर्ण दस्तावेज़ीकरण के लिए reference देखें।
  • यदि आप स्क्रीन रीडर के साथ p5 का उपयोग करना चाहते हैं, तो देखें p5 with a screenreader tutorial.
  • यदि आपने पूर्व में प्रसंस्करण का उपयोग किया है, तो पढ़ें Processing transition tutorial प्रोसेसिंग से p5.js में कनवर्ट करने का तरीका, और उनके बीच मुख्य अंतर जानने के लिए।

अपने कंप्यूटर पर एक संपादक के साथ p5.js सेट करना

अपने कंप्यूटर में p5.js चलाने के लिए आपको एक टेक्स्ट एडिटर की आवश्यकता होगी। आप अपनी पसंद के कोड एडिटर का उपयोग कर सकते हैं। Sublime Text 2 के साथ Sublime Text 2 सेटअप करने के निर्देश नीचे दिए गए हैं, अन्य अच्छे संपादक विकल्पों में Brackets तथा Atom. शामिल हैं। यदि आप एक स्क्रीन रीडर उपयोगकर्ता हैं और p5 वेब संपादक का उपयोग नहीं कर रहे हैं, तो आप इसका उपयोग करना चाह सकते हैं Notepad++ या Eclipse.

p5.js पुस्तकालय की एक प्रति डाउनलोड करना

'शुरू करने का सबसे आसान तरीका खाली उदाहरण का उपयोग करना है जो' के साथ आता है। p5.js पूर्ण download.

डाउनलोड करने के बाद, आपको एक स्थानीय सर्वर सेट करना होगा। निर्देश देखें यहां '। अपने स्थानीय सर्वर को डाउनलोड किए गए फ़ोल्डर में चलाएँ और अपने ब्राउज़र पर, 'पर जाएँ http://localhost:{your-port-num}/empty-example

यदि आप index.html में देखते हैं, तो आप देखेंगे कि यह फ़ाइल p5.js से लिंक है। यदि आप छोटे संस्करण का उपयोग करना चाहते हैं (तेज़ पृष्ठ लोड करने के लिए संपीड़ित), तो लिंक को p5.min.js में बदलें।

<script src="../p5.min.js"></script>

p5.js लाइब्रेरी के होस्ट किए गए संस्करण का उपयोग करना

वैकल्पिक रूप से, आप ऑनलाइन होस्ट की गई p5.js फ़ाइल से लिंक कर सकते हैं। p5.js के सभी संस्करण एक सीडीएन (सामग्री वितरण नेटवर्क) में संग्रहीत हैं। आप इन संस्करणों का इतिहास में पा सकते हैं p5.js CDN। इस मामले में आप लिंक को इसमें बदल सकते हैं:

एक नमूना HTML पृष्ठ इस तरह दिख सकता है:


<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>
        

वातावरण

Sublime खोलें। फ़ाइल मेनू पर जाएँ और Open चुनें... और उस फ़ोल्डर को चुनें जिसमें आपकी html और js फ़ाइलें स्थित हैं। बाईं साइडबार पर, आपको फ़ोल्डर में निहित फ़ाइलों की सूची के साथ शीर्ष पर फ़ोल्डर का नाम मिलना चाहिए।

अपनी sketch.js फ़ाइल पर क्लिक करें और यह दाईं ओर खुलेगी जहाँ आप इसे संपादित कर सकते हैं। p5 स्टार्टर कोड उदात्त संपादक में खुला।"

अपने ब्राउज़र में index.html फ़ाइल को अपने फ़ाइल प्रबंधक में डबल क्लिक करके खोलें या टाइप करें: file:///the/file/path/to/your/html (or http://localhost:{your-port-num}/empty-example यदि आप स्थानीय सर्वर का उपयोग कर रहे हैं) अपना स्केच देखने के लिए एड्रेस बार में।

इस ट्यूटोरियल के कुछ हिस्सों को लॉरेन मैकार्थी, केसी रियास, और बेन फ्राई, ओ'रेली / मेक 2015 द्वारा पुस्तक, गेटिंग स्टार्टिंग विद p5.js से अनुकूलित किया गया था। कॉपीराइट © 2015। सभी अधिकार सुरक्षित। अंतिम बार p5.js 2019 योगदानकर्ता सम्मेलन में संशोधित किया गया।