P5.js کے ساتھ تخلیقی کوڈ تلاش کریں

Sep 12, 2025

کيسے

ایک دن خرچ کرو برینڈن ڈیو پر لندن پیدا اور دریافت کیسے کریں ڈیٹا DAWEMOME ہے . اس پورے دن کے ورکشاپ میں وہ وضاحت کرے گی کہ ہر روز ہمارا اعداد و شمار کس طرح لے لے اور اسے پروسیسنگ اور P5.js کا استعمال کرتے ہوئے خوبصورت چیز میں تبدیل کردیں. اب کتاب !

p5.js. ایک لائبریری کی طاقت لانے کے لئے ڈیزائن کیا گیا ہے پروسیسنگ ویب پر. یہ فنکاروں، ڈیزائنرز اور اساتذہ کو پروگرامنگ کی دنیا میں متعارف کرانے کا ارادہ رکھتا ہے جبکہ ڈیوز اور انجینئرز کو بصری آرٹس میں لانے کے لئے ورسٹائل ٹولز بھی پیش کرتے ہیں.

چلو ڈوبو اور ہماری پہلی 'خاکہ بنائیں. ہمارا مقصد ایک ڈرائنگ کے آلے کی تعمیر کرنا ہے جو متحرک ستارے کے میدان میں ایک سادہ تصویر بدلتی ہے. سب سے پہلے، ہم چند عالمی متغیر کی وضاحت کریں گے اور ہمارے لکھتے ہیں سیٹ اپ () فنکشن P5 کی سیٹ اپ () ایک بار چل رہا ہے، جب خاکہ بھرا ہوا ہے، تو یہ ابتدائی طور پر سنبھالنے کے لئے مثالی جگہ ہے.

فائلوں کو ڈاؤن لوڈ کریں جو آپ کی ضرورت ہوگی یہاں .

 وار Hintimage، Skyimimage، ستارے = []؛
فنکشن سیٹ اپ () {...}

ہمارے اندر سیٹ اپ فنکشن، ہم ایک کینوس بنائے جائیں گے اور ماؤس کرسر کو چھپائیں گے تاکہ ہم اپنے آپ کو اپنی طرف متوجہ کرسکیں. پہلے سے طے شدہ طور پر، P5 شکلوں کے ارد گرد ایک نقطہ نظر میں اضافہ کرتا ہے - ہم اس صورت میں سٹروک کو غیر فعال کرنا چاہتے ہیں.

 Createcanvas (800،500)؛
nocorsor ()؛
نوسٹروک ()؛

The background image – this night sky scene provides the setting for our animation — پس منظر کی تصویر - اس رات آسمان کا منظر ہماری حرکت پذیری کے لئے ترتیب فراہم کرتا ہے

اگلا، ہم تصاویر کی ایک جوڑی لوڈ کریں گے. ایک پس منظر کے طور پر کام کرے گا - اس معاملے میں، ایک رات آسمان کا منظر. دوسرا 'اشارہ' تصویر ہو گا - سیاہ اور سفید ڈیزائن ہمارے حتمی ڈیزائن پر مبنی ہو جائے گا. یہ خیال ہمارے پس منظر کے منظر میں ڈیزائن کو دوبارہ بنانے کے لئے، ہمارے پس منظر منظر میں سیاہ پکسلز پر سیاہ پکسلز پر ستارے ڈالنے کے لئے ہے. یہ تصاویر P5 کے متن اور ڈرائنگ کے اوزار کے ساتھ تخلیق کرنے کے لئے آسان ہو گا، لیکن بریویت کے لئے ہم جامد اثاثوں کا استعمال کریں گے.

 Hintimage = Loadimage ("// bit.ly/hintimage")؛
Skyimage = Loadimage ("// bit.ly/skyimage") ؛

The hint image, which dictates the positioning of our stars — اشارہ تصویر، جو ہمارے ستاروں کی پوزیشننگ کا تعین کرتا ہے

ڈرا تقریب

یہ ہے سیٹ اپ () ! ایک اور کلیدی تقریب ہے ڈرا () . یہ ایک مسلسل لوپ میں کہا جاتا ہے، جو حرکت پذیری کے لئے مددگار ثابت ہوتا ہے اور وقت کے ساتھ عناصر کو شامل کرتا ہے.

 فنکشن ڈرا () {...}

ڈرا فنکشن کے اندر، ہمارے پہلے کام ہماری پس منظر کی تصویر کے ساتھ کینوس کو بھرنے کے لئے ہے. P5 خود بخود کینوس کے درمیان کینوس کو صاف نہیں کرتا ڈرا () کالز، لہذا ہمیں یہ ہر فریم کو کرنے کی ضرورت ہے یا ہم کچھ عجیب جمع اثرات کے ساتھ ختم ہو جائیں گے. کینوس پر ایک بھری ہوئی تصویر رکھنے کے لئے، استعمال کریں تصویر() تقریب اور پوزیشننگ کے لئے ایکس اور Y کو منظم کریں.

 تصویر (Skyimage، 0، 0)؛

اگلا، ہم موجودہ ماؤس کے مقام پر قبضہ کریں گے اور اسے ایک P5.vector کے طور پر استعمال کرتے ہیں Createvector () . یہ اعتراض خلا میں پوائنٹس سے نمٹنے کے لئے آسان افعال کے ساتھ آتا ہے، لیکن ہم زیادہ تر صرف ایک کنٹینر کے طور پر استعمال کرتے ہیں.

 وار پوزیشن = Createvector (mousex، ماؤس)؛

ہمارے نئے ذخیرہ ماؤس کی پوزیشن کا استعمال کرتے ہوئے، ہم اپنے کرسر کو ڈرا سکتے ہیں. ہم ڈرائنگ کا رنگ مقرر کریں گے بھریں () آرجیبی اقدار کو منتقل کرکے اور استعمال کرتے ہوئے یلپس () ماؤس کے مقام پر ایک حلقہ ڈراؤ.

 بھریں (255، 192، 0)؛
یلپس (پوزیشن. x، پوزیشن.، 8، 8)؛

ہم صرف نئے ستاروں کو اپنی طرف متوجہ کرتے ہیں جبکہ ماؤس پر زور دیا جاتا ہے، لہذا ہم P5 کی جانچ پڑتال کریں گے moussispressed. آگے بڑھنے سے پہلے. اگر ماؤس نیچے ہے تو، ہمیں اپنے اگلے اسٹار کے لئے ایک اچھی جگہ کا حساب کرنے کی ضرورت ہے. ہم یہ ایک اپنی مرضی کے مطابق تقریب کے ساتھ کریں گے FindPixel () جس میں ہم بعد میں وضاحت کریں گے.

Discover the creative side of code with Brendan Dawes at Generate London — لندن میں برینڈن ڈیوز کے ساتھ کوڈ کی تخلیقی طرف دریافت کریں

ایک بار جب ہم ایک ہدف رکھتے ہیں تو، ہم اپنی مرضی کے مطابق اسٹار اعتراض (نیچے سے زیادہ) کی ایک نئی مثال بنائے گا اور اسے اپنے اسٹار صف کے اختتام پر دھکا دیں گے. اگر ہم 2،000 سے زائد ستاروں کے ساتھ ختم ہوجائیں تو، ہم سب سے پرانی لوگوں کو مسترد کردیں گے.

 اگر (moussispressed) {
وار ہدف = FindPixel ()؛
وار سٹار = نیا ستارہ (پوزیشن، ہدف)؛
ستارے. پش (سٹار)؛
اگر (ستارے. طاقت اور جی ٹی؛ 2000) ستارے. شفٹ ()؛
}

آخر میں، ہم ستارے کی ہماری صف کے ذریعے لوپ کریں گے اور کال کریں گے اپ ڈیٹ() اور ڈرا () ان میں سے ہر ایک پر. ہم بعد میں ان طریقوں میں ڈوبیں گے.

 کے لئے (var i = 0؛ i & lt؛ stars.lugh؛ i ++) {
ستارے [i] .update ()؛
ستارے [i] .draw ()؛
}

مددگار کام

ابھی سیٹ اپ () اور ڈرا () جگہ میں ہم مددگار افعال اور اشیاء پر کام کریں گے. سب سے پہلے، ہم ایک فنکشن کی وضاحت کریں گے جو ہر نئی ستارہ کے لئے آرام دہ پوزیشن حاصل کرتی ہے. ہم سب کو کرنے کی ضرورت ہے کہ ہماری اشارے کی تصویر میں کچھ بے ترتیب پکسلز چیک کریں حاصل کرو () یہ دیکھنے کے لئے کہ وہ سیاہ یا سفید ہیں.

ہمیں اصل میں صرف ان کی سرخ قیمت کو دیکھنے کی ضرورت ہے، کیونکہ دونوں صورتوں میں آرجیبی اقدار میچ میں. اگر ہم ایک غیر سفید پکسل تلاش کرتے ہیں، تو ہم اسے واپس لیں گے کیونکہ ہم نے اپنے ڈیزائن کو مارا ہے. اگر نہیں، تو ہم صرف آخری پکسل کی جانچ پڑتال کریں گے اور یہ ایک بے ترتیب ستارہ کے طور پر کام کرے گا.

 فنکشن FindPixel () {
var x، y؛
کے لئے (var i = 0؛ i & lt؛ 15؛ i ++) {
X = فلور (بے ترتیب (Hintimage.width))؛
Y = فلور (بے ترتیب (Hintimage.Height))؛

اگر (سرخ (Hintimage.get (x، y)) & lt؛ 255) وقفے؛
}
واپسی Createvector (x، y)؛
}

آخری اپ ہماری اپنی مرضی کے مطابق اسٹار اعتراض ہے. بس رکھو، ہم ایک قابل تجدید کنٹینر چاہتے ہیں جو ہر ستارہ کے بارے میں معلومات ذخیرہ کرتی ہے، اور انہیں اپ ڈیٹ کرنے اور ڈرائنگ کے لئے بھی ایک ذریعہ فراہم کرتا ہے. جاوا اسکرپٹ ایک روایتی احساس میں کلاس بنانے کا ایک طریقہ فراہم نہیں کرتا، لیکن ہم ایک فنکشن کی وضاحت اور اپنی ضروریات کے لۓ اسے بڑھانے کے ذریعے اسی نتیجے میں حاصل کرسکتے ہیں.

ہر ستارہ میں کچھ خصوصیات ہیں (ابتدائی پوزیشن، حتمی مقام اور بے ترتیب پیدا شدہ قطر)، جس میں ہم ایک 'تعمیراتی تقریب' میں وضاحت کریں گے جو ہمارے ڈرا لوپ میں پیدا ہونے والی ہر نئی اسٹار کے لئے کہا جاتا ہے.

 فنکشن اسٹار (پوزیشن، ہدف) {
یہ. Position = پوزیشن؛
یہ. target = ھدف؛
یہ. Diameter = بے ترتیب (1، 5)؛
}

اگلا ہم ایک شامل کریں گے اپ ڈیٹ() سٹار کرنے کا طریقہ، جو P5.vector کا استعمال کرے گا lerp () ایک ستارہ کی موجودہ اور ہدف کے عہدوں کے درمیان ایک نیا مقام کا حساب کرنے کے لئے. اس صورت میں، ہم ہر ڈرا کے لئے باقی فاصلے کے چار فی صد منتقل کر رہے ہیں، جو مؤثر طریقے سے ہمیں آسان اثر فراہم کرتا ہے.

اگر ہم پسند کرنا چاہتے ہیں تو، ہم یہاں کچھ طبیعیات بھی شامل کرسکتے ہیں، لیکن اب ہم اسے آسان رکھیں گے.

 star.prototype.update = تقریب () {
یہ. position = p5.vector.lerp (
یہ.
یہ. target،
0.04.
)؛
}؛

ڈرائنگ ستارے

آخر میں، ستارہ کی ڈرا () طریقہ کار اصل میں ستارہ کو کینوس میں لے جاتا ہے. ایک بار پھر، ہم استعمال کر رہے ہیں بھریں () اور یلپس () اگرچہ اس وقت ہم بلا رہے ہیں بھریں () شفافیت کے لئے ایک گرے کی قیمت اور الفا قیمت کے ساتھ.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — ہر فریم، لکیری مداخلت ہمیں موجودہ اسٹار پوزیشن اور اس کی منزل کے درمیان راستے کے ساتھ ایک نیا نقطہ نظر دیتا ہے

ستاروں کو ایک چمک دینے کے لئے، الفا قیمت P5 کے استعمال سے طے شدہ ہے شور () فنکشن یہ مخصوص سمتوں کے لئے پرلن شور کی قیمت کو واپس دیتا ہے، مطلب یہ ہے کہ آپ بے ترتیب نمبروں کے ہموار، سیال ترتیب حاصل کرتے ہیں. تیسری پیرامیٹر کے لئے، ہم ایک مقامی قیمت کے بجائے ایک وقت کی بنیاد پر قیمت گزر رہے ہیں، تاکہ شور وقت کے ساتھ متحرک کرے گا.

 star.prototype.draw = تقریب () {
وار الفا = شور (
یہ. target.x،
یہ. target.y،
ملس () / 1000.0.
)؛

بھریں (255، الفا * 255)؛

یلپس (
یہ. position.x، it..position.y،
یہ. ڈی ایم میٹرٹر، یہ
)؛
}؛

یہ ہماری پہلی خاکہ کے لئے ہے! نئے ستاروں کو دیکھنے کے لئے کلک کریں اور ڈریگ کریں اور اشارہ تصویر کے مطابق.

اس کے بعد کیا ہے؟

یہاں سے، آپ P5.dom Add پر استعمال کرتے ہوئے متغیر کو کنٹرول کرنے کے لئے کچھ ایچ ٹی ایم ایل عناصر کو شامل کر سکتے ہیں یا استعمال کرتے ہوئے بصریوں کو آواز بھی شامل کریں P5.Sound. .

ہم نے صرف P5.js کے ساتھ ممکن کیا ہے کی سطح کو چھٹکارا دیا ہے، اور راستے میں نئی خصوصیات کے ساتھ، آگے بڑھنے کے لئے بھی زیادہ ہے. مزے کرو!

کوڈنگ کے تخلیقی طرف کے بارے میں مزید جانیں لندن پیدا ! برینڈن ڈیو آپ کو سکھایا جائے گا کہ پروسیسنگ اور P5.js کو خوبصورتی کی چیزوں میں تبدیل کرنے کے لئے کس طرح استعمال کرنا ہے ان کے ورکشاپ میں ؛وہ کام کرنے کی خوشی کے بارے میں بھی بات کرینگے کاغذ، پلاسٹک اور پکسلز . اب آپ کی ٹکٹ کتاب !

P5.js کے ساتھ تخلیقی کوڈ تلاش کریں

ڈرا تقریب

مددگار کام

ڈرائنگ ستارے

اس کے بعد کیا ہے؟

کيسے - انتہائی مشہور مضامین

فارم کے ساتھ رد عمل فارم ریاست کا انتظام کریں

جامسٹیک: آج تیزی سے، زیادہ موثر ویب سائٹس کی تعمیر

بصری ترقی کی تجاویز: آپ کے آرٹ ورک کے ساتھ ایک کہانی بتائیں

غیر حقیقی انجن میں ایک 3D ویلیوفولف کیسے بنائیں

قابل اعتماد فنتاسی جانوروں کو کیسے ڈیزائن کرنا

متحرک ٹائپنگ اثر کیسے بنانا

ایک سادہ رنگ چارٹ بنائیں

سنیما 4 ڈی میں کارٹون حروف کیسے بنائیں

اقسام