P5.js کے ساتھ اعداد و شمار کے نقطہ نظر کو تلاش کریں

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

p5.js. حرکت پذیری کے سر درد کی بہت سی لیتا ہے ڈیٹا بصیرت ویب پر اور دو سادہ افعال کا استعمال کرتے ہوئے حرکت پذیری کے ساتھ چلانے اور چلانے کے لئے یہ سپر آسان بناتا ہے: سیٹ اپ () اور ڈرا () .

لیکن یہ سادگی محدود نہیں ہے، کیونکہ آپ اپنے اپنے افعال کو تخلیق کرتے ہوئے ایک طویل راستہ پر عملدرآمد کر سکتے ہیں اور کمیونٹی کے پیدا کردہ لائبریریوں کے ساتھ اسے بڑھا سکتے ہیں.

مزید ویب ڈیزائن کے اوزار اور مشورہ کے لئے، شاندار کی ہماری فہرست دیکھیں ویب میزبانی فراہم کرنے والے اور کامل کو منتخب کرنے کے لئے اس بات کا یقین کریں ویب سائٹ بلڈر اور کلاؤڈ اسٹوریج .

• تخلیقی کوڈنگ میں حاصل کرنے کے 6 طریقے

حرکت پذیری کو چلانے کے لئے ڈیٹا کیوں استعمال کرتے ہیں؟

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

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

ڈیٹا پر مبنی بمقابلہ اعداد و شمار کے نقطہ نظر

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

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

ہم کیا کرنے جا رہے ہیں؟

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

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

ہمارے اعداد و شمار کے پوائنٹس کو ظاہر کرنے کے لئے، ہم مرکز سے سکرین کے بیرونی کنارے پر سینٹرک آرکسی کی ایک سیریز تشکیل دیں گے. آرک کی لمبائی ڈیٹا کے طول و عرض کی نمائندگی کرے گی. ہم اپنے اعداد و شمار کے لئے دوسرے بصری انکوڈنگز کا استعمال کرتے ہیں، جیسے لائن وزن اور رنگ.

ہم کیا سیکھیں گے؟

کوڈ کے ذریعے کام کرنا، ہم احاطہ کریں گے:

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

فائلیں کہاں ہیں؟

حرکت پذیری کے لئے فائلوں کی میزبانی کی جاتی ہے OpenProcessing. ، دوسرے لوگوں کے خاکہ دریافت کرنے، دریافت کرنے اور انعقاد کرنے کے لئے ایک عظیم پلیٹ فارم. یہ کوڈ بھی آپ کے لئے بہت اچھا مقام ہے.

جیسا کہ ہم آڈیو ڈیٹا استعمال کریں گے، آپ کو خاکہ میں گھسیٹنے کے لئے MP3 فائل کی ضرورت ہوگی. ہم OpenProcessing پر ایک نیا خاکہ قائم کریں گے؛ اس طرح آپ کے خاکہ نظر آتے ہیں جب ہم نے آڈیو لوڈ کیا ہے، ڈیٹا مل گیا اور ایک سادہ 'ڈیٹا کی شکل' تیار کیا.

اور یہ کس طرح مکمل خاکہ نظر آئے گا:

متبادل طور پر، آپ بھی استعمال کر سکتے ہیں P5.js آن لائن ایڈیٹر یا صرف آپ کے اپنے منصوبے میں لائبریری شامل ہیں ڈاؤن لوڈ یا CDN کے ذریعے .

01. ایک نیا خاکہ شروع کرو

مفت اوپن پروسیسنگ اکاؤنٹ حاصل کریں اور اپنے پروفائل کے صفحے سے، ایک خاکہ بنائیں پر کلک کریں. اس کے بعد P5.js کے بلٹ ان افعال میں سے دو پر مشتمل خاکہوں کا سب سے بنیادی بنائے گا:

1. سیٹ اپ () - یہ صرف ایک بار چلتا ہے، اور ایک نیا کینوس قائم کرنے کے لئے استعمال کیا جاتا ہے
2. ڈرا () - یہاں یہ ہے کہ آپ کوڈ ڈالتے ہیں کہ آپ ہر فریم کو چلانا چاہتے ہیں

آپ کو یہ محسوس ہوگا پس منظر () صرف ایک بار قائم کیا جاتا ہے. یہ اسکرین کو صاف کرتا ہے، لہذا اگر آپ اسکرین کو ہر فریم کو صاف کرنا چاہتے ہیں، تو اس کے آغاز میں شامل ہیں ڈرا () تقریب بھی.

یہاں کچھ کوڈ کے ساتھ ایک کھیل ہے، جس میں آپ تلاش کرسکتے ہیں ان میں سے کچھ استعمال کرتے ہوئے P5.js سائٹ پر .

02. آڈیو ڈیٹا کا استعمال کرتے ہوئے پہلا خاکہ بنائیں

میرے پاس جاؤ مثال کے طور پر سٹارٹر خاکہ .

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

کوڈ کا بہت زیادہ تبصرہ کیا جاتا ہے لیکن چند اہم عناصر کو دیکھتے ہیں:

حق کے آغاز میں، آگے سے آگے سیٹ اپ () ، ہم نے کچھ عالمی متغیر پیدا کیا ہے.

اندر اندر سیٹ اپ () ہمارے پاس ایک اہم لائنز ہیں:

colorMode(HSB,360,100,100);

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

canvas.drop(gotFile);

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

soundFile = new p5.SoundFile(file.data);

یہاں ہم اپنے گراؤنڈ فائل ڈیٹا کو تبدیل کر رہے ہیں Soundfile. . جب ہمارے پاس آواز فائل ہے، تو ہم مندرجہ ذیل کوڈ استعمال کرتے ہیں:

1. اندرونی () ایک نیا ایف ایف ٹی مثال قائم کرنے کے لئے (آواز کا تجزیہ کرنے کے لئے)
2. AnalySesound () ہر فریم کے موجودہ بلاک کا تجزیہ کرنے کے لئے
3. getnewsounddatavalue () استمال کے لیے fft.getenergy () ہر فریم ہمیں آواز کی موجودہ طول و عرض دینے کے لئے. یہ 0 سے 255 سے 0 سے 1 تک اس کی ڈیفالٹ رینج سے تبدیل ہوتا ہے.

ٹپ: یہ آپ کے اعداد و شمار کو 0 سے 1 کی حد تک تبدیل کرنے میں مددگار ثابت ہے کیونکہ آپ اس سے زیادہ آسانی سے استعمال کرسکتے ہیں جب بصری پیرامیٹرز جیسے پیمانے، رفتار اور رنگ کے اعداد و شمار کو نقشہ کریں.

چلو ڈرا () تقریب میں نظر آتے ہیں. یہ لائن باس فریکوئنسی کے موجودہ طول و عرض (0 اور 1 کے درمیان) کی درخواست کرتا ہے اور اسے متغیر تفویض کرتا ہے میراڈیٹوال .

var myDataVal = getNewSoundDataValue(“bass”)

ہم اپنی مرضی کے مطابق کہتے ہیں getdatahsbcolor () فنکشن جو ہمارے اعداد و شمار کی قیمت کو الگ الگ طور پر ہیو، سنترپتی اور چمک اور ہمیں ایک رنگ واپس دیتا ہے. اعلی اعداد و شمار، مزید رنگ ہیو سپیکٹرم اور روشن اور زیادہ سنترپت رنگ بھر میں چلتا ہے.

var myDataColor = getDataHSBColor(myDataVal);

اس سے پہلے کہ ہم اپنے یلپس کو اپنی طرف متوجہ کر سکیں، ہمیں اپنے اعداد و شمار کی قیمت کے ذریعہ 200 (PX) کو ضائع کرکے اسے سائز دینے کی ضرورت ہے. لہذا اعلی قیمت، اونچائی بڑا.

var myEllipseSize = 200 * myDataVal;

03. ایک پینٹ برش کے طور پر آڈیو ڈیٹا کا استعمال کریں

تھوڑا مزہ کے لئے، تبصرہ کریں پس منظر () میں کال کریں ڈرا () فنکشن اور آپ اپنے صوتی رد عمل یلپس کے ساتھ پینٹ کرنے کے لئے استعمال کر سکتے ہیں!

05. اپنی خاکہ مکمل کریں

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

دورہ اس خاکہ کا یہ ورژن ختم ہوگیا ، اسے چلائیں اور پھر اس پر ایک MP3 چھوڑ دیں.

آپ اب اسکرین کے مرکز سے آرکسیوں کی ایک سیریز دیکھیں گے. افقی آرکسی باس کے بصیرت ہیں اور عمودی طور پر MP3 کے ٹیلر کو منتخب کرتے ہیں.

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

آرکیس براہ راست اندر اندر ڈرائنگ کرنے کی بجائے ڈرا () ، ہم اصل میں کچھ اپنی مرضی کے مطابق کلاسیں بنا رہے ہیں:

1. کلاس ریڈیلارک {} انفرادی آرک کی ڈیٹا کی قیمت رکھتا ہے اور آرک کو ڈرا دیتا ہے
2. کلاس ریڈیلیرس {} 'Radialarc' مثال کے ہمارے مجموعہ کو منظم کرتا ہے

ہر کلاس کی تعریف میں ایک تعمیراتی ہے جس میں ہم کچھ کلیدی اقدار ترتیب دے رہے ہیں اور پیرامیٹرز میں بھی گزر رہے ہیں جو ہمیں کلاس کے رویے کو تبدیل کرنے میں مدد دیتے ہیں. اب ان پر قریبی نظر آتے ہیں.

radialarc {} کلاس:

یہ ایسی کلاس ہے جو ایک ڈیٹا کی قیمت رکھتا ہے اور اسی طرح کی سمت آرکسیوں کی جوڑتا ہے.

Setvalue () اور Getvalue () اعداد و شمار کے اپ ڈیٹس کے طور پر ہمارے آرک کی صف کے ذریعہ ڈیٹا کو اور باہر ڈیٹا حاصل کرنے کے لئے ہمیں ڈیٹا کو اپ ڈیٹ کرنے کے لۓ ڈیٹا کو دھکا دیں. Redrawfromdata () آرک کو دوبارہ ترتیب دینے اور ریفریجویٹ کرنے کے لئے کہا جاتا ہے.

درکار () یہ ہے کہ ہم آسان P5.js تقریب کو فون کرتے ہیں آرک () . آرک () trigonometry کرنے سے کہیں زیادہ تیز ہے لیکن ہمیں اپنی آرک کے لئے پوزیشن، سائز اور، کثرت سے، ایک آغاز اور اختتام زاویہ جیسے چند اقدار کو منتقل کرنے کی ضرورت ہے.

یہ زاویہ ڈگری کے بجائے 'radians' میں ماپا جاتا ہے. رادین ڈگری کی طرح ہیں لیکن مختلف پیمانے پر: 360 ° 2 ایکس پی پی کے طور پر ایک ہی ہے. P5.js کے لئے مفید بلٹ میں مفید ہے پی ، نصف_پی اور سہ ماہی وغیرہ

radialarcs {} کلاس:

یہ ایک مینجمنٹ کلاس ہے جو ہماری ایک صف پیدا کرتا ہے radialarc {} کلاسیں اور اعداد و شمار کو ہر ایک میں اور باہر منتقل کرنے کی طرف سے ان کو برقرار رکھتا ہے اور آرک کی بلا رہا ہے Redrawfromdata () فنکشن

ابتداء کے لئے ریڈیلارس () ٹیلر اور باس کے لئے کلاسیں، ایک نظر ہے سیٹ اپ () . آپ دیکھ سکتے ہیں کہ ہم دو تخلیق کر رہے ہیں ریڈیلارس () مثالیں اور ہمارے اپنی مرضی کے مطابق پیرامیٹرز میں بھی گزرتے ہیں.

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

ایک بار جب آرک اشیاء ابتدائی طور پر ہیں، ہر فریم کال کریں گے Updateradialarcs () اور drawradialarcs () اہم P5 کے اندر ڈرا () فنکشن، جس میں حرکت پذیری اپ ڈیٹس اور چلتا ہے.

06. اسے مزید لے لو

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

مزید جانے کے لئے، آرکسی، گروپوں اور زاویہ کی تعداد کے ارد گرد کھیلنا. رنگ کے حدود کو تبدیل کریں اور مختلف سائز کو اپنی طرف متوجہ کرنے کے لئے نئی کلاسیں بنائیں.

اس مثال میں ہم نے اعداد و شمار کا استعمال کیا جو مسلسل بہاؤ اور تیز رفتار فریم کی شرح کے ساتھ مل کر، یہ حرکت پذیری کی غلطی پیدا کرتا ہے. تاہم، تمام اعداد و شمار اس طرح کی طرح نہیں ہے اور زیادہ آہستہ آہستہ اپ ڈیٹ کرسکتے ہیں. سست ڈیٹا کے لئے، آپ اب بھی 'tweening' کی طرف سے ہموار حرکت پذیری تخلیق کر سکتے ہیں ان کے موجودہ اور ان کے ہدف طول و عرض کے درمیان آپ کے سائز کی حرکت پذیری.

آپ کے اگلے اعداد و شمار پر مبنی حرکت پذیری کے ساتھ اچھی قسمت!

یہ مضمون اصل میں مسئلہ 320 میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. مسئلہ 320 خریدیں یہاں یا یہاں سبسکرائب کریں .

متعلقہ مضامین:

• سی ایس ایس کے ساتھ SVG پر حرکت پذیری کو کیسے شامل کریں
• ڈیٹا رجحان اپلی کیشن ڈیزائن کو انقلاب کرنے کے لئے مقرر کرتا ہے
• 12 عظیم سی ایس ایس حرکت پذیری وسائل