diff --git a/src/content/tutorials/hi/setting-up-your-environment.mdx b/src/content/tutorials/hi/setting-up-your-environment.mdx new file mode 100644 index 0000000000..0db8fe5555 --- /dev/null +++ b/src/content/tutorials/hi/setting-up-your-environment.mdx @@ -0,0 +1,442 @@ +--- +title: अपना एनवायरनमेंट सेट अप करना +description: p5.js प्रोजेक्ट्स लिखने और सेव करने के लिए p5.js Web Editor और VS Code सेट अप करने की एक क्विक ट्यूटोरियल। +category: introduction +categoryIndex: 0 +featuredImage: ../images/featured/SetupA.jpg +featuredImageAlt: p5.js Editor में एक इंटरैक्टिव स्केच, माउस पॉइंटर के मूव होने पर कैनवस पर सर्कल्स बनाता है। +relatedContent: + references: + - en/p5/setup + - en/p5/draw + - en/p5/background +authors: + - Layla Quiñones + - Jaleesa Trapp + - Shaikh Irtiza Nasar +--- + +import EditableSketch from "../../../components/EditableSketch/index.astro"; +import Callout from "../../../components/Callout/index.astro"; + +![p5.js और Visual Studio Code के लोगो।](../images/introduction/p5VScode.png) + +## परिचय + +[p5.js](/reference) से कोड लिखना शुरू करने के लिए, आपको वह कोडिंग एनवायरनमेंट सेट अप करना होगा जिसमें आप अपने प्रोग्राम लिखेंगे और सेव करेंगे। इस गाइड में, आप: + +1. [p5.js Web Editor](https://editor.p5js.org/) की मदद से वेब पर, या [Visual Studio Code (VS Code)](https://code.visualstudio.com/) की मदद से अपने कंप्यूटर पर कोडिंग एनवायरनमेंट सेट अप करेंगे। +2. शेप्स और कलर का इस्तेमाल करके अपना पहला सिंपल प्रोग्राम लिखने के लिए [p5.js रेफरेंस](/reference) का इस्तेमाल करेंगे। +3. अपना कोड सेव और शेयर करेंगे। + +## आपको क्या चाहिए होगा + +1. इंटरनेट एक्सेस और एक डेस्कटॉप ब्राउज़र, जैसे: + - [Chrome](https://www.google.com/chrome/) + - [Firefox](https://www.mozilla.org/en-US/firefox/) + - [Safari](https://www.apple.com/safari/) + - [Edge](https://www.microsoft.com/en-us/edge) +2. एक डेस्कटॉप कंप्यूटर, लैपटॉप, या क्रोमबुक + +## स्टेप 0: कोडिंग एनवायरनमेंट का प्रकार चुनें + +आप अपनी [p5.js](/reference) कोडिंग यात्रा [p5.js Web Editor](https://editor.p5js.org/) या [VS Code](https://code.visualstudio.com/) से शुरू कर सकते हैं। + +[p5.js Web Editor](https://editor.p5js.org/) एक वेबसाइट है जहाँ प्रोग्रामर बिना किसी *code editor* को डाउनलोड या कॉन्फ़िगर किए, p5.js प्रोग्राम्स लिख, टेस्ट, शेयर, या रीमिक्स कर सकते हैं। एक *code editor* टेक्स्ट को व्यवस्थित और रंगीन करके कोड लिखना और पढ़ना आसान बनाता है, जिससे प्रोग्रामर्स को कोड के अलग-अलग हिस्से देखने में मदद मिलती है। + +[VS Code](https://code.visualstudio.com/) एक लोकप्रिय code editor है जिसे आप अपने कंप्यूटर पर इंस्टॉल करते हैं और यह एक ज़्यादा एडवांस्ड कोडिंग अनुभव देता है। अपनी ज़रूरत के हिसाब से, वह कोडिंग एनवायरनमेंट चुनें जो आपके लिए सबसे सही हो। + +- [p5.js Web Editor हाउ-टू का लिंक](#p5js-web-editor-का-इस्तेमाल-करना) +- [VS Code हाउ-टू का लिंक](#vs-code-का-इस्तेमाल-करना) + +अगर आप p5.js में नए हैं, तो [p5.js Web Editor](https://editor.p5js.org/) से शुरुआत करें! + +## p5.js Web Editor का इस्तेमाल करना + +### स्टेप 1: [p5.js Web Editor](https://editor.p5js.org/) साइन-अप पेज खोलें + +- अपने कंप्यूटर पर एक डेस्कटॉप ब्राउज़र खोलें और [https://editor.p5js.org/](https://editor.p5js.org/) पर जाएँ। +- वेब पेज के ऊपर-दाईं ओर मौजूद [“Sign up”](https://editor.p5js.org/signup) लिंक पर क्लिक करें। + +![p5.js Editor के ऊपरी दाएँ कोने में “Sign Up” लिंक की ओर इशारा करता एक तीर।](../images/introduction/p5_editor_sign_up.png) + +### स्टेप 2: [p5.js Web Editor](https://editor.p5js.org/) पर अकाउंट बनाएँ + +- एक बार [sign-up पेज](https://editor.p5js.org/signup) पर पहुँचने के बाद, नीचे दिए गए ऑप्शंस में से किसी एक का इस्तेमाल करके [p5.js Web Editor](https://editor.p5js.org/) पर अकाउंट बनाएँ: +- मैनुअल साइन-अप + - एक यूज़रनेम बनाएँ। + - अपना ईमेल एड्रेस डालें। + - एक पासवर्ड बनाएँ और उसे कन्फर्म करें। + - “Sign Up” बटन पर क्लिक करें। + +![Sign Up पेज पर हाइलाइट किए गए फ़ील्ड्स की ओर इशारा करता एक तीर, जैसा ऊपर बताया गया है।](../images/introduction/p5_editor_sign_up_page.png) + +- Google अकाउंट का इस्तेमाल करके + - पेज के नीचे “Login with Google” लिखे बटन पर क्लिक करें। + +![“Login with Google” दिखाता हुआ एक Google लॉगिन बटन।](../images/introduction/login-with-google.png) + +- अगर ज़रूरत हो, तो अपने Google अकाउंट का ईमेल और पासवर्ड डालने के लिए दिए गए निर्देशों का पालन करें। +- GitHub अकाउंट का इस्तेमाल करके + - पेज के नीचे “Login with GitHub” लिखे बटन पर क्लिक करें। + +![“Login with Github” दिखाता हुआ एक Github लॉगिन बटन।](../images/introduction/login-with-github.png) + +- अपना GitHub यूज़रनेम और पासवर्ड डालने के लिए निर्देशों का पालन करें। +- “Authorize processing” बटन पर क्लिक करके [p5.js Web Editor](https://editor.p5js.org/) को अपनी GitHub डिटेल्स एक्सेस करने की अनुमति दें। + +![एक GitHub थर्ड-पार्टी ऑथराइज़ेशन विंडो, जो यूज़र्स को बताती है कि p5.js Web Editor उनके GitHub अकाउंट को एक्सेस करना चाहता है और उनके पर्सनल यूज़र डेटा से ईमेल एड्रेस पढ़ना चाहता है। यूज़र्स “Cancel” बटन पर क्लिक करके रिक्वेस्ट कैंसिल कर सकते हैं, या “Authorize processing” बटन पर क्लिक करके रिक्वेस्ट अप्रूव कर सकते हैं।](../images/introduction/github-auth.png) + +### स्टेप 3: [p5.js Web Editor](https://editor.p5js.org/) को एक्सप्लोर करें + +[p5.js Web Editor](https://editor.p5js.org/) एक ऑनलाइन एनवायरनमेंट है जहाँ प्रोग्रामर अपना p5.js कोड लिख और टेस्ट कर सकते हैं। [p5.js Web Editor](https://editor.p5js.org/) के अलग-अलग तत्व और उनके फंक्शन को एक्सप्लोर करें। + +नीचे दिया गया डायग्राम एडिटर के अंतरापृष्ठ के हर तत्व को लेबल और डिस्क्राइब करता है: + +![p5.js Web Editor के यूज़र अंतरापृष्ठ का एक लेबल्ड डायग्राम।](../images/introduction/p5_editor_interface_breakdown.png) + +### स्टेप 4: अपना पहला स्केच नाम दें, सेव करें, और रन करें + +- टेक्स्ट एडिटर के ऊपर मौजूद पेंसिल आइकन पर क्लिक करके और अपने प्रोजेक्ट का नाम टाइप करके, अपने प्रोजेक्ट्स को नाम दें। + +![एक तीर स्केच को रीनेम करने के लिए पेंसिल आइकन की ओर इशारा करता है।](../images/introduction/p5_editor_naming_a_sketch.png) + +- ऊपर की टूलबार में *File* पर क्लिक करके, और *Save* चुनकर प्रोजेक्ट्स सेव करें। + - सुनिश्चित करें कि आप अपने अकाउंट में लॉग इन हैं, वरना आप स्केच सेव नहीं कर पाएँगे। + - प्रोजेक्ट्स को बार-बार सेव करना यह सुनिश्चित करने में मदद करता है कि अगर कोडिंग करते समय आपके कंप्यूटर, ब्राउज़र, या इंटरनेट कनेक्शन में कुछ गड़बड़ी होती है, तो कोड खो न जाए। + +![p5.js Web Editor पर एक यूज़र एक नए प्रोजेक्ट का नाम रखता है और उसे सेव करता है।](../images/introduction/p5_editor_saving_a_sketch.png) + +![“Sketch saved.” टेक्स्ट वाले एक अधिसूचना बॉक्स की ओर इशारा करता एक तीर।](../images/introduction/p5_editor_saved_sketch_notification.png) + +अपने कोड का आउटपुट देखने के लिए, ऊपर बाईं ओर मौजूद *Play* बटन पर क्लिक करें: + +![p5.js Web Editor के प्रीव्यू विंडो में एक खाली कैनवस दिखाई देता है जब कोई यूज़र ऊपर दाईं ओर मौजूद “Play” बटन पर क्लिक करता है।](../images/introduction/p5_editor_running_a_sketch.png) + +एक *p5.js sketch* एक टेक्स्ट फ़ाइल होती है जिसमें *JavaScript* प्रोग्रामिंग भाषा में कोड लिखा होता है। *JavaScript* एक प्रोग्रामिंग भाषा है जिसका इस्तेमाल वेब पेजेज़ को इंटरैक्टिव बनाने के लिए किया जाता है। p5.js *JavaScript* में लिखी गई एक लाइब्रेरी है – इसीलिए इसके नाम के अंत में “*.js*” आता है, जो *JavaScript* के लिए है। p5.js से आप ऐसे प्रोग्राम बना सकते हैं जो रंगीन और एनिमेटेड हों, जिनमें ऐसे फ़ीचर हों जिनसे यूज़र इंटरैक्ट कर सकें! p5.js से आप क्या-क्या कर सकते हैं, यह और जानने के लिए [p5.js Welcome Video!](https://hello.p5js.org/) देखें। JavaScript के बारे में और जानने के लिए, आप [इस रिसोर्स](https://developer.mozilla.org/en-US/docs/Web/JavaScript) पर जा सकते हैं। + +एडिटर *sketch.js* फ़ाइल में इस कोड के साथ शुरू होता है: + +``` +function setup() { + createCanvas(400, 400); +} +function draw() { + background(220); +} +``` + +ऊपर दिया गया कोड प्रीव्यू में एक कैनवस तत्व बनाता है जो 400 पिक्सल चौड़ा और 400 पिक्सल ऊँचा है। यह बैकग्राउंड को ग्रे के एक शेड पर भी सेट करता है। + +#### `createCanvas()` + +कंप्यूटर स्क्रीन्स छोटी-छोटी लाइट्स से बनी होती हैं जिन्हें *pixels* कहा जाता है, जो किसी भी इमेज को बनाने वाले सबसे छोटे तत्व होते हैं। प्रीव्यू विंडो में कैनवस बनाने वाली कोड की लाइन [`createCanvas(400, 400)`](/reference/p5/createCanvas) है। इस लाइन ऑफ़ कोड के बिना, ड्रॉ करने के लिए कोई कैनवस नहीं होगा! 400, 400 नंबर कैनवस की चौड़ाई और ऊँचाई को पिक्सल में दर्शाते हैं। इन नंबर्स को [`createCanvas()`](/reference/p5/createCanvas) फंक्शन के *arguments* भी कहा जाता है। + +किसी फंक्शन के parentheses के अंदर रखी गई किसी भी वैल्यू को *arguments* कहा जाता है: यानी फंक्शंस को कस्टमाइज़ करने के लिए इस्तेमाल होने वाली कोई भी वैल्यू। [`createCanvas()`](/reference/p5/createCanvas), [`setup()`](/reference/p5/setup) फंक्शन के अंदर आता है ताकि एक HTML canvas तत्व बनाया जा सके जिस पर आप ड्रॉ कर सकते हैं। + +और जानने के लिए, [`setup()`](/reference/p5/setup) और [`createCanvas()`](/reference/p5/createCanvas) के [p5.js रेफरेंस](/reference) पेजेज़ पर जाएँ। + +### स्टेप 5: कैनवस का कलर बदलें + +- आप टेक्स्ट एडिटर में किसी भी स्केच के लिए कमांड्स टाइप कर सकते हैं, और *Play* पर क्लिक करके प्रीव्यू विंडो में अपने कोड का आउटपुट देख सकते हैं। +- [`background()`](/reference/p5/background) फंक्शन का *argument* बदलकर अपने कैनवस का बैकग्राउंड कलर बदलें। + - `background(220);` को `background("aqua");` में बदलें और *Play* दबाएँ। + +``` +function setup() { + createCanvas(400, 400); +} +function draw() { + background("aqua"); +} +``` + +#### `background()` + +`background()` फंक्शन बैकग्राउंड को एक स्पेसिफ़िक कलर से रंगता है। आप कैनवस के बैकग्राउंड को रंगने के लिए क्वोटेशन के अंदर शब्दों या नंबर्स का इस्तेमाल कर सकते हैं। और जानने के लिए, [`background()`](/reference/p5/background) और [color](/reference/p5/color) के [p5.js रेफरेंस](/reference) पेजेज़ पर जाएँ। + +### स्टेप 6: कैनवस पर शेप्स ड्रॉ करें + +- कैनवस पर एक सर्कल ड्रॉ करें। + + - [`background()`](/reference/p5/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()`](/reference/p5/draw) के बाद वाली curly brackets `{}` के अंदर शेप्स के लिए स्पेसिफ़िक कमांड्स टाइप करके कैनवस पर शेप्स ड्रॉ कर सकते हैं। + +ऊपर दिया गया स्केच [`draw()`](/reference/p5/draw) के अंदर [`circle()`](/reference/p5/circle) फंक्शन को कॉल करके कैनवस पर एक सर्कल ड्रॉ करता है। पहले दो *arguments* – `200, 200` – सर्कल को कैनवस के बीच में रखते हैं, और आखिरी *argument* – `100` – बताता है कि सर्कल 100 पिक्सल चौड़ा है। [`circle()`](/reference/p5/circle) फंक्शन के ऊपर की लाइनों में embed किए गए कमेंट्स बताते हैं कि कोड क्या करता है। और जानने के लिए, [`draw()`](/reference/p5/draw) और [`circle()`](/reference/p5/circle) के [p5.js रेफरेंस](/reference) पेजेज़ पर जाएँ। + +### स्टेप 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 प्रिमिटिव शेप्स](/reference/#Shape), के लिए [p5.js रेफरेंस](/reference) पर जाएँ। + +### एरर्स + +फंक्शन के नाम गलत स्पेल करना या कोई कॉमा भूल जाना आसान है। Syntax rules कंप्यूटर को कोड समझने में मदद करते हैं। जब कोई “rule” टूटता है, तो कंसोल में एक एरर मैसेज दिखाई देगा (उदाहरण के लिए, अगर [`circle()`](/reference/p5/circle) गलत स्पेल किया गया हो)। इन एरर्स को आमतौर पर “bugs” कहा जाता है। कंसोल एडिटर से मैसेज दिखाता है जिनमें आपकी किसी भी गलती की डिटेल्स होती हैं। जब आपका कोड सही तरीके से एक्ज़िक्यूट नहीं होता, तो हो सकता है आपके कोड में कोई bug हो! + +अपने कोड में एरर्स ठीक करने के बारे में और जानकारी के लिए [Field Guide to Debugging](/tutorials/field-guide-to-debugging) पर जाएँ। + +#### एक्सेसिबिलिटी नोट: + +अगर आप स्क्रीन रीडर इस्तेमाल कर रहे हैं, तो आपको [p5.js Web Editor](https://editor.p5js.org/) में accessible outputs ऑन करने होंगे और अपने html में accessibility library जोड़नी होगी। और जानने के लिए, स्क्रीन रीडर के साथ p5.js Web Editor इस्तेमाल करने की हमारी [गाइड](/tutorials/p5js-with-screen-reader) पर जाएँ। + +### स्टेप 8: अपना प्रोजेक्ट शेयर करें + +एक बार आपका प्रोजेक्ट सेव हो जाए, तो आप उसे शेयर कर सकते हैं! + +- ऊपर की टूलबार में *File* पर क्लिक करके, *Share* चुनकर, और दिए गए किसी एक लिंक को कॉपी करके प्रोजेक्ट्स शेयर करें। आप अपने प्रोजेक्ट्स को तीन अलग-अलग तरीकों से शेयर कर सकते हैं: + - Embed: अपने p5.js स्केच को html इस्तेमाल करने वाली किसी वेबसाइट या ब्लॉग में जोड़ें (कोड नहीं दिखाता)। + - Fullscreen: अपने प्रोजेक्ट को एक लिंक के साथ शेयर करें (कोड नहीं दिखाता)। + - Edit: p5.js एडिटर में अपने प्रोजेक्ट का कोड एक लिंक के साथ शेयर करें। + +## अगले स्टेप्स: + +- अगली ट्यूटोरियल: [Get Started](/tutorials/get-started) +- कुछ [p5.js examples](/examples) एक्सप्लोर करें + +## रिसोर्सेस: + +- [p5.js Welcome Video](https://hello.p5js.org/) +- The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) +- [p5.js रेफरेंस पेज](/reference) +- [Javascript - MDN रेफरेंस](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Field Guide to Debugging](/tutorials/field-guide-to-debugging) +- [स्क्रीन रीडर के साथ p5.js Web Editor का इस्तेमाल कैसे करें](/tutorials/p5js-with-screen-reader) + +--- + +## VS Code का इस्तेमाल करना + +[VS Code](https://code.visualstudio.com/), Web Editor की तुलना में एक ज़्यादा एडवांस्ड कोड एडिटिंग अनुभव देता है। अगर आप पहले से VS Code से परिचित हैं, तो हम इस ऑप्शन की सलाह देते हैं। + +### स्टेप 1: VS Code डाउनलोड करें + +- [इस लिंक](https://code.visualstudio.com/download) का इस्तेमाल करके अपनी डिवाइस पर VS Code डाउनलोड करें। +- [इन रिसोर्सेस](https://code.visualstudio.com/docs/getstarted/introvideos) का इस्तेमाल करके VS Code के फ़ीचर्स और अलग-अलग सेटअप ऑप्शंस एक्सप्लोर करें। + +### स्टेप 2: p5.js लाइब्रेरी एक्सटेंशन इंस्टॉल करें + +- VS Code खोलें और बाईं टूलबार में extensions manager पर जाएँ। +- सर्च बार में [*p5.js 2.x Project Generator*](https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator) टाइप करें, एक्सटेंशन सिलेक्ट करें, और इंस्टॉल बटन पर क्लिक करें। +- इस एक्सटेंशन के बारे में [यहाँ](https://github.com/IrtizaNasar/p5-2.vscode/blob/main/README.md) दी गई डिटेल्स से खुद को परिचित करें। + +**यह एक्सटेंशन ये देता है:** + +- 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" की सलाह दी जाती है** + +#### तरीका 2 - Explorer Context Menu से: + +- 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* सिलेक्ट करें (इससे एक लोकल डेवलपमेंट सर्वर शुरू होगा)। +- आपके डिफ़ॉल्ट ब्राउज़र में आपके प्रोजेक्ट के आउटपुट के साथ एक विंडो खुलेगी। + +एक *p5.js sketch* एक टेक्स्ट फ़ाइल होती है जिसमें *JavaScript* प्रोग्रामिंग भाषा में कोड लिखा होता है। *JavaScript* एक प्रोग्रामिंग भाषा है जिसका इस्तेमाल वेब पेजेज़ को इंटरैक्टिव बनाने के लिए किया जाता है। p5.js *JavaScript* में लिखी गई एक लाइब्रेरी है – इसीलिए इसके नाम के अंत में “*.js*” आता है, जो *JavaScript* के लिए है। p5.js से आप ऐसे प्रोग्राम बना सकते हैं जो रंगीन और एनिमेटेड हों, जिनमें ऐसे फ़ीचर हों जिनसे यूज़र इंटरैक्ट कर सकें! p5.js से आप क्या-क्या कर सकते हैं, यह और जानने के लिए [p5.js Welcome Video!](https://hello.p5js.org/) देखें। JavaScript के बारे में और जानने के लिए, आप [इस रिसोर्स](https://developer.mozilla.org/en-US/docs/Web/JavaScript) पर जा सकते हैं। + +एडिटर *sketch.js* फ़ाइल और प्रीव्यू में इस कोड के साथ शुरू होता है: + + + +ऊपर दिया गया कोड प्रीव्यू में एक कैनवस तत्व बनाता है जो 800 पिक्सल चौड़ा और 600 पिक्सल ऊँचा है। यह बैकग्राउंड को ग्रे के एक शेड पर भी सेट करता है। + +#### `createCanvas()` + +कंप्यूटर स्क्रीन्स छोटी-छोटी लाइट्स से बनी होती हैं जिन्हें *pixels* कहा जाता है, जो किसी भी इमेज को बनाने वाले सबसे छोटे तत्व होते हैं। प्रीव्यू विंडो में कैनवस बनाने वाली कोड की लाइन [`createCanvas(800, 600)`](/reference/p5/createCanvas) है। इस लाइन ऑफ़ कोड के बिना, ड्रॉ करने के लिए कोई कैनवस नहीं होगा! 800, 600 नंबर कैनवस की चौड़ाई और ऊँचाई को पिक्सल में दर्शाते हैं। इन नंबर्स को [`createCanvas()`](/reference/p5/createCanvas) फंक्शन के *arguments* भी कहा जाता है। + +किसी फंक्शन के parentheses के अंदर रखी गई किसी भी वैल्यू को *arguments* कहा जाता है: यानी फंक्शंस को कस्टमाइज़ करने के लिए इस्तेमाल होने वाली कोई भी वैल्यू। [`createCanvas()`](/reference/p5/createCanvas), [`setup()`](/reference/p5/setup) फंक्शन के अंदर आता है ताकि एक HTML canvas तत्व बनाया जा सके जिस पर आप ड्रॉ कर सकते हैं। + +और जानने के लिए, [`setup()`](/reference/p5/setup) और [`createCanvas()`](/reference/p5/createCanvas) के [p5.js रेफरेंस](/reference) पेजेज़ पर जाएँ। + +### स्टेप 5: कैनवस का कलर बदलें + +- [`background()`](/reference/p5/background) फंक्शन का *argument* बदलकर अपने कैनवस का बैकग्राउंड कलर बदलें। + - `background(220);` को `background("yellow");` में बदलें और *Play* दबाएँ। + +आपका कोड ऐसा दिखना चाहिए: + + + +#### `background()` + +`background()` फंक्शन बैकग्राउंड को एक स्पेसिफ़िक कलर से रंगता है। आप कैनवस के बैकग्राउंड को रंगने के लिए क्वोटेशन के अंदर शब्दों या नंबर्स का इस्तेमाल कर सकते हैं। और जानने के लिए, [`background()`](/reference/p5/background) और [color](/reference/#Color) के [p5.js रेफरेंस](/reference) पेजेज़ पर जाएँ। + +### स्टेप 6: कैनवस पर शेप्स ड्रॉ करें + +- कैनवस पर एक सर्कल ड्रॉ करें। + + - [`background()`](/reference/p5/background) फंक्शन के नीचे यह टेक्स्ट डालें: + +``` +//circle in the center with a width of 100 +circle(200,200,100); +``` + +- प्रीव्यू विंडो अपडेट करने के लिए अपने चेंजेज़ सेव करना न भूलें। + +आपका कोड ऐसा दिखना चाहिए: + + + +#### `draw()` + +आप [`function draw()`](/reference/p5/draw) के बाद वाली curly brackets `{}` के अंदर शेप्स के लिए स्पेसिफ़िक कमांड्स टाइप करके कैनवस पर शेप्स ड्रॉ कर सकते हैं। + +ऊपर दिया गया स्केच [`draw()`](/reference/p5/draw) के अंदर [`circle()`](/reference/p5/circle) फंक्शन को कॉल करके कैनवस पर एक सर्कल ड्रॉ करता है। पहले दो *arguments* – `400, 400` – सर्कल को कैनवस के बीच में रखते हैं, और आखिरी *argument* – `100` – बताता है कि सर्कल 100 पिक्सल चौड़ा है। [`circle()`](/reference/p5/circle) फंक्शन के ऊपर की लाइनों में embed किए गए कमेंट्स बताते हैं कि कोड क्या करता है। और जानने के लिए, [`draw()`](/reference/p5/draw) और [`circle()`](/reference/p5/circle) के [p5.js रेफरेंस](/reference) पेजेज़ पर जाएँ। + +### स्टेप 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 फंक्शंस के लिए, जैसे आप ड्रॉ कर सकने वाली अन्य शेप्स, [p5.js रेफरेंस](/reference) पर जाएँ। + +### एरर्स + +फंक्शन के नाम गलत स्पेल करना या कोई कॉमा भूल जाना आसान है। Syntax rules कंप्यूटर को कोड समझने में मदद करते हैं। जब कोई “rule” टूटता है (उदाहरण के लिए, अगर [`circle()`](/reference/p5/circle) गलत स्पेल किया गया हो), तो ब्राउज़र के कंसोल में एक मैसेज दिखाई देगा। इन एरर्स को आमतौर पर bugs कहा जाता है; जब आपका कोड सही तरीके से एक्ज़िक्यूट नहीं होता, तो हो सकता है आपके कोड में कोई bug हो! + +- स्पेसिफ़िक ब्राउज़र्स में कंसोल देखने के निर्देशों के लिए इन रिसोर्सेस पर जाएँ: [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) +- अपने कोड में एरर्स ठीक करने के बारे में और जानकारी के लिए [Field Guide to Debugging](/tutorials/field-guide-to-debugging) पर जाएँ। + +### एक्सेसिबिलिटी नोट + +अगर आप स्क्रीन रीडर इस्तेमाल कर रहे हैं, तो इसकी जगह [p5.js Web Editor](https://editor.p5js.org/) का इस्तेमाल करें! और जानने के लिए, “[How to Use the p5.js Web Editor with a Screen Reader](https://docs.google.com/document/u/0/d/1Q_leNn8lkeSUfAyq1jLQeLYq1h8pU9134QHNvMu4Tcw/edit)” रिसोर्स पर जाएँ। + +## अगले स्टेप्स: + +- अगली ट्यूटोरियल: [Get Started](/tutorials/get-started) +- कुछ [p5.js examples](/examples) एक्सप्लोर करें + +## रिसोर्सेस: + +- [p5.js Welcome Video](https://hello.p5js.org/) +- The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) +- [p5.js रेफरेंस पेज](/reference) +- [Javascript - MDN रेफरेंस](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Field Guide to Debugging](/tutorials/field-guide-to-debugging) +- [p5.js with VSCode](https://www.youtube.com/watch?v=zMAnM9ly0a8) (वीडियो ट्यूटोरियल) +- [VSCode Overview](https://code.visualstudio.com/docs/getstarted/introvideos) +- [p5.vscode रेफरेंस](https://github.com/antiboredom/p5.vscode/blob/master/README.md) +- [p5.nvim रेफरेंस - Neovim के लिए एडिटर सपोर्ट](https://github.com/prjctimg/p5.nvim/blob/main/README.md) +- Browser consoles in [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/)