शर्तें और इंटरैक्टिविटी

By Greg Benedis-Grab, Layla Quiñones

इस ट्यूटोरियल में, आप अपने स्केच में यूज़र इंटरैक्शन जोड़ने के नए तरीके सीखेंगे और यह समझेंगे कि कोड किस क्रम में चलता है उसे कैसे नियंत्रित किया जाए।

आप इन बुनियादी प्रोग्रामिंग कॉन्सेप्ट्स को एक interactive sun स्केच और एक sunrise animation बनाकर सीखेंगे:

कंडीशनल स्टेटमेंट्स (if, if-else, और else-if)
बूलियन चर, comparison ऑपरेटर, और expressions
Addition/subtraction assignment ऑपरेटर
Incrementing और decrementing
माउस बटन प्रेस और माउस पॉइंटर की स्थिति के साथ इंटरैक्टिविटी

अपने प्रोग्राम के flow को नियंत्रित करना कंप्यूटिंग की शक्ति का एक केंद्रीय हिस्सा है और यही p5.js में रोमांचक एनीमेशन और गेम्स बनाना संभव बनाता है। आमतौर पर, कोड की लाइनों का निष्पादन क्रम में होता है। पिछले ट्यूटोरियल्स में, आपने देखा है कि draw() कार्य ऊपर से नीचे तक कोड को बार-बार चलाता है। इससे overlapping shapes और “flip book” जैसी एनीमेशन बन पाती हैं।

आवश्यक पूर्व ज्ञान (Prerequisites)

शुरू करने से पहले, आपको निम्नलिखित चीज़ें आनी चाहिए:

p5.js का उपयोग करके कैनवास पर आकृतियाँ और टेक्स्ट जोड़ना और उन्हें कस्टमाइज़ करना
- circle() | rect() | ellipse() | triangle() | line()
- fill(), stroke(), text(), textSize()
mouseX और mouseY जैसे built-in चर का उपयोग करना
let और assignment operator का उपयोग करके custom चर को declare, initialize, उपयोग और अपडेट करना
random(), frameRate() और frameCount का उपयोग करके linear और random motion को शामिल करना
कोड में टिप्पणी लिखना और गलती messages को समझना — गलती messages और डीबग के बारे में अधिक जानने के लिए, Field Guide to Debugging पढ़ें।

भाग 1: Interactive Sun

एक interactive sun स्केच बनाना conditional statements और यूज़र इंटरैक्शन का उपयोग करना सीखने का एक शानदार तरीका है।

एक काले कैनवास पर हरे आयत के पीछे से पीले गोले का ऊपरी आधा हिस्सा दिखाई दे रहा है।

IF स्टेटमेंट (एक conditional statement)

Conditional statements यह नियंत्रित करते हैं कि कोड की कौन-सी विशेष लाइनों को कब चलाया जाए। उदाहरण के लिए, सूर्योदय से पहले आसमान अंधेरा होता है। जैसे ही सूरज ऊपर आता है, दिन हो जाता है और आसमान का रंग हल्का हो जाता है। आप सूरज की स्थिति के आधार पर आसमान का रंग बदलने के लिए एक 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() से पहले निम्नलिखित कोड की लाइनें जोड़ें:
  //custom variables for y-coordinate of sun & horizon let sunHeight; let horizon = 200;
sunHeight को माउस पॉइंटर के y-निर्देशांक, यानी mouseY, के बराबर अपडेट करें।
- draw() के अंदर निम्नलिखित कोड जोड़ें:
  //sun follows y-coordinate of mouse sunHeight = mouseY;

आपका कोड इस प्रकार दिखना चाहिए:


  
  
    //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 और let के बारे में अधिक जानकारी के लिए p5.js reference देखें।

स्टेप टू: आकृतियाँ बनाएं और कैनवास को रंग दें

एक सूरज बनाएं जो अपने y-निर्देशांक के लिए custom चर sunHeight का उपयोग करता हो।
- draw() के अंदर निम्नलिखित कोड जोड़ें:
  //sun fill("yellow"); circle(200, sunHeight, 160);
horizon दिखाने के लिए एक रेखा बनाएं।
- draw() के अंदर निम्नलिखित कोड जोड़ें:
  // draw line for horizon stroke("green"); line(0,horizon,400,horizon);

आपका कोड इस प्रकार दिखना चाहिए:


  
  
    //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, color, foundations और mouse events पेज देखें। सामान्य bugs के समाधान के लिए Field Guide to Debugging (Examples 1 & 2) पढ़ें।

स्टेप थ्री: Background का रंग बदलने के लिए बूलियन expression के साथ एक conditional statement का उपयोग करें

जब सूरज horizon से ऊपर हो, तो background का रंग हल्का नीला सेट करें।
- अपने स्केच में draw() के अंदर sunHeight = mouseY वाली लाइन के बाद निम्नलिखित कोड जोड़ें:
  //light blue background if sun is above horizon if(sunHeight < horizon){ background("lightblue"); }

आपका कोड इस प्रकार दिखना चाहिए:


  
  
    //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 स्टेटमेंट का वाक्य - विन्यास इस प्रकार होता है:


  
  
    if (condition) {
  // code to run if the condition is true
}

बूलियन expressions और values

if कीवर्ड के बाद कोष्टक के अंदर लिखा गया कोड एक बूलियन value या एक बूलियन expression हो सकता है। नीचे दिए गए उदाहरण में, एक बूलियन expression का उपयोग यह जाँचने के लिए किया गया है कि sunHeight चर का मान horizon चर के मान से कम है या नहीं:

`if (`	`sunHeight < horizon`	`) {`
	Boolean expression

	`background("lightblue");`
	Code block

बूलियन expressions ऐसे कथन (statements) होते हैं जिनका परिणाम एक बूलियन value होता है। बूलियन values केवल true या false हो सकती हैं। संख्याओं या स्ट्रिंग के विपरीत, बूलियन की केवल दो ही संभावित values होती हैं। बूलियन expressions यह जाँचने में मदद करते हैं कि कोई condition true है या false; इसलिए वे comparison ऑपरेटर नामक प्रतीकों का उपयोग करते हैं। Comparison ऑपरेटर विशेष symbols होते हैं जो दो values की तुलना करते हैं (नीचे दी गई तालिका देखें)।

Comparison ऑपरेटर के symbols, जिनका उपयोग आप बूलियन expressions बनाने के लिए कर सकते हैं, निम्नलिखित हैं:

Symbol	Meaning (p5.js ref link)	Example
`<`	less than	`x < 5`
`<=`	less than or equal to	`x <= 5`
`>`	greater than	`x > 5`
`>=`	greater than or equal to	`x >= 5`
`===`	Strict equality (अर्थात अलग-अलग types की values को बराबर नहीं माना जाता)	`x === 5`
`!==`	बराबर नहीं (not equal to)	`x !== 5`

expressions and operators के बारे में अधिक जानने के लिए MDN reference देखें।

आप बूलियन expressions को ऐसे समझ सकते हैं जैसे कंप्यूटर कोई प्रश्न पूछ रहा हो। स्टेप थ्री में जो कोड जोड़ा गया था, उसमें बूलियन expression sunHeight < horizon है। यह पूछ रहा है कि क्या sunHeight चर का मान horizon चर के मान से कम है। यदि इस प्रश्न का उत्तर हाँ है, यानी sunHeight < horizon का परिणाम true है, तो code block चलता है। यदि उत्तर नहीं है, तो code block को छोड़ दिया जाता है।

हम sunHeight < horizon की value को कंसोल में देख सकते हैं। इसके लिए draw() में sunHeight = mouseY के बाद console.log(sunHeight < horizon) जोड़ें। ध्यान दें कि जब आप माउस को कैनवास पर घुमाते हैं, तो कंसोल में प्रिंट होने वाली value true और false के बीच बदलती रहती है: जब सूरज horizon रेखा के नीचे होता है, तो value false होती है, और जब वह horizon रेखा के ऊपर होता है, तो value true होती है। उदाहरण के लिए इस स्केच को देखें।

if statements और बूलियन values के बारे में अधिक जानने के लिए p5.js reference के foundations पेज पर जाएँ।

IF-ELSE स्टेटमेंट

एक और महत्वपूर्ण conditional है if-else statement, जिसमें दो code blocks होते हैं जिन्हें नियंत्रित किया जा सकता है। if-else स्टेटमेंट का वाक्य - विन्यास इस प्रकार है:


  
  
    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 की ओर जाता है।

उदाहरण के लिए, आप अपने sunset animation में if statement को संशोधित कर सकते हैं। इसके लिए background() कार्य को हटाएँ और नीचे दिया गया if-else statement जोड़ें:

मूल कोड:


  
  
    //...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
}

संशोधित कोड:


  
  
    //...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 और Boolean के बारे में अधिक जानने के लिए p5.js reference पेज देखें।

स्टेप फोर: सूरज को छिपाने के लिए घास जोड़ें

अपने स्केच में एक घास वाला लैंडस्केप जोड़ें ताकि horizon के नीचे होने पर सूरज दिखाई न दे।

सूरज के बाद लैंडस्केप पर एक हरा rectangle बनाएं, ताकि जब सूरज horizon के नीचे हो तो वह छिप जाए। इस rectangle के y-निर्देशांक के लिए horizon लाइन की स्थिति का उपयोग करें।
- draw() में horizon वाली लाइन के बाद निम्नलिखित कोड जोड़ें:
  //grass fill("green"); rect(0, horizon, 400, 400);

आपका कोड इस प्रकार दिखना चाहिए:


  
  
    //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 देखें।

Try this!

घास का रंग बदलने के लिए conditional statements का उपयोग करें! उदाहरण के लिए, जब सूरज घास वाले लैंडस्केप पर उगता है, तो उसका रंग गहरे हरे से हल्के हरे में बदल सकता है।
अपने स्केच के लैंडस्केप में कुछ और आकृतियाँ जोड़ें जिनके रंग भी बदलते हों!

Example

भाग 2: Sunrise Animation

अब आप एक sunrise animation बनाएँगे, जिसमें सूरज अपने आप ऊपर की ओर चलेगा और आसमान के रंग में धीरे-धीरे बदलाव लाएगा।

स्टेप वन: सूरज की स्थिति और background रंग के लिए चर declare और initialize करें

एक नया p5.js प्रोजैक्ट खोलें, उसका नाम “Sunrise Animation” रखें, और उसे सेव करें।
सूरज के y-निर्देशांक के लिए एक custom चर declare करें और उसे 600 से initialize करें।
- setup() से पहले अपने स्केच में निम्नलिखित लाइनें जोड़ें:
  //variable for initial sun position //point below horizon let sunHeight = 600;
आसमान के रंग के red और green components की value के लिए custom चर declare करें और उन्हें 0 से initialize करें।
- setup() से पहले अपने स्केच में निम्नलिखित लाइनें जोड़ें:
  //variables for color change let redVal = 0; let greenVal = 0;

रंग कोड्स के बारे में याद ताज़ा करने के लिए p5.js reference में fill() या MDN reference में RGB देखें।

आपका कोड इस प्रकार दिखना चाहिए:


  
  
    //variable for initial sun position

let sunHeight = 600; //point below horizon

//variables for color change

let redVal = 0;

let greenVal = 0;


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

}

इस स्टेप में आपने redVal, greenVal, और sunHeight चर बनाए हैं ताकि वे प्रोग्राम में उपयोग होने वाली values को स्टोर कर सकें। sunHeight की प्रारंभिक value horizon के नीचे का एक बिंदु है, और redVal तथा greenVal की प्रारंभिक values काले रंग को दर्शाती हैं। ये एनीमेशन की शुरुआत में सूरज की स्थिति और आसमान के रंग को निर्धारित करती हैं। इन्हें एनीमेशन की initial conditions कहा जाता है। अब इन चर का उपयोग करके आप कैनवास पर बदलाव कर सकते हैं।

स्टेप टू: Custom चर का उपयोग करके लैंडस्केप बनाएं

red और green के custom चर के आधार पर background बनाएं।
- draw() के अंदर निम्नलिखित कोड जोड़ें:
  //fill background based on custom variables //the value of blue is set to 0 and will not change background(redVal, greenVal, 0);
एक सूरज बनाएं जो अपने y-निर्देशांक के लिए custom चर sunHeight का उपयोग करता हो।
- background को fill करने के बाद निम्नलिखित कोड जोड़ें:
  //sun fill(255, 135, 5, 60); circle(300, sunHeight, 180); fill(255, 100, 0, 100); circle(300, sunHeight, 140);

लैंडस्केप में कुछ त्रिकोणीय पहाड़ जोड़ें।

सूरज बनाने के बाद निम्नलिखित कोड जोड़ें:


  
  
    //mountains
fill(110, 50, 18);
triangle(200, 400, 520, 253, 800, 400);
fill(110,95,20);
triangle(200,400,520,253,350,400);  

fill(150, 75, 0);
triangle(-100, 400, 150, 200, 400, 400);
fill(100, 50, 12);
triangle(-100, 400, 150, 200, 0, 400); 

fill(150, 100, 0);
triangle(200, 400, 450, 250, 800, 400);
fill(120, 80, 50);
triangle(200, 400, 450, 250, 300, 400);

आपका कोड इस प्रकार दिखना चाहिए:


  
  
    //variable for initial sun position

let sunHeight = 600; //point below horizon

//variables for color change

let redVal = 0;

let greenVal = 0;


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

  //fill background with color based on custom variables
  background(redVal, greenVal, 0);

  //sun
  fill(255, 135, 5, 60);
  circle(300, sunHeight, 180);
  fill(255, 100, 0, 100);
  circle(300, sunHeight, 140);

  //mountains
  fill(110, 50, 18);
  triangle(200, 400, 520, 253, 800, 400);
  fill(110,95,20);
  triangle(200,400,520,253,350,400);  
  
  fill(150, 75, 0);
  triangle(-100, 400, 150, 200, 400, 400);
  fill(100, 50, 12);
  triangle(-100, 400, 150, 200, 0, 400); 
  
  fill(150, 100, 0);
  triangle(200, 400, 450, 250, 800, 400);
  fill(120, 80, 50);
  triangle(200, 400, 450, 250, 300, 400);  
}

इस स्टेप में आपने अपनी एनीमेशन के लैंडस्केप को customize किया है, जहाँ आपने background() और circle() कार्य में custom चर का उपयोग किया। ध्यान रखें, सूरज पहाड़ों के पीछे छिपा हुआ है क्योंकि उसे पहले draw किया गया था!

Try this!

अपने लैंडस्केप को अनोखा और रोचक बनाने के लिए जितनी चाहें उतनी आकृतियाँ जोड़ें!

स्टेप थ्री: Custom चर को अपडेट करने के लिए conditional statements का उपयोग करें

sunHeight चर को तब तक बदलते हुए सूरज को चलाएँ जब तक उसकी value 130 से कम हो।
- draw() के अंदर निम्नलिखित कोड जोड़ें:
  // reduce sunHeight by 2 until it reaches 130 if (sunHeight > 130) { sunHeight -=2; }
sunHeight चर की value 480 से कम होने तक redVal और greenVal चर की values बदलकर आसमान के रंग में धीरे-धीरे बदलाव करें।
- draw() के अंदर निम्नलिखित कोड जोड़ें:
  // increase color variables by 4 or 1 during sunrise if (sunHeight < 480) { redVal += 4; greenVal += 1; }

आपका कोड इस प्रकार दिखना चाहिए:


  
  
    //variable for initial sun position
let sunHeight = 600; //point below horizon

//variables for color change
let redVal = 0;
let greenVal = 0;

function setup() {
  createCanvas(600, 400);
}
function draw() {
  //fill background based on custom variables
  background(redVal, greenVal, 0);
 
  //sun
  fill(255, 135, 5, 60);
  circle(300, sunHeight, 180);
  fill(255, 100, 0, 100);
  circle(300, sunHeight, 140);
 
  //mountains
  fill(110, 50, 18);
  triangle(200, 400, 520, 253, 800, 400);
  fill(110,95,20);
  triangle(200,400,520,253,350,400); 
 
  fill(150, 75, 0);
  triangle(-100, 400, 150, 200, 400, 400);
  fill(100, 50, 12);
  triangle(-100, 400, 150, 200, 0, 400);
 
  fill(150, 100, 0);
  triangle(200, 400, 450, 250, 800, 400);
  fill(120, 80, 50);
  triangle(200, 400, 450, 250, 300, 400);
 
  // reduce sunHeight by 2 until it reaches 130
  if (sunHeight > 130) {
    sunHeight -= 2;
  }
   
  // increase color variables by 4 or 1 during sunrise 
  if (sunHeight < 480) {
    redVal += 4;
    greenVal += 1;
  } 
}

जब स्केच चलता है, तो सूरज अपने आप ऊपर की ओर बढ़ता है! यह गति sunHeight -= 2 स्टेटमेंट के कारण होती है, जो हर बार draw() चलने पर sunHeight की value को 2 से घटा देता है। sunHeight की value तब बदलना बंद हो जाती है जब if स्टेटमेंट में दिया गया बूलियन expression, sunHeight > 130, false हो जाता है। यह तब होता है जब sunHeight की value 130 से अधिक हो जाती है।

जब किसी चर की value को घटाया जाता है, तो उसे decrementing कहा जाता है, और इसके लिए subtract assign -= ऑपरेटर का उपयोग किया जाता है। जब किसी चर की value बढ़ाई जाती है, तो उसे incrementing कहा जाता है, और इसके लिए add assign += ऑपरेटर का उपयोग किया जाता है। जब भी किसी चर को increment या decrement किया जाता है, उसकी पुरानी value बदलकर नई value उसी चर में स्टोर हो जाती है।

इन ऑपरेटर्स के बारे में अधिक जानने के लिए MDN reference देखें: = | += | -=

Try this!

समय के साथ sunHeight की value कैसे बदलती है, यह देखने के लिए console.log(sunHeight) का उपयोग करके उसकी value को कंसोल में प्रिंट करें।

Example

आसमान का रंग इसलिए बदलता है क्योंकि redVal और greenVal धीरे-धीरे बदलते रहते हैं। दूसरे conditional statement में दिए गए बूलियन expression के अनुसार, जब sunHeight 480 से कम होता है, तो रंग से जुड़े चर बदलते हैं: redVal की value 4 से बढ़ती है, और greenVal की value 1 से बढ़ती है। हर बार जब draw() चलता है, redVal और greenVal की values बढ़ती हैं और अगली बार background का रंग निर्धारित करने में उपयोग होती हैं। इससे एक animated sunrise effect बनता है।

स्टेटमेंट greenVal += 1 को greenVal++ के रूप में भी लिखा जा सकता है। ++ को increment ऑपरेटर कहा जाता है, और -- को decrement ऑपरेटर कहा जाता है।

निम्नलिखित स्टेटमेंट्स का प्रभाव एक जैसा होता है:


  
  
    // Increment by 1.
grow++;
grow += 1;

// Decrement by 1.
shrink--;
shrink -= 1;

इन ऑपरेटर्स के बारे में अधिक जानने के लिए MDN reference में ++ और — देखें।

जब draw() पहली बार चलता है, तो background काला होता है और sunHeight की value घटती है। जब सूरज का y-निर्देशांक 480 तक पहुँचता है, तब redVal और greenVal की values बढ़ने लगती हैं और आसमान का रंग धीरे-धीरे बदलना शुरू होता है। पहली conditional statement के कारण, जब sunHeight 130 तक पहुँच जाता है, तब सूरज की गति रुक जाती है:


  
  
    if (sunHeight > 130) {
  sunHeight -= 2;
}

यहाँ, sunHeight की value हर बार draw() चलने पर 2 से घटती है, जब तक sunHeight 130 से अधिक है। जब इसकी value 130 या उससे कम हो जाती है, तो कोष्टक के अंदर दिया गया बूलियन expression false हो जाता है, और घुंघराले कोष्ठक के अंदर का कोड चलना बंद हो जाता है। इसी कारण, जब सूरज का y-निर्देशांक 130 या उससे कम हो जाता है, तो उसकी गति रुक जाती है।

Nested Conditionals

जब एक साथ कई conditions की जाँच करनी हो, तो आप एक condition को दूसरी के अंदर “nest” कर सकते हैं, जैसे इस प्रकार:


  
  
    //sunHeight is always greater than 130 for variables to change
if (sunHeight > 130) {
  sunHeight -=2;

  //nested condition 
  if (sunHeight < 480) {
    redVal +=4;    
    greenVal +=1;
  }
}

जब आप एक if स्टेटमेंट को दूसरे if स्टेटमेंट के अंदर लिखते हैं, तो उसे nested conditional स्टेटमेंट कहा जाता है। इसमें कोड ब्लॉक चलने के लिए दोनों बूलियन expressions का true होना आवश्यक होता है। इस उदाहरण में, पहले वाले कोड की तुलना में अंतर यह है कि अब जब सूरज का y-value 130 तक पहुँचता है, तो आसमान का रंग बदलना भी बंद हो जाता है।

ऊपर दिए गए कोड में, यदि sunHeight 130 से अधिक है, तो घुंघराले कोष्ठक के अंदर का code block चलता है:

sunHeight की value 2 से घटती है
जब तक sunHeight > 130 और sunHeight < 480 दोनों true हैं, तब तक redVal और greenVal की values बदलने वाला code block चलता है।

ध्यान दें कि यदि पहले if स्टेटमेंट का बूलियन expression false है, तो दूसरी condition की जाँच ही नहीं होती। इसका मतलब है कि जब तक sunHeight 130 और 480 के बीच है, redVal और greenVal बदलते रहेंगे। जब sunHeight 130 या उससे कम हो जाता है, तो सभी चर बदलना बंद कर देते हैं। इस स्थिति में nested conditional का code block चलने के लिए sunHeight > 130 और sunHeight < 480 दोनों का true होना आवश्यक है। उदाहरण के लिए finished project देखें, जिसमें noStroke() को setup() में उपयोग किया गया है ताकि आकृतियों की outlines हटाई जा सकें।

Logical Operators: `&&` और `||`

एक से अधिक conditions वाले conditional statements को लिखने का एक और तरीका logical ऑपरेटर का उपयोग करना है। AND ऑपरेटर (&&) तब उपयोग किया जाता है जब दोनों conditions का true होना आवश्यक हो ताकि code block चले। OR ऑपरेटर (||) तब उपयोग किया जाता है जब कम से कम एक condition का true होना पर्याप्त हो।

Animated sunrise स्केच में nested conditional को AND (&&) logical ऑपरेटर का उपयोग करके दोबारा लिखा जा सकता है, क्योंकि इसमें आवश्यक है कि sunHeight 130 से कम और 480 से अधिक हो। नीचे दिए गए कोड उदाहरण में, ऑपरेटर के दोनों तरफ की बूलियन expressions का true होना आवश्यक है ताकि उसके code block का कोड चले:


  
  
    if (sunHeight < 130 && sunHeight > 480) {
  //Code block that runs when both conditions are true
}

logical ऑपरेटर के बारे में अधिक जानने के लिए MDN reference में logical AND (&&) और logical OR (||) देखें।

Try this!

Logical ऑपरेटर के साथ अभ्यास करने के लिए draw() के अंदर निम्नलिखित कोड जोड़ें:


  
  
    if (mouseIsPressed == true && sunHeight === 130) {
  background(0);
}

Example

बूलियन Variables: `mouseIsPressed` और `keyIsPressed`

mouseIsPressed और keyIsPressed p5.js में पहले से मौजूद विशेष चर हैं, जिनमें बूलियन values होती हैं। mouseIsPressed की value true होती है जब कैनवास पर माउस बटन दबाया जाता है; अन्यथा इसकी value false होती है। keyIsPressed की value true होती है जब कीबोर्ड की कोई भी key दबाई जाती है; अन्यथा यह false होती है।

mouseIsPressed की value माउस बटन दबाने पर कंसोल में कैसे बदलती है, यह देखने के लिए इस उदाहरण को देखें।

“Try this!” चैलेंज में, जब sunHeight की value 130 के बराबर होती है और माउस बटन दबाया जाता है, तो आसमान गहरा हो जाता है। शायद यह एक solar eclipse दिखा रहा हो!

हम mouseIsPressed को if स्टेटमेंट में अपने आप भी उपयोग कर सकते हैं:


  
  
    if (mouseIsPressed && sunHeight === 130) {
  background(0);
}

चूंकि mouseIsPressed पहले से ही true या false की value स्टोर करता है, इसलिए हमें बूलियन expression बनाने के लिए comparison ऑपरेटर की आवश्यकता नहीं होती। बूलियन expressions का परिणाम बूलियन values होता है, और बूलियन variables बूलियन values को स्टोर करते हैं। Conditional statements को केवल इतना चाहिए कि बूलियन value true हो ताकि कोड चले। यदि mouseIsPressed की value true है, तो conditional statement का code block चल जाएगा।

इन उदाहरणों को देखें, जो mouseIsPressed और keyIsPressed का उपयोग करते हैं:

Mouse and keys: देखें कि mouseIsPressed और keyIsPressed को logical ऑपरेटर के बिना conditional statements में कैसे उपयोग किया जा सकता है।
Clickable button: इस उदाहरण में mouseIsPressed, mouseX, और mouseY का उपयोग करके एक clickable बटन बनाया गया है।
Multiple keys: इस उदाहरण में कई keys का उपयोग करके कैनवास पर बदलाव किए गए हैं।

अधिक जानकारी के लिए p5.js reference में mouseIsPressed, keyIsPressed, key और keyCode देखें।

निष्कर्ष

अब जब आपने एक timed sunrise animation बना लिया है, तो स्केच में बदलाव करने के लिए आकृतियों और रंगों को बदलकर प्रयोग करें। नई विशेषताएँ और इंटरैक्शन जोड़ने की कोशिश करें, शायद कुछ नए conditional statements भी जोड़ें। आप एनीमेशन को key press या mouse press से शुरू करने की भी कोशिश कर सकते हैं।

अगले कदम

Organizing Code with Functions

शर्तें और इंटरैक्टिविटी

आवश्यक पूर्व ज्ञान (Prerequisites)

भाग 1: Interactive Sun

एक काले कैनवास पर हरे आयत के पीछे से पीले गोले का ऊपरी आधा हिस्सा दिखाई दे रहा है।

IF स्टेटमेंट (एक conditional statement)

स्टेप वन: Custom चर को define और initialize करें

स्टेप टू: आकृतियाँ बनाएं और कैनवास को रंग दें

स्टेप थ्री: Background का रंग बदलने के लिए बूलियन expression के साथ एक conditional statement का उपयोग करें

IF स्टेटमेंट का वाक्य - विन्यास

बूलियन expressions और values

IF-ELSE स्टेटमेंट

मूल कोड:

संशोधित कोड:

स्टेप फोर: सूरज को छिपाने के लिए घास जोड़ें

भाग 2: Sunrise Animation

स्टेप वन: सूरज की स्थिति और background रंग के लिए चर declare और initialize करें

स्टेप टू: Custom चर का उपयोग करके लैंडस्केप बनाएं

स्टेप थ्री: Custom चर को अपडेट करने के लिए conditional statements का उपयोग करें

Nested Conditionals

Logical Operators: `&&` और `||`

बूलियन Variables: `mouseIsPressed` और `keyIsPressed`

निष्कर्ष

अगले कदम

संदर्भ

संबंधित संदर्भ

संबंधित उदाहरण

आवश्यक पूर्व ज्ञान (Prerequisites)

भाग 1: Interactive Sun

एक काले कैनवास पर हरे आयत के पीछे से पीले गोले का ऊपरी आधा हिस्सा दिखाई दे रहा है।

IF स्टेटमेंट (एक conditional statement)

स्टेप वन: Custom चर को define और initialize करें

स्टेप टू: आकृतियाँ बनाएं और कैनवास को रंग दें

स्टेप थ्री: Background का रंग बदलने के लिए बूलियन expression के साथ एक conditional statement का उपयोग करें

IF स्टेटमेंट का वाक्य - विन्यास

बूलियन expressions और values

IF-ELSE स्टेटमेंट

मूल कोड:

संशोधित कोड:

स्टेप फोर: सूरज को छिपाने के लिए घास जोड़ें

भाग 2: Sunrise Animation

स्टेप वन: सूरज की स्थिति और background रंग के लिए चर declare और initialize करें

स्टेप टू: Custom चर का उपयोग करके लैंडस्केप बनाएं

स्टेप थ्री: Custom चर को अपडेट करने के लिए conditional statements का उपयोग करें

Nested Conditionals

Logical Operators: && और ||

बूलियन Variables: mouseIsPressed और keyIsPressed

निष्कर्ष

अगले कदम

संदर्भ

संबंधित संदर्भ

संबंधित उदाहरण

Logical Operators: `&&` और `||`

बूलियन Variables: `mouseIsPressed` और `keyIsPressed`