p5.js के साथ एक स्माइली चेहरा बनाना

इस लेख में, हम यह पता लगाएंगे कि एक सरल लेकिन आकर्षक ड्राइंग बनाने के लिए p5.js लाइब्रेरी का उपयोग कैसे करें: एक मुस्कुराता हुआ चेहरा। p5.js एक जावास्क्रिप्ट लाइब्रेरी है जो इंटरैक्टिव ग्राफिक्स और एनिमेशन बनाना आसान बनाती है। यह उन कलाकारों, डिज़ाइनरों और डेवलपर्स के लिए आदर्श है जो कोड-आधारित विज़ुअल प्रोजेक्ट बनाना चाहते हैं।

p5.js क्या है?

p5.js एक लाइब्रेरी है जिसका उद्देश्य विज़ुअल प्रोग्रामिंग की दुनिया को सुलभ बनाना है। यह फ़ंक्शंस का एक सेट प्रदान करता है जो आपको आकृतियाँ बनाने, एनिमेशन बनाने और उपयोगकर्ता के साथ सरल तरीके से बातचीत करने की अनुमति देता है। हालाँकि यह जावास्क्रिप्ट में लिखा गया है, उपयोगकर्ताओं को आकर्षक दृश्य बनाने के लिए इस भाषा में विशेषज्ञ होने की आवश्यकता नहीं है।

p5.js में एक स्केच की मूल संरचना

p5.js में एक स्केच के दो मुख्य कार्य हैं:

1. setup(): शुरुआत में एक बार निष्पादित। यह वह जगह है जहां हम कैनवास को आरंभ करते हैं, रंग सेट करते हैं, और सभी आवश्यक तत्व तैयार करते हैं।
2. draw(): एक लूप में चलता है, फ्रेम दर फ्रेम। यहां हम उन निर्देशों को रखते हैं जिन्हें हम लगातार दोहराना चाहते हैं (एक एनीमेशन की तरह)। हमारे मामले में, हमें एनीमेशन की आवश्यकता नहीं है, इसलिए हम इसे खाली छोड़ देंगे।

परियोजना: एक मुस्कुराता हुआ चेहरा

लक्ष्य सरल आकृतियों का उपयोग करके एक मुस्कुराता हुआ चेहरा बनाना है: चेहरे के लिए एक बड़ा वृत्त, आंखों के लिए दो छोटे वृत्त, और मुंह के लिए एक चाप।

चरण 1: कैनवास बनाएं

पहली चीज़ जो हम करते हैं वह कैनवास के आकार को परिभाषित करना है। इस मामले में, हम 400x400 पिक्सेल के आकार का उपयोग करेंगे और एक काली पृष्ठभूमि सेट करेंगे।

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

चरण 2: चेहरा बनाएं

चेहरा बस एक बड़ा वृत्त है। p5.js में एक वृत्त खींचने के लिए, हम ellipse() फ़ंक्शन का उपयोग करते हैं, जिसके लिए इसके केंद्र के निर्देशांक और इसकी चौड़ाई और ऊंचाई की आवश्यकता होती है। हमारे मामले में, हम कैनवास के केंद्र में 200 पिक्सेल व्यास वाला वृत्त खींचेंगे।

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

चरण 3: आंखें बनाएं

आंखें दो छोटे सफेद घेरे हैं। हम समान एलिप्स () फ़ंक्शन का उपयोग कर सकते हैं, लेकिन इस बार हम उन्हें एक सफेद रंग देते हैं और उन्हें चेहरे के केंद्र के किनारों पर थोड़ा ऊपर रखते हैं।

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

चरण 4: मुस्कान बनाएं

अंत में, मुस्कान के लिए हम आर्क() फ़ंक्शन का उपयोग करते हैं। यह फ़ंक्शन आपको एक अण्डाकार चाप खींचने की अनुमति देता है, जो इस मामले में, एक मुस्कान की तरह दिखता है। हम निर्देशांक समायोजित करते हैं ताकि वक्र केंद्र में रहे और मुंह जैसा दिखे।

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

पूरा कोड:

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

निष्कर्ष

यह सरल उदाहरण दिखाता है कि कैसे, कोड की कुछ पंक्तियों के साथ, हम p5.js का उपयोग करके आकर्षक ग्राफिक्स बना सकते हैं। हालाँकि यह परियोजना बुनियादी है, यहाँ उपयोग किए गए सिद्धांतों को अधिक जटिल और विस्तृत दृश्य बनाने के लिए बढ़ाया जा सकता है। यदि आप अधिक प्रयोग करना चाहते हैं, तो आप तत्वों का आकार बदलने, रंग जोड़ने, या यहां तक ​​कि ड्रॉ() में एनीमेशन बनाने का प्रयास कर सकते हैं।

आगे बढ़ें और इस स्माइली चेहरे का अपना संस्करण बनाएं और जानें कि p5.js क्या पेश करता है!