"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > जावास्क्रिप्ट के साथ जनरेटिव आर्ट की खोज

जावास्क्रिप्ट के साथ जनरेटिव आर्ट की खोज

2024-11-01 को प्रकाशित
ब्राउज़ करें:243

Exploring Generative Art with JavaScript

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

जनरेटिव आर्ट क्या है?

जेनरेटिव आर्ट ऐसी प्रणालियाँ बनाने पर निर्भर करती है जो कला के काम की अनंत संख्या में विविधताएँ उत्पन्न कर सकती हैं। इन प्रणालियों को विशिष्ट नियमों, गणितीय एल्गोरिदम या यहां तक ​​कि यादृच्छिकता द्वारा नियंत्रित किया जा सकता है। सिस्टम के प्रत्येक निष्पादन के साथ, एक नई, अनूठी और देखने में दिलचस्प कलाकृति तैयार की जा सकती है।

कला का यह रूप प्रोग्रामिंग से गहराई से जुड़ा हुआ है, क्योंकि नियम और कोड परिभाषित करते हैं कि दृश्य परिणाम कैसे बनाए जाते हैं। जनरेटिव कलाकार पैटर्न, रंग, आकार और गति को परिभाषित करने के लिए एल्गोरिदम का उपयोग करते हैं, जिससे प्रत्येक कार्य खोज की प्रक्रिया बन जाता है।

जावास्क्रिप्ट क्यों?

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

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

p5.js के साथ शुरुआत करना

पर्यावरण की स्थापना

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

p5.js स्केच का मूल कंकाल

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

  • setup(): यह फ़ंक्शन शुरुआत में एक बार चलता है। यह वह जगह है जहां हम कैनवास, रंग और कोई भी प्रारंभिक पैरामीटर सेट करते हैं।
  • draw(): यह फ़ंक्शन एक लूप में बार-बार चलता है। यहां, हम दृश्य तत्वों को बनाने और बनाने के लिए निर्देश देते हैं।

यहां एक बुनियादी उदाहरण है:

function setup() {
  createCanvas(800, 800); // Create an 800x800 pixel canvas
  background(255); // White background
}

function draw() {
  noLoop(); // Prevent the draw function from looping
  for (let i = 0; i 



इस मूल स्केच में, हम एक खाली कैनवास बनाते हैं और यादृच्छिक रंगों के साथ 100 वृत्त बनाते हैं, जिनमें से प्रत्येक को यादृच्छिक रूप से रखा जाता है। जनरेटिव कला की सुंदरता परिणामों की परिवर्तनशीलता में निहित है। कोड के प्रत्येक रन के साथ, वृत्त अलग-अलग स्थानों पर और अलग-अलग रंगों के साथ दिखाई देंगे।

गणित के साथ पैटर्न बनाना

जनरेटिव कला अक्सर यादृच्छिकता को सटीक गणितीय संरचनाओं के साथ जोड़ती है। आइए एक उदाहरण देखें जहां हम नियमित आकृतियों और चक्रीय गतिविधियों के आधार पर एक ज्यामितीय पैटर्न तैयार करते हैं:

function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  stroke(0, 50);
}

function draw() {
  translate(width / 2, height / 2); // Move the origin to the center
  let radius = 300;
  for (let i = 0; i 



इस उदाहरण में, हम एक गोलाकार पैटर्न में कैनवास केंद्र के चारों ओर 100 वृत्त वितरित करने के लिए कॉस() ​​और पाप() जैसे त्रिकोणमितीय कार्यों का उपयोग करते हैं। जनरेटिव कला में गणित की सुंदरता यह है कि आप जटिल और आश्चर्यजनक पैटर्न बनाने के लिए सरल समीकरणों का उपयोग कर सकते हैं।

अन्तरक्रियाशीलता जोड़ना

जावास्क्रिप्ट और पी5.जेएस के साथ काम करने का एक बड़ा फायदा यह है कि आप कितनी आसानी से अपनी रचनाओं में अन्तरक्रियाशीलता जोड़ सकते हैं। नीचे एक उदाहरण दिया गया है जहां पैटर्न के रंग माउस की स्थिति के अनुसार बदलते हैं:

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  let numLines = 50;
  let spacing = width / numLines;

  for (let i = 0; i 



इस स्केच में, माउस की स्थिति के आधार पर रेखाओं का रंग बदलता है। अन्तरक्रियाशीलता सृजनात्मक कला का एक अनिवार्य घटक है, क्योंकि यह दर्शकों को कलाकृति को सीधे प्रभावित करने की अनुमति देता है।

निष्कर्ष

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

जनरेटिव आर्ट की खोज प्रोग्रामिंग और रचनात्मकता को मिश्रित करने का एक शानदार तरीका है। यह देखने के लिए विभिन्न आकृतियों, रंगों और पैटर्न के साथ प्रयोग करें कि आप अपनी स्वयं की जेनरेटिव कलाकृति को कितनी दूर तक आगे बढ़ा सकते हैं!

विज्ञप्ति वक्तव्य इस लेख को पुन: पेश किया गया है: https://dev.to/marisbotero/exploring-generative-art-with-with-javascript-3dp?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3