Explore creative code with P5.js

Sep 17, 2025

कैसे करना है

एक दिन बिताओ ब्रेंडन डॉज़ पर [2 9] लंदन जेनरेट करें

और कैसे पता लगाएं डेटा dawesome है । इस ऑल-डे वर्कशॉप में वह समझाएगा कि हर दिन हमारे आस-पास के डेटा को कैसे लेना है और इसे प्रसंस्करण और पी 5.जे.एस. का उपयोग करके कुछ सुंदर में बदल दिया जाए। अभी बुक करें !

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

चलो अपने पहले 'स्केच' में गोता लगाएँ। हमारा लक्ष्य एक ड्राइंग टूल बनाना है जो एक साधारण छवि को एनिमेटेड सितारों के क्षेत्र में बदल देता है। सबसे पहले, हम कुछ वैश्विक चर परिभाषित करेंगे और हमारे लिखेंगे सेट अप() समारोह। पी 5 सेट अप() एक बार रन है, जब स्केच लोड हो जाता है, तो यह प्रारंभिक स्थान को संभालने के लिए आदर्श स्थान है।

फ़ाइलों को डाउनलोड करें जो आपको चाहिए [6 9] यहां

।

 var hintimage, skyimage, सितारे = [];
फंक्शन सेटअप () {...}

हमारे अंदर सेट अप समारोह, हम एक कैनवास बनाएंगे और माउस कर्सर छुपाएंगे ताकि हम अपना खुद का आकर्षित कर सकें। डिफ़ॉल्ट रूप से, पी 5 आकार के चारों ओर एक रूपरेखा जोड़ता है - हम इस मामले में स्ट्रोक को अक्षम करना चाहते हैं।

 CreateCanvas (800,500);
nocursor ();
नोस्ट्रोक ();

[8 9] [9 1]

[9 7] पृष्ठभूमि छवि - यह रात आकाश दृश्य हमारी एनीमेशन के लिए सेटिंग प्रदान करता है

इसके बाद, हम छवियों की एक जोड़ी लोड करेंगे। एक पृष्ठभूमि के रूप में कार्य करेगा - इस मामले में, एक रात का आकाश दृश्य। दूसरा 'संकेत' छवि होगी - काला और सफेद डिजाइन हमारे अंतिम डिजाइन पर आधारित होगा। विचार हमारे पृष्ठभूमि दृश्य में डिजाइन को फिर से बनाने के लिए, हमारे संकेत छवि में काले पिक्सेल पर अधिकांश सितारों को रखना है। इन छवियों को पी 5 के पाठ और ड्राइंग टूल्स के साथ बनाना आसान होगा, लेकिन संक्षिप्तता के लिए हम स्थिर संपत्तियों का उपयोग करेंगे।

 hintimage = LoadImage ("// bit.ly/hintimage");
SkyImage = LoadImage ("// BIT.LY/SKYIMAGE") ;

The hint image, which dictates the positioning of our stars — [9 7] संकेत छवि, जो हमारे सितारों की स्थिति को निर्देशित करता है

ड्रा समारोह

यह है सेट अप() ! एक और कुंजी समारोह है () । इसे एक सतत लूप में बुलाया जाता है, जो एनिमेशन के लिए सहायक होता है और समय के साथ तत्व जोड़ता है।

 फंक्शन ड्रा () {...}

ड्रा फ़ंक्शन के भीतर, हमारा पहला कार्य कैनवास को हमारी पृष्ठभूमि छवि के साथ भरना है। P5 स्वचालित रूप से के बीच कैनवास को साफ़ नहीं करता है () कॉल, इसलिए हमें यह हर फ्रेम करने की ज़रूरत है या हम कुछ अजीब संचय प्रभावों के साथ समाप्त हो जाएंगे। कैनवास पर एक लोड की गई छवि को रखने के लिए, उपयोग करें छवि () फ़ंक्शन और स्थिति के लिए एक्स और वाई निर्देशांक दें।

 छवि (स्काईमेज, 0, 0);

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

 var position = CreateVector (Mousex, माउस);

हमारी नव-संग्रहीत माउस स्थिति का उपयोग करके, हम अपने कर्सर को आकर्षित कर सकते हैं। हम ड्राइंग रंग के साथ सेट करेंगे भरना () आरजीबी मूल्यों और उपयोग को पार करके दीर्घवृत्त () माउस स्थान पर एक सर्कल खींचने के लिए।

 भरें (255, 1 9 2, 0);
दीर्घवृत्त (position.x, position.y, 8, 8);

हम केवल नए सितारों को आकर्षित करना चाहते हैं, जबकि माउस दबाया जाता है, इसलिए हम पी 5 की जांच करेंगे माउसप्रेस्ड प्रारंभ करने से पहले। यदि माउस नीचे है, तो हमें अपने अगले सितारा के लिए समाप्त होने के लिए एक अच्छी जगह की गणना करने की आवश्यकता है। हम इसे एक कस्टम फ़ंक्शन के साथ करेंगे FindPixel () , जिसे हम बाद में परिभाषित करेंगे।

[15 9]

Discover the creative side of code with Brendan Dawes at Generate London — [9 7] जेनरेट लंदन में ब्रेंडन डॉज़ के साथ कोड के रचनात्मक पक्ष की खोज करें

एक बार हमारे पास लक्ष्य होने के बाद, हम एक कस्टम स्टार ऑब्जेक्ट (अधिक नीचे) का एक नया उदाहरण तैयार करेंगे और इसे हमारे स्टार सरणी के अंत में धक्का देते हैं। यदि हम 2,000 से अधिक सितारों के साथ समाप्त होते हैं, तो हम सबसे पुराने लोगों को त्यागना शुरू कर देंगे।

 अगर (माउसप्रेस्ड) {
var target = FindPixel ();
var star = नया सितारा (स्थिति, लक्ष्य);
स्टार्स। पुश (स्टार);
यदि (StarS.Length & gt; 2000) स्टार्स। Shift ();
}

अंत में, हम अपने सरणी के माध्यम से सितारों और कॉल के माध्यम से लूप करेंगे अपडेट करें() तथा () उनमें से प्रत्येक पर। हम बाद में इन तरीकों में गोता लगाएंगे।

 के लिए (var i = 0; i & lt; stars.length; i ++) {
सितारे [i]। अपडेट ();
सितारे [i] .DRAW ();
}

सहायक कार्य

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

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

 फ़ंक्शन FindPixel () {
वार एक्स, वाई;
के लिए (var i = 0; i & lt; 15; i ++) {
x = मंजिल (यादृच्छिक (hintimage.width));
y = मंजिल (यादृच्छिक (hintimage.height));

अगर (लाल (hintimage.get (x, y)) & lt; 255) ब्रेक;
}
वापसी Createvector (x, y);
}

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

प्रत्येक स्टार में कुछ गुण होते हैं (स्थिति, अंतिम स्थान और एक यादृच्छिक रूप से उत्पन्न व्यास), जिसे हम 'कन्स्ट्रक्टर फ़ंक्शन' में परिभाषित करेंगे जिसे हमारे ड्रा लूप में बनाए गए प्रत्येक नए स्टार के लिए बुलाया जाता है।

 समारोह स्टार (स्थिति, लक्ष्य) {
this.position = स्थिति;
that.target = लक्ष्य;
this.diameter = यादृच्छिक (1, 5);
}

अगला हम एक जोड़ देंगे अपडेट करें() स्टार के लिए विधि, जो p5.vector का उपयोग करेगा लेरप () स्टार के वर्तमान और लक्ष्य पदों के बीच एक नए स्थान की गणना करने के लिए। इस मामले में, हम प्रत्येक ड्रा के लिए शेष दूरी का चार प्रतिशत आगे बढ़ रहे हैं, जो प्रभावी रूप से हमें आसानी से प्रभाव देता है।

अगर हम फैंसी प्राप्त करना चाहते थे, तो हम यहां कुछ भौतिकी का अनुकरण भी कर सकते हैं, लेकिन अब तक हम इसे सरल बनाएंगे।

 star.prototype.update = समारोह () {
this.position = p5.vector.lerp (
यह स्थिति,
यह .target,
0.04
);
};

ड्राइंग सितारों

अंत में, स्टार () विधि वास्तव में कैनवास को स्टार खींचती है। एक बार फिर, हम उपयोग कर रहे हैं भरना () तथा दीर्घवृत्त () , हालांकि इस बार हम कॉल कर रहे हैं भरना () एक ग्रेस्केल मूल्य और पारदर्शिता के लिए एक अल्फा मूल्य के साथ।

[23 9]

[9 7] प्रत्येक फ्रेम, रैखिक इंटरपोलेशन हमें वर्तमान स्टार स्थिति और इसके गंतव्य के बीच के मार्ग के साथ एक नया बिंदु देता है

सितारों को एक ट्विंकल देने के लिए, अल्फा मान पी 5 का उपयोग करके निर्धारित किया जाता है शोर () समारोह। यह निर्दिष्ट निर्देशांक के लिए पर्लिन शोर मूल्य देता है, जिसका अर्थ है कि आप यादृच्छिक संख्याओं का एक चिकनी, द्रव अनुक्रम प्राप्त करते हैं। तीसरे पैरामीटर के लिए, हम एक स्थानिक मूल्य के बजाय एक समय-आधारित मान पारित कर रहे हैं, ताकि शोर समय के साथ एनिमेट हो।

 star.prototype.draw = समारोह () {
var अल्फा = शोर (
this.target.x,
this.target.y,
मिलिस () / 1000.0
);

भरें (255, अल्फा * 255);

दीर्घवृत्त (
this.position.x, this.position.y,
इस .diameter, यह .diameter
);
};

यह हमारे पहले स्केच के लिए है! नए सितारों को देखने और संकेत छवि के अनुरूप देखने के लिए क्लिक करें और खींचें।

आगे क्या होगा?

यहां से, आप p5.dom ऐड-ऑन का उपयोग करके चर को नियंत्रित करने के लिए कुछ HTML तत्व जोड़ सकते हैं या यहां तक कि दृश्यों को ध्वनि भी जोड़ सकते हैं P5.Sound ।

हमने केवल पी 5.जेएस के साथ संभवतः की सतह को खरोंच कर दिया है, और रास्ते में नई सुविधाओं के साथ, आगे देखने के लिए और भी कुछ है। मज़े करो!

कोडिंग के रचनात्मक पक्ष के बारे में और जानें [2 9] लंदन जेनरेट करें

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

Explore creative code with P5.js

ड्रा समारोह

सहायक कार्य

ड्राइंग सितारों

आगे क्या होगा?

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Explore data visualisation with p5.js

Add digital colours to pencil drawings

How to paint a colourful zombie

How to create an authentic manga comic strip

मार्वल के साथ बिल्कुल सही प्रोटोटाइप और हैंड-ऑफ डिज़ाइन

एक प्यारे पालतू चित्र पेंट

Make a composite in Photoshop

How to make a flexible ribbon rig

श्रेणियाँ