محتوا
- چرا از داده ها برای هدایت انیمیشن استفاده می کنیم؟
- داده محور در مقابل تجسم داده
- قراره چی درست کنیم؟
- چه چیزهایی یاد خواهیم گرفت؟
- پرونده ها کجاست؟
- 01. طرح جدیدی را شروع کنید
- 02. اولین طرح را با استفاده از داده های صوتی ایجاد کنید
- 03. از داده های صوتی به عنوان قلم مو استفاده کنید
- 05. طرح خود را کامل کنید
- کلاس RadialArc {}:
- کلاس RadialArcs {}:
- 06. جلوتر برو
p5.js جدیدترین اجرای جاوا اسکریپت از پردازش محیط برنامه نویسی خلاقانه دسک تاپ است. این بسیار از قدرت و سهولت استفاده از پردازش را می گیرد و آن را در مرورگر شما قرار می دهد. این به شما کمک می کند تا بوم نقاشی کنید اما همچنین با صفحه وب شما ادغام می شود و به "طرح" شما امکان می دهد تا به DOM پاسخ دهد و آن را دستکاری کند.
p5.js بسیاری از سردردهای انیمیشن و تجسم داده در وب را از بین می برد و بلند شدن و اجرا شدن با انیمیشن را با استفاده از دو عملکرد ساده بسیار ساده می کند: برپایی() و قرعه کشی().
اما تصور نکنید که این سادگی محدود کننده است ، زیرا شما می توانید پردازش را با ایجاد توابع خود طولانی کرده و آن را در بسیاری از کتابخانه های ایجاد شده در جامعه گسترش دهید.
برای اطلاعات بیشتر در زمینه طراحی وب و مشاوره ، به لیست ارائه دهندگان درخشان میزبانی وب ما مراجعه کنید و مطمئن شوید که یک وب سایت ساز و ابر ذخیره سازی مناسب را انتخاب کرده اید.
- 6 راه برای ورود به برنامه نویسی خلاقانه
چرا از داده ها برای هدایت انیمیشن استفاده می کنیم؟
ایجاد سیستم های طراحی و انیمیشن به معنای تعریف مجموعه ای از قوانین ، پارامترها و دامنه های متغیر است که می توانید داده های مختلف را در آنها تغذیه کنید. توانایی بازی با پارامترهای یک سیستم و ورود داده های مختلف به این معنی است که شما می توانید تغییرات متنوعی در خروجی با قوام یک رویکرد سیستماتیک ایجاد کنید.
داده های مختلف می توانند خروجی های دیداری کاملاً متنوعی ایجاد کنند و منبع بزرگی از داده های دارای بافت سریع و پرتحرک صوتی است. این دقیقاً همان چیزی است که ما قصد داریم در انیمیشن خود استفاده کنیم.
داده محور در مقابل تجسم داده
آیا انیمیشن داده محور تجسم داده است؟ بله و خیر. انیمیشن شما نمایش بصری داده ها دقیقاً مانند یک تصویر سازی است اما هدف با هدف تجسم سنتی متفاوت است. از تجسم داده ها برای بینش داده ها به بیننده استفاده می شود ، بنابراین گرافیک در خدمت ارتباطات داده است.
با این حال ، ما از داده ها به عنوان یک بذر خلاق استفاده خواهیم کرد تا بتوانیم تغییرات گرافیکی جالب و متنی ایجاد کنیم ، بنابراین داده ها در خدمت نمودار هستند. البته ، یک رشته با رشته دیگر مرتبط است و گرده افشانی می کند اما خوب است که هنگام استفاده از داده ها ، هدف خود را تشخیص دهید.
قراره چی درست کنیم؟
p5.js دسترسی سریع و آسان به داده های حاصل از تجزیه و تحلیل یک فایل صوتی (مانند MP3) را به ما می دهد. ما از p5.fft برای تجزیه و تحلیل فرکانسهای مختلف (باس و سه برابر) در صدا استفاده خواهیم کرد زیرا صدا پخش می شود و انرژی یا دامنه آن فرکانس را تجسم می کند.
برای اینکه بتوانیم "شکل" صدا را هنگام پخش ببینیم ، نمی خواهیم دامنه فعلی صدا را نشان دهیم بلکه "بافر" نقاط داده را ضبط می کنیم. این به ما امکان می دهد تاریخچه متغیری از ارزش ها را نشان دهیم.
برای نشان دادن نقاط داده ، یک سری کمان متحدالمرکز از مرکز به لبه بیرونی صفحه ایجاد خواهیم کرد. طول قوس دامنه داده ها را نشان می دهد. ما همچنین از رمزگذاری های تصویری دیگری مانند وزن خط و رنگ برای داده های خود استفاده خواهیم کرد.
چه چیزهایی یاد خواهیم گرفت؟
با استفاده از کد ، ما موارد زیر را پوشش خواهیم داد:
- تنظیم طرح جدید p5
- بارگیری و تحلیل صدا
- نگاشت مقادیر داده ها به عناصر بصری مانند اندازه ، شکل و رنگ
- با استفاده از کلاس ها برای ترسیم ، وضعیت انیمیشن و داده های ما را حفظ کرده و کدهای ما را قابل استفاده مجدد می کند.
پرونده ها کجاست؟
پرونده های انیمیشن در OpenProcessing میزبان هستند ، یک بستر عالی برای به اشتراک گذاری ، کشف و انعکاس طرح های دیگران. همچنین مکانی عالی برای رمزگذاری شماست.
از آنجا که ما از داده های صوتی استفاده خواهیم کرد ، برای کشیدن به طرح ، به یک فایل MP3 نیاز دارید. ما طرح جدیدی را در OpenProcessing تنظیم خواهیم کرد. به محض بارگیری صدا ، دریافت داده ها و ترسیم "شکل داده" ساده ، طرح شما اینگونه به نظر می رسد:
و این طرحی است که طرح کامل شده به نظر می رسد:
روش دیگر ، شما همچنین می توانید از ویرایشگر آنلاین p5.js استفاده کنید یا فقط کتابخانه را از طریق بارگیری یا CDN در پروژه خود بگنجانید.
01. طرح جدیدی را شروع کنید
یک حساب OpenProcessing رایگان دریافت کنید و از صفحه نمایه خود ، روی ایجاد یک طرح کلیک کنید. سپس این کار اساسی ترین اسکچ هایی را که شامل دو توابع داخلی p5.js هستند ایجاد می کند:
- برپایی() - این فقط یک بار اجرا می شود و برای تنظیم بوم جدید استفاده می شود
- قرعه کشی() - اینجا جایی است که کدی را قرار می دهید که می خواهید هر فریم را اجرا کنید
متوجه خواهید شد که زمینه() فقط یک بار در تنظیمات فراخوانی می شود. با این کار صفحه نمایش پاک می شود ، بنابراین اگر می خواهید صفحه نمایش را از هر فریم پاک کنید ، این مورد را در ابتدای صفحه قرار دهید قرعه کشی() عملکرد نیز
با استفاده از چند نمونه از مواردی که می توانید در سایت p5.js بیابید ، در اینجا یک بازی با چند کد داشته باشید.
02. اولین طرح را با استفاده از داده های صوتی ایجاد کنید
به طرح اولیه استارت من بروید.
دکمه پخش را بزنید و متنی را مشاهده خواهید کرد که از شما می خواهد یک فایل MP3 را روی بوم بیندازید. چند ثانیه صبر کنید تا بارگذاری به پایان برسد و سپس روی بوم کلیک کنید تا پخش شروع شود. به دنبال ماوس خود باید یک بیضی را ببینید که در حال تغییر اندازه و تغییر رنگ به همراه دامنه باس در موسیقی بارگذاری شده شما است.
بیشتر این کد نظر داده می شود اما بیایید به چند عنصر اصلی نگاه کنیم:
درست در ابتدای طرح ، جلوتر از آن برپایی()، برخی از متغیرهای جهانی ایجاد کرده ایم.
در داخل برپایی() ما چند خط مهم داریم:
colorMode (HSB ، 360،100،100) ؛
colorMode () شما را قادر می سازد تا p5.js را تنظیم کند تا در فضاهای رنگی مختلف مانند RGB و HSB کار کند و همچنین مقیاسی را که برای پیمایش کانال ها استفاده می کنید ، پیکربندی کنید. در اینجا محدوده های HSB را به مقادیری تنظیم کرده ایم که ممکن است از فتوشاپ با آنها بیشتر آشنا باشید تا تنظیمات پیش فرض (0 تا 255).
canvas.drop (gotFile) ؛
این عملکرد فوق العاده مفید p5.js ما را قادر می سازد تا هر رویداد افتادن پرونده را بر روی بوم خود گوش دهیم. هنگامی که یک رویداد افت فایل دریافت می کنیم ، تماس می گیریم gotFile () برای بررسی اینکه آیا نوع صحیحی است و شروع به تجزیه و تحلیل صدا می کنید.
soundFile = p5 جدید. فایل صوتی (file.data) ؛
در اینجا ما داده های پرونده افتاده خود را به یک تبدیل می کنیم SoundFile. وقتی فایل صوتی را داریم ، از کد زیر استفاده می کنیم:
- initSound () برای راه اندازی یک نمونه FFT جدید (برای تجزیه و تحلیل صدا)
- analyseSound () برای تجزیه و تحلیل بلوک فعلی صدا در هر فریم
- getNewSoundDataValue () برای استفاده fft.getEnergy () هر فریم برای دامنه فعلی صدا. این از دامنه پیش فرض آن 0 تا 255 به 0 به 1 تبدیل می شود.
نکته: مفید است که داده های خود را به محدوده 0 تا 1 تبدیل کنید زیرا می توانید هنگام نقشه برداری از داده ها به پارامترهای بصری مانند مقیاس ، سرعت و رنگ ، از آنها راحت تر استفاده کنید.
بیایید به عملکرد رسم () نگاه کنیم. این خط دامنه جریان (بین 0 تا 1) فرکانس باس را درخواست می کند و متغیر را به آن اختصاص می دهد myDataVal.
var myDataVal = getNewSoundDataValue ("باس")
ما عرف خود را می گوییم getDataHSBColor () عملکردی که مقدار داده های ما را به صورت جداگانه با Hue ، Saturation و Brightness ترسیم می کند و یک رنگ به ما برمی گرداند. هرچه داده ها بالاتر باشند ، رنگ در طیف رنگ بیشتر حرکت می کند و رنگ روشن تر و اشباع تر می شود.
var myDataColor = getDataHSBColor (myDataVal)؛
قبل از اینکه بیضی خود را ترسیم کنیم ، باید با ضرب 200 (px) در مقدار داده ، اندازه ای به آن بدهیم. بنابراین هرچه مقدار بالاتر باشد ، بیضی بزرگتر است.
var myEllipseSize = 200 * myDataVal؛
03. از داده های صوتی به عنوان قلم مو استفاده کنید
برای کمی سرگرمی ، درباره آن نظر دهید زمینه() تماس بگیرید در قرعه کشی() عملکرد و شما می توانید بیضی واکنش پذیر صدا خود را برای رنگ آمیزی استفاده کنید!
05. طرح خود را کامل کنید
ترسیم یک بیضی داده برای یک فرکانس بسیار خوب است اما اکنون یک سری قوس داده برای هر دو باس و سه برابر ایجاد خواهیم کرد. ما همچنین یک بافر از مقادیر قبلی ترسیم خواهیم کرد تا به ما کمک کند شکل صدا را بهتر ببینیم.
از این نسخه به پایان رسیده از طرح بازدید کنید ، آن را اجرا کرده و سپس یک MP3 بر روی آن رها کنید.
اکنون شاهد بیرون آمدن مجموعه ای از کمان ها از مرکز صفحه هستید. قوس های افقی تجسم باس است و قوس های عمودی سه گانه MP3 را انتخاب می کنند.
با مشاهده کد ، قسمت عمده ای از تنظیمات ، بارگیری ، تجزیه و تحلیل و بدست آوردن داده ها را می بینید که همان آخرین طرح است ، بنابراین می توانیم از آن چشم پوشی کنیم. در اینجا کد کاملاً کمی وجود دارد ، بنابراین ، مانند قبل ، اجازه دهید فقط چند نکته اساسی را انتخاب کنیم.
به جای کشیدن قوس ها به طور مستقیم قرعه کشی()، ما در واقع برخی از کلاسهای سفارشی را ایجاد می کنیم:
- کلاس RadialArc {} مقدار داده های قوس فردی را نگه داشته و قوس را ترسیم می کند
- کلاس RadialArcs {} مجموعه ما از موارد 'RadialArc' را مدیریت می کند
هر تعریف کلاس دارای یک سازنده است که در آن برخی مقادیر کلیدی را تنظیم می کنیم و همچنین پارامترهایی را وارد می کنیم که به ما امکان می دهد رفتار کلاس را تغییر دهیم. بیایید اکنون نگاه دقیق تری به آنها داشته باشیم.
کلاس RadialArc {}:
این کلاسی است که یک مقدار داده واحد را نگه می دارد و یک جفت قوس متقارن ترسیم می کند.
setValue () و getValue () ما را قادر می سازد تا داده ها را از یک قوس خارج و خارج کنیم و هنگام به روزرسانی داده ها ، داده ها را از طریق آرایه قوس خود فشار دهیم. redrawFromData () برای محاسبه مجدد و ترسیم مجدد قوس فراخوانی می شود.
drawArc () جایی است که ما عملکرد مفید p5.js را فراخوانی می کنیم قوس (). قوس () سریعتر از انجام مثلثات است ، اما ما باید مقادیری مانند موقعیت ، اندازه و مهمتر از آن ، یک زاویه شروع و پایان قوس را به آن منتقل کنیم.
این زاویه به جای درجه در رادیان اندازه گیری می شود. رادیان ها مانند درجه هستند اما در مقیاس متفاوت: 360 درجه همان 2 عدد رادیان پی است. P5.js ثابت های داخلی خوبی برای دارد PI, HALF_PI و QUARTER_PI و غیره.
کلاس RadialArcs {}:
این یک کلاس مدیریتی است که آرایه ای از ما را ایجاد می کند RadialArc {} با انتقال داده ها به داخل و خارج از هر یک و فراخوانی arc ، آنها را به روز نگه می دارد redrawFromData () تابع.
برای مقداردهی اولیه RadialArcs () کلاس های سه گانه و باس ، نگاهی به برپایی(). می بینید که ما در حال ایجاد دو هستیم RadialArcs () موارد و همچنین عبور از پارامترهای سفارشی ما.
این پارامترها عبارتند از: تعداد قوس ها ، اندازه داخلی و بیرونی ترین قوس ها ، زاویه شروع ، حداکثر وزن خط و محدوده رنگ رنگ. با ایجاد این کلاسهای سفارشی ، ما را قادر می سازد تا از کد خود استفاده مجدد کنیم ، اما همچنین با عبور از این پارامترها ، هر نمونه را به صورت جداگانه در می آوریم.
پس از مقدار دهی اولیه اشیا ar قوس ، هر فریم فراخوانی می شود updateRadialArcs () و drawRadialArcs () درون p5 اصلی قرعه کشی() عملکرد ، که به این ترتیب انیمیشن به روز می شود و حرکت می کند.
06. جلوتر برو
ما در اینجا کدهای زیادی را پوشش داده ایم اما اساساً امیدوارم که شما می توانید ببینید که چگونه داده ها را می گیریم و آنها را روی عناصر بصری مانند اندازه ، موقعیت ، طول ، وزن و رنگ اعمال می کنیم.
برای رفتن بیشتر ، با تعداد قوس ها ، گروه ها و زاویه ها بازی کنید. محدوده های رنگ را تغییر دهید و کلاس های جدید ایجاد کنید تا اشکال مختلف ترسیم شود.
در این مثال ما از داده هایی استفاده می کنیم که به طور مداوم جریان دارند و همراه با نرخ فریم سریع ، توهم انیمیشن را ایجاد می کنند. با این حال ، همه داده ها اینگونه نیستند و می توانند با سرعت کمتری به روز شوند. برای داده های کندتر ، همچنان می توانید با ایجاد "انحراف" روی انیمیشن اشکال خود بین ابعاد فعلی و هدف آنها ، انیمیشن صاف ایجاد کنید.
با انیمیشن بعدی داده محور خود موفق باشید!
این مقاله در اصل در شماره 320 چاپ شد خالص، پرفروش ترین مجله جهان برای طراحان و توسعه دهندگان وب. شماره 320 را بخرید اینجا یا مشترک شدن در اینجا.
