From 2daa3591996cc9798ae25925d1ffabd64d793853 Mon Sep 17 00:00:00 2001 From: aashu2006 Date: Fri, 20 Feb 2026 14:09:25 +0530 Subject: [PATCH 1/2] Add Hindi translation for conditionals-and-interactivity tutorial --- .../hi/conditionals-and-interactivity.mdx | 915 ++++++++++++++++++ 1 file changed, 915 insertions(+) create mode 100644 src/content/tutorials/hi/conditionals-and-interactivity.mdx 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..9a286e9715 --- /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) +- Boolean वेरिएबल्स, comparison operators, और expressions +- Addition/subtraction assignment operator +- 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 को शामिल करना +- कोड में comments लिखना और error messages को समझना — error messages और debugging के बारे में अधिक जानने के लिए, [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-coordinate के लिए `sunHeight` नाम का एक custom वेरिएबल declare करें, और horizon के y-coordinate के लिए `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-coordinate, यानी `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-coordinate `mouseY` को `sunHeight` वेरिएबल में स्टोर करते हैं। इसे `draw()` के अंदर रखने से हर बार जब `draw()` चलता है, `sunHeight` लगातार अपडेट होता रहता है। हालांकि horizon नहीं बदल रहा है, फिर भी उसके लिए एक custom वेरिएबल का उपयोग reference point के रूप में और कोड को अधिक readable बनाने के लिए किया जाता है। + +[`mouseY`](/reference/p5/mouseY) और [`let`](/reference/p5/let) के बारे में अधिक जानकारी के लिए p5.js reference देखें। + + +#### स्टेप टू: आकृतियाँ बनाएं और कैनवास को रंग दें + +- एक सूरज बनाएं जो अपने y-coordinate के लिए 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-coordinate के लिए `sunHeight` का उपयोग किया गया है। कैनवास पर एक रेखा खींची जाती है जिसमें प्रत्येक endpoint के y-coordinates (`y1, y2`) के लिए `horizon` को argument के रूप में उपयोग किया गया है। यह कैनवास पर 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 का रंग बदलने के लिए Boolean 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 स्टेटमेंट curly braces के अंदर वाले *code block* — `background("lightblue")` — को छोड़ देता है। जब सूरज horizon रेखा के ऊपर होता है, तब curly braces के अंदर वाला *code block* चलता है। इससे रंग डिफ़ॉल्ट काले रंग से बदलकर हल्का नीला हो जाता है। + +यहाँ आप नियंत्रित कर रहे हैं कि `background(0)` और `background("lightblue")` कब चलें। एक *conditional statement* (या *if statement*) इस बात को नियंत्रित करने का तरीका है कि कोड की कौन-सी विशेष लाइनें कब चलें, जिससे स्केच में होने वाला व्यवहार बदलता है। + + +#### IF स्टेटमेंट का सिंटैक्स + +एक if स्टेटमेंट की शुरुआत `if` कीवर्ड से होती है, जिसके बाद parenthesis के अंदर condition(s) लिखी जाती हैं, और curly braces के अंदर कोड की लाइनें होती हैं जिन्हें *code block* कहा जाता है। यदि condition `true` होती है, तो code block चलता है। if स्टेटमेंट का सिंटैक्स इस प्रकार होता है: + +```js +if (condition) { + // code to run if the condition is true +} +``` + + +#### Boolean expressions और values + +`if` कीवर्ड के बाद parentheses के अंदर लिखा गया कोड एक *Boolean value* या एक *Boolean expression* हो सकता है। नीचे दिए गए उदाहरण में, एक Boolean expression का उपयोग यह जाँचने के लिए किया गया है कि `sunHeight` वेरिएबल का मान `horizon` वेरिएबल के मान से कम है या नहीं: + + ` +if (${bottom('bool', 'sunHeight < horizon')}) { + ${bottom('block', 'background("lightblue");')} +} +`}> + Boolean expression + Code block + + +*Boolean expressions* ऐसे कथन (statements) होते हैं जिनका परिणाम एक *Boolean* value होता है। *Boolean* values केवल `true` या `false` हो सकती हैं। संख्याओं या strings के विपरीत, Boolean की केवल दो ही संभावित values होती हैं। *Boolean expressions* यह जाँचने में मदद करते हैं कि कोई condition `true` है या `false`; इसलिए वे *comparison operators* नामक प्रतीकों का उपयोग करते हैं। *Comparison operators* विशेष symbols होते हैं जो दो values की तुलना करते हैं (नीचे दी गई तालिका देखें)। + +[*Comparison operator*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) के symbols, जिनका उपयोग आप Boolean 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 देखें। + +आप *Boolean expressions* को ऐसे समझ सकते हैं जैसे कंप्यूटर कोई प्रश्न पूछ रहा हो। स्टेप थ्री में जो कोड जोड़ा गया था, उसमें Boolean expression `sunHeight < horizon` है। यह पूछ रहा है कि क्या `sunHeight` वेरिएबल का मान `horizon` वेरिएबल के मान से कम है। यदि इस प्रश्न का उत्तर हाँ है, यानी `sunHeight < horizon` का परिणाम `true` है, तो code block चलता है। यदि उत्तर नहीं है, तो code block को छोड़ दिया जाता है। + +हम `sunHeight < horizon` की value को console में देख सकते हैं। इसके लिए [`draw()`](/reference/p5/draw) में `sunHeight = mouseY` के बाद `console.log(sunHeight < horizon)` जोड़ें। ध्यान दें कि जब आप माउस को कैनवास पर घुमाते हैं, तो console में प्रिंट होने वाली value `true` और `false` के बीच बदलती रहती है: जब सूरज horizon रेखा के नीचे होता है, तो value `false` होती है, और जब वह horizon रेखा के ऊपर होता है, तो value `true` होती है। उदाहरण के लिए [इस स्केच](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) को देखें। + +if statements और Boolean 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-coordinate के लिए `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) बनाएँगे, जिसमें सूरज अपने आप ऊपर की ओर चलेगा और आसमान के रंग में धीरे-धीरे बदलाव लाएगा। + +