📃 👨‍❤️‍💋‍👨 🌒 घोड़े के पाठ्यक्रम की समस्या को हल करने के लिए एक ग्राफिकल एप्लिकेशन बनाना 👩🏾‍⚕️ 🤕 🤨

यह प्रसंस्करण और p5.js में घोड़े की प्रगति की समस्या को हल करने के लिए एक इंटरैक्टिव अनुप्रयोग बनाने पर एक ट्यूटोरियल है

भाग I

एक घोड़ा बनाएँ - आयताकार आयत ()। घोड़े को एक ग्रे सर्कल द्वारा दर्शाया गया है

rect(bx, by, boxSize, boxSize); fill(50); //  ellipse(bx+50,by+50,20,20); //

घोड़े को उन सभी कोशिकाओं पर पेंट करने दें जिनके माध्यम से यह गुजरता है, यही है कि यह यहां कैसे है।

अगला, माउस को जारी करते समय माउस को पिंजरे के केंद्र की ओर आकर्षित होने दें।

StorX और storY वैरिएबल को जोड़ें जो सेल के निर्देशांक को स्टोर करेगा जहां कर्सर स्थित है। यदि बायाँ बटन दबाया जाता है और कर्सर घोड़े के ऊपर होता है, तो मौजूदा सेल मॉड के निर्देशांक को चर storX और storY में सहेजें :

  void mouseClick() { if (mouseX >= x && mouseX <= x+100 && mouseY >= y && mouseY <= y+100) { if (overBox && mousePressed && (mouseButton == LEFT)) { storX=x; //  x storY=y; //  y } } }

जब बटन छोड़ा जाता है, तो निर्देशांक storX और storY को नाइटएक्स और नाइटस नाइट्स के निर्देशांक में लोड किया जाता है।

  knightX=storX; knightY=storY;

यदि दबाए गए बटन राज्य के लिए एक मानक माउसपॉन्ड बूलियन चर है, तो दबाए गए बटन राज्य के लिए ऐसा कोई चर मौजूद नहीं है - इसे स्वयं बनाएं:

  boolean bool_mouseReleased; // ... void mouseReleased() { bool_mouseReleased=true; locked = false; knightX=storX; knightY=storY; }

अब, यदि माउस बटन दबाया नहीं जाता है (यानी bool_mouseReleased = true ), कोर्ड्स और storY के साथ सेल पर पेंट करें

 if((bool_mouseReleased ) && (x==storX && y==storY )){ modColor=200; }

पिंजरे के केंद्र में घोड़े को खींचना

 //  bool_mouseReleased; storX; storY; boolean bool_mouseReleased; float storX; float storY; float knightX; float knightY; // size of canvas 600*600 int edgeOfCanvas=600; int knightSize = 100; boolean overKnight = false; boolean locked = false; float xOffset = 0.0; float yOffset = 0.0; int unit = 100; // -> width / unit; int unitSize=100; int count; Module[] mods; void setup() { size(600, 600); knightX = 0; knightY = 0; rectMode(CORNER); stroke(100); int wideCount = edgeOfCanvas / unit; int highCount = edgeOfCanvas / unit; count = wideCount * highCount; mods = new Module[count]; int index = 0; for (int y = 0; y < highCount; y++) { for (int x = 0; x < wideCount; x++) { mods[index++] = new Module(x*unit, y*unit); } } } void draw() { background(0); for (Module mod : mods) { mod.mouseClick(); mod.update(); } // // // // // Test if the cursor is over the box fill(200); if (mouseX > knightX && mouseX < knightX+knightSize && mouseY > knightY && mouseY < knightY+knightSize) { overKnight = true; } else { overKnight = false; } fill(200); rect(0,0,100,100); rect(knightX, knightY, knightSize, knightSize); fill(50); ellipse(knightX+50,knightY+50,20,20); } class Module { int x; int y; int modColor=0; // Contructor Module(int xT, int yT){ x = xT; y = yT; } void mouseClick() { if ((mouseX >= x && mouseX <= x+100 && mouseY >= y && mouseY <= y+100)&& (overKnight && mousePressed && (mouseButton == LEFT))) { storX=x; storY=y; } if( (bool_mouseReleased ) && (x==storX && y==storY ) ){ modColor=200; } } void update() { fill(modColor); rect(x, y, unitSize, unitSize); } } void mousePressed() { if(overKnight) { locked = true; } else { locked = false; } xOffset = mouseX-knightX; yOffset = mouseY-knightY; } void mouseDragged() { if(locked) { bool_mouseReleased=false; knightX = mouseX-xOffset; knightY = mouseY-yOffset; } } void mouseReleased() { bool_mouseReleased=true; locked = false; knightX=storX; knightY=storY; }

यहां देखें

भाग II

एक रद्द करें बटन जोड़ें।
बटन के संचालन को दर्शाने वाला एक उदाहरण यहाँ है ।

सबसे पहले, सेल निर्देशांक की IntList सूचियां बनाएं जिसके साथ घोड़ा गुजरा; निचले बाएँ कोने में ही बटन खींचें:

 // list IntList listOfCoordinatesX; IntList listOfCoordinatesY; //button int buttonX=25, buttonY=525; int buttonSize = 50; boolean boolButton = false;

प्रारंभिक सूची

 listOfCoordinatesX = new IntList(); listOfCoordinatesY = new IntList(); listOfCoordinatesX.append(0); listOfCoordinatesY.append(0);

अगली चाल के अंत में (जब माउस बटन को छोड़ते हुए) हम सूची / स्टैक में सेल निर्देशांक जोड़ते हैं:

  if(overKnight){ knightX=storX; knightY=storY; listOfCoordinatesX.append(int(knightX)); listOfCoordinatesY.append(int(knightY)); }

आइए एक बूलियन फंक्शन ओवरबटन () बनाएं , जो माउस कर्सर बटन के ऊपर और बटन बटन के ऊपर है, तो सही है।
boolButton

  void buttonUpdate() { if ( overButton(buttonX, buttonY, buttonSize, buttonSize) ) { boolButton = true; } else { boolButton = false; } } boolean overButton(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } }

चर और सूचियाँ मुख्य प्रोग्राम लूप में कंसोल में प्रदर्शित होती हैं:

  println(boolButton); println(listOfCoordinatesX); println(listOfCoordinatesY);

पूरा कार्यक्रम

 // list IntList listOfCoordinatesX; IntList listOfCoordinatesY; //button int buttonX=25, buttonY=525; int buttonSize = 50; boolean boolButton = false; //mouse boolean bool_mouseReleased; // jump to rect center on button release float storX; float storY; float knightX; float knightY; // size of canvas int edgeOfCanvas=500; int knightSize = 100; boolean overKnight = false; boolean locked = false; float xOffset = 0.0; float yOffset = 0.0; int unit = 100; // -> width / unit; int unitSize=100; int count; Module[] mods; void setup() { size(500, 600); stroke(100); knightX = 0; knightY = 0; rectMode(CORNER); listOfCoordinatesX = new IntList(); listOfCoordinatesY = new IntList(); listOfCoordinatesX.append(0); listOfCoordinatesY.append(0); int wideCount = edgeOfCanvas / unit; int highCount = edgeOfCanvas / unit; count = wideCount * highCount; mods = new Module[count]; int index = 0; for (int y = 0; y < highCount; y++) { for (int x = 0; x < wideCount; x++) { mods[index++] = new Module(x*unit, y*unit); } } } void draw() { background(0); buttonUpdate(); for (Module mod : mods) { mod.mouseClick(); mod.update(); } // // // // // // // Test if the cursor is over the box fill(200); if (mouseX > knightX && mouseX < knightX+knightSize && mouseY > knightY && mouseY < knightY+knightSize) { overKnight = true; } else { overKnight = false; } fill(200); rect(0,0,100,100); rect(knightX, knightY, knightSize, knightSize); fill(50); ellipse(knightX+50,knightY+50,20,20); // draw button rect(buttonX,buttonY,buttonSize,buttonSize); if(boolButton && mousePressed) { fill(200); rect(buttonX,buttonY,buttonSize,buttonSize); } println(); println(storX); println(storY); println(boolButton); println(listOfCoordinatesX); println(listOfCoordinatesY); } class Module { int x; int y; int modColor=0; // Contructor Module(int xT, int yT){ x = xT; y = yT; } void mouseClick() { if (mouseX >= x && mouseX <= x+100 && mouseY >= y && mouseY <= y+100) { if (overKnight && mousePressed && (mouseButton == LEFT)) { storX=x; storY=y; // if(bool_mouseReleased ) {modColor=200;} } } if((bool_mouseReleased ) && (x==storX && y==storY )){ modColor=200; } } void update() { fill(modColor); rect(x, y, unitSize, unitSize); } } void mousePressed() { if(overKnight) { locked = true; } else { locked = false; } xOffset = mouseX-knightX; yOffset = mouseY-knightY; } void mouseDragged() { if(locked) { bool_mouseReleased=false; knightX = mouseX-xOffset; knightY = mouseY-yOffset; } } void mouseReleased() { bool_mouseReleased=true; locked = false; if(overKnight){ knightX=storX; knightY=storY; listOfCoordinatesX.append(int(knightX)); listOfCoordinatesY.append(int(knightY)); } } // button void buttonUpdate() { if ( overButton(buttonX, buttonY, buttonSize, buttonSize) ) { boolButton = true; } else { boolButton = false; } } boolean overButton(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } }

यहां देखें

भाग III

जब आप रद्द बटन पर क्लिक करते हैं तो पिछली सेल में कूदने का कार्य जोड़ें।
माउसप्रेस्ड () फ़ंक्शन में, हम यह देखने के लिए जांचते हैं कि क्या रद्द बटन दबाया गया है। यदि बटन दबाया जाता है, तो समन्वय सूची (स्टैक के सबसे ऊपर) से अंतिम तत्वों को हटा दें, यदि सूची में एक से अधिक तत्व हैं:

 if(boolButton && listOfCoordinatesX.size()>1) { listOfCoordinatesX.pop(); listOfCoordinatesY.pop(); }

जब आप मॉड्यूल वर्ग के माउस क्लिक () विधि में रद्द बटन पर क्लिक करते हैं, तो हम समन्वय सूचियों (ढेर के सबसे ऊपर) के तत्वों को storX और storY चर में सहेजते हैं:

 if(boolButton && mousePressed) { storX= listOfCoordinatesX.get(listOfCoordinatesX.size()-1); storY= listOfCoordinatesY.get(listOfCoordinatesY.size()-1); }

जब आप रद्द बटन जारी करते हैं, तो हम पिछले समन्वय पर लौटते हैं और सेल को मूल (काला) रंग में लौटाते हैं:

 if(boolButton && bool_mouseReleased){ if(x==storX && y==storY ) { modColor=0; } }

माउसरेल्ड () फ़ंक्शन में, हम अपने घोड़े को फ़ील्ड के संबंधित सेल में रखते हैं।

 if(boolButton) { knightX=storX; knightY=storY; }

पूर्ण कोड

 // list IntList listOfCoordinatesX; IntList listOfCoordinatesY; //button int buttonX=25, buttonY=525; int buttonSize = 50; boolean boolButton = false; //mouse boolean bool_mouseReleased; // jump to rect center on button release float storX; float storY; float knightX; float knightY; // size of canvas int edgeOfCanvas=500; int knightSize = 100; boolean overKnight = false; boolean locked = false; float xOffset = 0.0; float yOffset = 0.0; int unit = 100; // -> width / unit; int unitSize=100; int count; Module[] mods; void setup() { size(500, 600); stroke(100); knightX = 0; knightY = 0; rectMode(CORNER); listOfCoordinatesX = new IntList(); listOfCoordinatesY = new IntList(); listOfCoordinatesX.append(0); listOfCoordinatesY.append(0); int wideCount = edgeOfCanvas / unit; int highCount = edgeOfCanvas / unit; count = wideCount * highCount; mods = new Module[count]; int index = 0; for (int y = 0; y < highCount; y++) { for (int x = 0; x < wideCount; x++) { mods[index++] = new Module(x*unit, y*unit); } } } void draw() { background(0); buttonUpdate(); for (Module mod : mods) { mod.mouseClick(); mod.update(); } // // // // // // // Test if the cursor is over the box fill(200); if (mouseX > knightX && mouseX < knightX+knightSize && mouseY > knightY && mouseY < knightY+knightSize) { overKnight = true; } else { overKnight = false; } fill(200); rect(0,0,100,100); rect(knightX, knightY, knightSize, knightSize); fill(50); ellipse(knightX+50,knightY+50,20,20); // draw button rect(buttonX,buttonY,buttonSize,buttonSize); if(boolButton && mousePressed) { fill(200); rect(buttonX,buttonY,buttonSize,buttonSize); } /* println(); println(storX); println(storY); println(boolButton); println(listOfCoordinatesX); println(listOfCoordinatesY); */ } class Module { int x; int y; int modColor=0; // Contructor Module(int xT, int yT){ x = xT; y = yT; } void mouseClick() { if (mouseX >= x && mouseX <= x+100 && mouseY >= y && mouseY <= y+100) { if (overKnight && mousePressed && (mouseButton == LEFT)) { storX=x; storY=y; // if(bool_mouseReleased ) {modColor=200;} } } if((bool_mouseReleased ) && (x==storX && y==storY )){ modColor=200; } if(boolButton && mousePressed){ storX= listOfCoordinatesX.get(listOfCoordinatesX.size()-1); storY= listOfCoordinatesY.get(listOfCoordinatesY.size()-1); } if(boolButton && bool_mouseReleased){ if(x==storX && y==storY ){ modColor=0; } } } void update() { fill(modColor); rect(x, y, unitSize, unitSize); } } void mousePressed() { if(overKnight) { locked = true; // listOfCoordinatesX.append(int(knightX)); // listOfCoordinatesY.append(int(knightY)); } else { locked = false; } xOffset = mouseX-knightX; yOffset = mouseY-knightY; if(boolButton && listOfCoordinatesX.size()>1){ listOfCoordinatesX.pop(); listOfCoordinatesY.pop(); } } void mouseDragged() { if(locked) { bool_mouseReleased=false; knightX = mouseX-xOffset; knightY = mouseY-yOffset; } } void mouseReleased() { bool_mouseReleased=true; locked = false; if(overKnight){ knightX=storX; knightY=storY; listOfCoordinatesX.append(int(knightX)); listOfCoordinatesY.append(int(knightY)); } if(boolButton){ knightX=storX; knightY=storY; } } // button void buttonUpdate() { if ( overButton(buttonX, buttonY, buttonSize, buttonSize) ) { boolButton = true; } else { boolButton = false; } } boolean overButton(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } }

अब प्रोसेसिंग लैंग्वेज का प्रोग्राम सही तरीके से काम करता है, और पी 5.जेएस पर प्रोग्राम में पूर्ववत कार्य सही ढंग से काम नहीं करता है।
यहाँ p5.js पर कार्यक्रम की जाँच करें

Int [] सरणियों के साथ मुख्य कार्यक्रम में सूची सूची बदलें। आप गतिशील रूप से सरणी के साथ-साथ एपेंड () फ़ंक्शन के साथ सूची में एक तत्व जोड़ सकते हैं

  listOfCoordinatesX = append(listOfCoordinatesX,0);

आप किसी सरणी से पॉप () वाला तत्व प्राप्त नहीं कर सकते। इसके लिए, एक छोटा () द्वारा सरणी की लंबाई को कम करने के लिए एक फ़ंक्शन है। आकार () के बजाय सरणी की लंबाई निर्धारित करने के लिए, लंबाई का उपयोग करें

पूरा कार्यक्रम

  // list int[] listOfCoordinatesX; int[] listOfCoordinatesY; //button int buttonX=25, buttonY=525; int buttonSize = 50; boolean boolButton = false; //mouse boolean bool_mouseReleased; // jump to rect center on button release float storX; float storY; float knightX; float knightY; // size of canvas int edgeOfCanvas=500; int knightSize = 100; boolean overKnight = false; boolean locked = false; float xOffset = 0.0; float yOffset = 0.0; int unit = 100; // -> width / unit; int unitSize=100; int count; Module[] mods; void setup() { size(500, 600); stroke(100); //   listOfCoordinatesX = new int[0]; //    listOfCoordinatesY = new int[0]; //   (0,0) listOfCoordinatesX = append(listOfCoordinatesX,0); listOfCoordinatesY = append(listOfCoordinatesY,0); knightX = 0; knightY = 0; rectMode(CORNER); int wideCount = edgeOfCanvas / unit; int highCount = edgeOfCanvas / unit; count = wideCount * highCount; mods = new Module[count]; int index = 0; for (int y = 0; y < highCount; y++) { for (int x = 0; x < wideCount; x++) { mods[index++] = new Module(x*unit, y*unit); } } } void draw() { background(0); buttonUpdate(); for (Module mod : mods) { mod.mouseClick(); mod.update(); } // // // // // // // Test if the cursor is over the box fill(200); if (mouseX > knightX && mouseX < knightX+knightSize && mouseY > knightY && mouseY < knightY+knightSize) { overKnight = true; } else { overKnight = false; } fill(200); rect(0,0,100,100); rect(knightX, knightY, knightSize, knightSize); fill(50); ellipse(knightX+50,knightY+50,20,20); // draw button rect(buttonX,buttonY,buttonSize,buttonSize); if(boolButton && mousePressed) { fill(200); rect(buttonX,buttonY,buttonSize,buttonSize); } // println(); // println(storX); // println(storY); // println(boolButton); // println(listOfCoordinatesX); // println(listOfCoordinatesY); } class Module { int x; int y; int modColor=0; // Contructor Module(int xT, int yT){ x = xT; y = yT; } void mouseClick() { if (mouseX >= x && mouseX <= x+100 && mouseY >= y && mouseY <= y+100) { if (overKnight && mousePressed && (mouseButton == LEFT)) { storX=x; storY=y; // if(bool_mouseReleased ) {modColor=200;} } } if((bool_mouseReleased ) && (x==storX && y==storY )){ modColor=200; } if(boolButton && mousePressed){ storX= listOfCoordinatesX[listOfCoordinatesX.length-1]; storY= listOfCoordinatesY[listOfCoordinatesY.length-1]; } if(boolButton && bool_mouseReleased){ if(x==storX && y==storY ){ modColor=0; } } } void update() { fill(modColor); rect(x, y, unitSize, unitSize); } } void mousePressed() { if(overKnight) { locked = true; } else { locked = false; } xOffset = mouseX-knightX; yOffset = mouseY-knightY; if(boolButton && listOfCoordinatesX.length>1){ // listOfCoordinatesX.pop(); // listOfCoordinatesY.pop(); listOfCoordinatesX=shorten(listOfCoordinatesX); listOfCoordinatesY=shorten(listOfCoordinatesY); } } void mouseDragged() { if(locked) { bool_mouseReleased=false; knightX = mouseX-xOffset; knightY = mouseY-yOffset; } } void mouseReleased() { bool_mouseReleased=true; locked = false; if(overKnight){ knightX=storX; knightY=storY; listOfCoordinatesX=append(listOfCoordinatesX,int(knightX)); listOfCoordinatesY=append(listOfCoordinatesY,int(knightY)); } if(boolButton){ knightX=storX; knightY=storY; } } // button void buttonUpdate() { if ( overButton(buttonX, buttonY, buttonSize, buttonSize) ) { boolButton = true; } else { boolButton = false; } } boolean overButton(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } }

इस प्रोग्राम को एक html पेज पर js स्क्रिप्ट के रूप में जोड़ा जा सकता है। स्क्रिप्ट को चलाने के लिए, आपको प्रोसेसिंग.js का उपयोग करना होगा
इस पृष्ठ को यहाँ देखें।
और यहाँ एक ही है, लेकिन एक घोड़े की छवि के साथ।
और यहाँ घोड़ा केवल जी अक्षर के साथ चल सकता है । बाकी चालें निषिद्ध हैं।

लेख में प्रस्तुत कार्यक्रमों के ग्रंथों के साथ जीथब से लिंक करें।

घोड़े के पाठ्यक्रम की समस्या को हल करने के लिए एक ग्राफिकल एप्लिकेशन बनाना

भाग I

भाग II

भाग III

More articles: