diff --git a/src/content/tutorials/hi/conditionals-and-interactivity.mdx b/src/content/tutorials/hi/conditionals-and-interactivity.mdx new file mode 100644 index 0000000000..9621f74fca --- /dev/null +++ b/src/content/tutorials/hi/conditionals-and-interactivity.mdx @@ -0,0 +1,915 @@ +--- +title: "शर्तें और इंटरैक्टिविटी" +description: एक ट्यूटोरियल जिसमें यह बताया गया है कि कंडीशनल स्टेटमेंट्स का उपयोग कैसे करें और इंटरैक्टिव स्केच कैसे बनाएं। +category: introduction +categoryIndex: 3 +featuredImage: ../images/featured/ConditionalsA.png +featuredImageAlt: कंडीशन और इंटरैक्टिविटी ट्यूटोरियल में बनाए गए सूर्योदय एनीमेशन का प्रीव्यू। +relatedContent: + examples: + - en/11_3d/06_framebuffer_blur/description + references: + - en/p5/if + - en/p5/mouseispressed + - en/p5/keycode + - en/p5/circle +authors: + - Greg Benedis-Grab + - Layla Quiñones +--- + +import Callout from "../../../components/Callout/index.astro"; +import { Columns, Column } from "../../../components/Columns"; +import AnnotatedLine from "../../../components/AnnotatedLine/index.astro"; +import Video from "../../../components/Video/index.astro" + +इस ट्यूटोरियल में, आप अपने स्केच में यूज़र इंटरैक्शन जोड़ने के नए तरीके सीखेंगे और यह समझेंगे कि कोड किस क्रम में चलता है उसे कैसे नियंत्रित किया जाए। + +आप इन बुनियादी प्रोग्रामिंग कॉन्सेप्ट्स को एक [interactive sun](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) स्केच और एक [sunrise animation](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO) बनाकर सीखेंगे: + +- कंडीशनल स्टेटमेंट्स (if, if-else, और else-if) +- बूलियन चर, comparison ऑपरेटर, और expressions +- Addition/subtraction assignment ऑपरेटर +- Incrementing और decrementing +- माउस बटन प्रेस और माउस पॉइंटर की स्थिति के साथ इंटरैक्टिविटी + +अपने प्रोग्राम के flow को नियंत्रित करना कंप्यूटिंग की शक्ति का एक केंद्रीय हिस्सा है और यही p5.js में रोमांचक एनीमेशन और गेम्स बनाना संभव बनाता है। आमतौर पर, कोड की लाइनों का निष्पादन क्रम में होता है। पिछले ट्यूटोरियल्स में, आपने देखा है कि [`draw()`](/reference/p5/draw) कार्य ऊपर से नीचे तक कोड को बार-बार चलाता है। इससे overlapping shapes और “flip book” जैसी एनीमेशन बन पाती हैं। + + +### आवश्यक पूर्व ज्ञान (Prerequisites) + +- [Setting Up Your Environment](/tutorials/setting-up-your-environment) +- [Get Started Tutorial](/tutorials/get-started) +- [Variables and Change Tutorial](/tutorials/variables-and-change/) + +शुरू करने से पहले, आपको निम्नलिखित चीज़ें आनी चाहिए: + +- p5.js का उपयोग करके कैनवास पर आकृतियाँ और टेक्स्ट जोड़ना और उन्हें कस्टमाइज़ करना + - [`circle()`](/reference/p5/circle) | [`rect()`](/reference/p5/rect) | [`ellipse()`](/reference/p5/ellipse) | [`triangle()`](/reference/p5/triangle) | [`line()`](/reference/p5/line) + - [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), [`text()`](/reference/p5/text), [`textSize()`](/reference/p5/textSize) +- [`mouseX`](/reference/p5/mouseX) और [`mouseY`](/reference/p5/mouseY) जैसे built-in चर का उपयोग करना +- `let` और [assignment operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment) का उपयोग करके custom चर को declare, initialize, उपयोग और अपडेट करना +- [`random()`](/reference/p5/random), [`frameRate()`](/reference/p5/frameRate) और [`frameCount`](/reference/p5/frameCount) का उपयोग करके linear और random motion को शामिल करना +- कोड में टिप्पणी लिखना और गलती messages को समझना — गलती messages और डीबग के बारे में अधिक जानने के लिए, [Field Guide to Debugging](/tutorials/field-guide-to-debugging) पढ़ें। + + +## भाग 1: Interactive Sun + +एक [interactive sun](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) स्केच बनाना *conditional statements* और यूज़र इंटरैक्शन का उपयोग करना सीखने का एक शानदार तरीका है। + + +## ![एक काले कैनवास पर हरे आयत के पीछे से पीले गोले का ऊपरी आधा हिस्सा दिखाई दे रहा है।](../images/introduction/sunrise.png) + +### IF स्टेटमेंट (एक conditional statement) + +[*Conditional statements*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) यह नियंत्रित करते हैं कि कोड की कौन-सी विशेष लाइनों को कब चलाया जाए। उदाहरण के लिए, सूर्योदय से पहले आसमान अंधेरा होता है। जैसे ही सूरज ऊपर आता है, दिन हो जाता है और आसमान का रंग हल्का हो जाता है। आप सूरज की स्थिति के आधार पर आसमान का रंग बदलने के लिए एक *conditional statement* (जिसे *if statement* भी कहा जाता है) लिख सकते हैं। यदि सूरज ऊपर है, तो आसमान का रंग हल्का होना चाहिए; अन्यथा आसमान गहरा होना चाहिए। If statements सूरज की स्थिति की जाँच कर सकते हैं और इस आधार पर यह नियंत्रित कर सकते हैं कि उसकी स्थिति के अनुसार कौन-सा कोड चले। + +सूरज की स्थिति की जाँच करने वाले conditional statements का उपयोग करने से पहले, हम कुछ custom चर जोड़ सकते हैं जो माउस पॉइंटर को कैनवास पर ड्रैग करने पर सूरज की स्थिति को अपडेट करने में हमारी मदद करेंगे। + + +#### स्टेप वन: Custom चर को define और initialize करें + +- एक नया p5.js प्रोजैक्ट खोलें, उसका नाम “Interactive Sun” रखें, और स्केच को सेव करें। + +- सूरज के y-निर्देशांक के लिए `sunHeight` नाम का एक custom चर declare करें, और horizon के y-निर्देशांक के लिए `horizon` नाम का एक custom चर बनाएं। `horizon` चर को 200 से initialize करें। + + - अपने स्केच में [`setup()`](/reference/p5/setup) से पहले निम्नलिखित कोड की लाइनें जोड़ें: + + ```js + //custom variables for y-coordinate of sun & horizon + let sunHeight; + let horizon = 200; + ``` + +- `sunHeight` को माउस पॉइंटर के y-निर्देशांक, यानी `mouseY`, के बराबर अपडेट करें। + + - [`draw()`](/reference/p5/draw) के अंदर निम्नलिखित कोड जोड़ें: + + ``` + //sun follows y-coordinate of mouse + sunHeight = mouseY; + ``` + +आपका कोड इस प्रकार दिखना चाहिए: + +```js +//custom variables for y-coordinate of sun & horizon +let sunHeight; +let horizon = 200; +function setup() { + createCanvas(400, 400); +} +function draw() { + background(0); + + //sun follows y-coordinate of mouse + sunHeight = mouseY; +} +``` + +चूंकि सूरज की ऊंचाई बदल रही है, हम माउस के y-निर्देशांक `mouseY` को `sunHeight` चर में स्टोर करते हैं। इसे `draw()` के अंदर रखने से हर बार जब `draw()` चलता है, `sunHeight` लगातार अपडेट होता रहता है। हालांकि horizon नहीं बदल रहा है, फिर भी उसके लिए एक custom चर का उपयोग reference point के रूप में और कोड को अधिक readable बनाने के लिए किया जाता है। + +[`mouseY`](/reference/p5/mouseY) और [`let`](/reference/p5/let) के बारे में अधिक जानकारी के लिए p5.js reference देखें। + + +#### स्टेप टू: आकृतियाँ बनाएं और कैनवास को रंग दें + +- एक सूरज बनाएं जो अपने y-निर्देशांक के लिए custom चर `sunHeight` का उपयोग करता हो। + + - [`draw()`](/reference/p5/draw) के अंदर निम्नलिखित कोड जोड़ें: + + ```js + //sun + fill("yellow"); + circle(200, sunHeight, 160); + ``` + +- horizon दिखाने के लिए एक रेखा बनाएं। + + - [`draw()`](/reference/p5/draw) के अंदर निम्नलिखित कोड जोड़ें: + + ```js + // draw line for horizon + stroke("green"); + line(0,horizon,400,horizon); + ``` + +आपका कोड इस प्रकार दिखना चाहिए: + +```js +//custom variables for y-coordinate of sun & horizon +let sunHeight; +let horizon = 200; +function setup() { + createCanvas(400, 400); +} +function draw() { + background(0); + + //sun follows y-coordinate of mouse + sunHeight = mouseY; + + //sun + fill("yellow"); + circle(200, sunHeight, 100); + + + // draw line for horizon + stroke('green'); + line(0,horizon,400,horizon); +} +``` + +सूरज माउस पॉइंटर का ऊर्ध्वाधर दिशा में अनुसरण करता है क्योंकि `circle(200, sunHeight, 100)` में सर्कल के y-निर्देशांक के लिए `sunHeight` का उपयोग किया गया है। कैनवास पर एक रेखा खींची जाती है जिसमें प्रत्येक endpoint के y-निर्देशांक (`y1, y2`) के लिए `horizon` को तर्क के रूप में उपयोग किया गया है। यह कैनवास पर horizon रेखा को दर्शाता है, जिसका उपयोग आगे background का रंग बदलने के लिए किया जाएगा। + +आकृतियों और चर के बारे में अधिक जानने के लिए p5.js reference के [2D shapes](/reference#Shape), [color](/reference#Color), [foundations](/reference#Foundation) और [mouse events](/reference#Mouse) पेज देखें। सामान्य bugs के समाधान के लिए [Field Guide to Debugging](/tutorials/field-guide-to-debugging) (Examples 1 & 2) पढ़ें। + + +#### स्टेप थ्री: Background का रंग बदलने के लिए बूलियन expression के साथ एक conditional statement का उपयोग करें + +- जब सूरज horizon से ऊपर हो, तो background का रंग हल्का नीला सेट करें। + - अपने स्केच में [`draw()`](/reference/p5/draw) के अंदर `sunHeight = mouseY` वाली लाइन के बाद निम्नलिखित कोड जोड़ें: + + ```js + //light blue background if sun is above horizon + if(sunHeight < horizon){ + background("lightblue"); + } + ``` + +आपका कोड इस प्रकार दिखना चाहिए: + +```js +//custom variables for y-coordinate of sun & horizon +let sunHeight; +let horizon = 200; +function setup() { + createCanvas(400, 400); +} +function draw() { + background(0); + + //sun follows y-coordinate of mouse + sunHeight = mouseY; + + //light blue background if sun is above horizon + if(sunHeight < horizon){ //check if it is daytime + background("lightblue"); + } + + //sun + fill("yellow"); + circle(200, sunHeight, 100); + + + // draw line for horizon + stroke('green'); + line(0,horizon,400,horizon); +} +``` + +कोड को चलाएँ और माउस की मदद से सूरज को हिलाकर प्रयोग करें! + +ऊपर दिए गए कोड में, डिफ़ॉल्ट रूप से background काला है क्योंकि `draw()` में सबसे पहले पढ़ी जाने वाली स्टेटमेंट `background(0)` है। जब सूरज horizon रेखा के नीचे होता है, तो background काला ही रहता है क्योंकि if स्टेटमेंट घुंघराले कोष्ठक के अंदर वाले *code block* — `background("lightblue")` — को छोड़ देता है। जब सूरज horizon रेखा के ऊपर होता है, तब घुंघराले कोष्ठक के अंदर वाला *code block* चलता है। इससे रंग डिफ़ॉल्ट काले रंग से बदलकर हल्का नीला हो जाता है। + +यहाँ आप नियंत्रित कर रहे हैं कि `background(0)` और `background("lightblue")` कब चलें। एक *conditional statement* (या *if statement*) इस बात को नियंत्रित करने का तरीका है कि कोड की कौन-सी विशेष लाइनें कब चलें, जिससे स्केच में होने वाला व्यवहार बदलता है। + + +#### IF स्टेटमेंट का वाक्य - विन्यास + +एक if स्टेटमेंट की शुरुआत `if` कीवर्ड से होती है, जिसके बाद कोष्टक के अंदर condition(s) लिखी जाती हैं, और घुंघराले कोष्ठक के अंदर कोड की लाइनें होती हैं जिन्हें *code block* कहा जाता है। यदि condition `true` होती है, तो code block चलता है। if स्टेटमेंट का वाक्य - विन्यास इस प्रकार होता है: + +```js +if (condition) { + // code to run if the condition is true +} +``` + + +#### बूलियन expressions और values + +`if` कीवर्ड के बाद कोष्टक के अंदर लिखा गया कोड एक *बूलियन value* या एक *बूलियन expression* हो सकता है। नीचे दिए गए उदाहरण में, एक बूलियन expression का उपयोग यह जाँचने के लिए किया गया है कि `sunHeight` चर का मान `horizon` चर के मान से कम है या नहीं: + + ` +if (${bottom('bool', 'sunHeight < horizon')}) { + ${bottom('block', 'background("lightblue");')} +} +`}> + Boolean expression + Code block + + +*बूलियन expressions* ऐसे कथन (statements) होते हैं जिनका परिणाम एक *बूलियन* value होता है। *बूलियन* values केवल `true` या `false` हो सकती हैं। संख्याओं या स्ट्रिंग के विपरीत, बूलियन की केवल दो ही संभावित values होती हैं। *बूलियन expressions* यह जाँचने में मदद करते हैं कि कोई condition `true` है या `false`; इसलिए वे *comparison ऑपरेटर* नामक प्रतीकों का उपयोग करते हैं। *Comparison ऑपरेटर* विशेष symbols होते हैं जो दो values की तुलना करते हैं (नीचे दी गई तालिका देखें)। + +[*Comparison ऑपरेटर*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) के symbols, जिनका उपयोग आप बूलियन expressions बनाने के लिए कर सकते हैं, निम्नलिखित हैं: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +Symbol + + + +Meaning (p5.js ref link) + + + +Example + +
+ +`<` + + + +[less than](/reference/p5/lt) + + + +`x < 5` + +
+ +`<=` + + + +[less than or equal to](/reference/p5/lte) + + + +`x <= 5` + +
+ +`>` + + + +[greater than](/reference/p5/gt) + + + +`x > 5` + +
+ +`>=` + + + +[greater than or equal to](/reference/p5/gte) + + + +`x >= 5` + +
+ +`===` + + + +Strict equality (अर्थात अलग-अलग types की values को बराबर नहीं माना जाता) + + + +`x === 5` + +
+ +`!==` + + + +बराबर नहीं (not equal to) + + + +`x !== 5` + +
+ +[expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) के बारे में अधिक जानने के लिए MDN reference देखें। + +आप *बूलियन expressions* को ऐसे समझ सकते हैं जैसे कंप्यूटर कोई प्रश्न पूछ रहा हो। स्टेप थ्री में जो कोड जोड़ा गया था, उसमें बूलियन expression `sunHeight < horizon` है। यह पूछ रहा है कि क्या `sunHeight` चर का मान `horizon` चर के मान से कम है। यदि इस प्रश्न का उत्तर हाँ है, यानी `sunHeight < horizon` का परिणाम `true` है, तो code block चलता है। यदि उत्तर नहीं है, तो code block को छोड़ दिया जाता है। + +हम `sunHeight < horizon` की value को कंसोल में देख सकते हैं। इसके लिए [`draw()`](/reference/p5/draw) में `sunHeight = mouseY` के बाद `console.log(sunHeight < horizon)` जोड़ें। ध्यान दें कि जब आप माउस को कैनवास पर घुमाते हैं, तो कंसोल में प्रिंट होने वाली value `true` और `false` के बीच बदलती रहती है: जब सूरज horizon रेखा के नीचे होता है, तो value `false` होती है, और जब वह horizon रेखा के ऊपर होता है, तो value `true` होती है। उदाहरण के लिए [इस स्केच](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) को देखें। + +if statements और बूलियन values के बारे में अधिक जानने के लिए p5.js reference के [foundations](/reference#Foundation) पेज पर जाएँ। + + +### IF-ELSE स्टेटमेंट + +एक और महत्वपूर्ण conditional है *if-else statement*, जिसमें दो code blocks होते हैं जिन्हें नियंत्रित किया जा सकता है। if-else स्टेटमेंट का वाक्य - विन्यास इस प्रकार है: + +```js +if (condition) { + // code to run if the condition is true +} else { + // code to run if the condition is false +} +``` + +यदि condition `true` होती है, तो पहला code block चलता है। यदि condition `false` होती है, तो `else` कीवर्ड के बाद वाला code block चलता है। यदि आपके कोड में एक ही condition के आधार पर दो अलग-अलग बदलाव करने हों, तो if-else statement आपके कोड को संरचित करने का बेहतर तरीका है। if statements को समझने के लिए उन्हें bubble map की तरह देखना मददगार होता है, जैसा नीचे दिखाया गया है — जहाँ condition `true` होने पर पहला code block चलता है और `false` होने पर दूसरा code block। + +![एक bubble map जिसमें “condition” लिखे हुए एक bubble से दो arrows निकलते हैं। “true” लेबल वाला arrow “1st code block” वाले bubble की ओर जाता है। दूसरा arrow “else (false)” लेबल के साथ “2nd code block” वाले bubble की ओर जाता है।](../images/introduction/if-else-bubble.png) + +उदाहरण के लिए, आप अपने sunset animation में if statement को संशोधित कर सकते हैं। इसके लिए [`background()`](/reference/p5/background) कार्य को हटाएँ और नीचे दिया गया if-else statement जोड़ें: + + + +##### मूल कोड: + +```js +//...function draw + +background(0); // night sky + +//sun follows y-coordinate of mouse +sunHeight = mouseY; + +//light blue background if sun is above horizon + +if (sunHeight < horizon) { + background("lightblue"); // blue sky +} +``` + + +##### संशोधित कोड: + +```js +//...function draw + +//sun follows y-coordinate of mouse +sunHeight = mouseY; + +//light blue background if sun is above horizon + +// with if-else statement + +if (sunHeight < horizon) { +  background("lightblue"); // blue sky if above horizon +} else { +  background(0); // night sky otherwise +} +``` + + + +ऊपर दिए गए कोड में, यदि सूरज horizon के ऊपर है, तो `sunHeight < horizon` का परिणाम `true` होता है और `background("lightblue")` वाला कोड चलता है। जब `sunHeight`, horizon से कम नहीं होता है, तो `else` कीवर्ड के बाद वाला code block — `background(0)` — चलता है। हालांकि दोनों तरीकों से लिखे गए कोड का दृश्य परिणाम समान होता है, लेकिन कई बार if-else का उपयोग करना अधिक स्पष्ट और प्रभावी होता है, खासकर जब दो अलग-अलग code blocks को नियंत्रित करना हो। + +[`if`](/reference/p5/if) और [`Boolean`](/reference/p5/Boolean) के बारे में अधिक जानने के लिए p5.js reference पेज देखें। + + +#### स्टेप फोर: सूरज को छिपाने के लिए घास जोड़ें + +अपने स्केच में एक घास वाला लैंडस्केप जोड़ें ताकि horizon के नीचे होने पर सूरज दिखाई न दे। + +- सूरज के बाद लैंडस्केप पर एक हरा rectangle बनाएं, ताकि जब सूरज horizon के नीचे हो तो वह छिप जाए। इस rectangle के y-निर्देशांक के लिए `horizon` लाइन की स्थिति का उपयोग करें। + - [`draw()`](/reference/p5/draw) में horizon वाली लाइन के बाद निम्नलिखित कोड जोड़ें: + + ```js + //grass + fill("green"); + rect(0, horizon, 400, 400); + ``` + +आपका कोड इस प्रकार दिखना चाहिए: + +```js +//custom variables for y-coordinate of sun & horizon +let sunHeight; +let horizon = 200; +function setup() { +  createCanvas(400, 400); +} +function draw() { + +  //sun follows y-coordinate of mouse +  sunHeight = mouseY; + +  //light blue background if sun is above horizon + + //with if-else statement + + if (sunHeight < horizon) { +   background("lightblue"); // blue sky if above horizon + } else { +   background(0); // night sky otherwise + } + +  //sun +  fill("yellow"); +  circle(200, sunHeight, 100); + + +  // draw line for horizon +  stroke('green'); +  line(0,horizon,400,horizon); + +  //grass + +  fill("green"); + +  rect(0, horizon, 400, 200); + +} +``` + +स्केच को चलाएँ और सूरज को horizon के नीचे ले जाएँ। ध्यान दें कि जैसे ही सूरज गायब होता है, आसमान का रंग कैसे बदलता है? [sunrise animation sample sketch](https://editor.p5js.org/Msqcoding/sketches/StUo5StZi) देखें। + + +- घास का रंग बदलने के लिए conditional statements का उपयोग करें! उदाहरण के लिए, जब सूरज घास वाले लैंडस्केप पर उगता है, तो उसका रंग गहरे हरे से हल्के हरे में बदल सकता है। +- अपने स्केच के लैंडस्केप में कुछ और आकृतियाँ जोड़ें जिनके रंग भी बदलते हों! + +[Example](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) + + + +## भाग 2: Sunrise Animation + +अब आप एक [sunrise animation](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO) बनाएँगे, जिसमें सूरज अपने आप ऊपर की ओर चलेगा और आसमान के रंग में धीरे-धीरे बदलाव लाएगा। + +