ترکیب هنر و برنامه‌نویسی در وب: از الگوهای هندسی و انیمیشن تا Generative Art و تجربه تعاملی

دوره آنلاین کدنویسی خلاق با p5.js | Creative Coding

اگر می‌خواهید خلاقیت در برنامه‌نویسی را به نمایش بگذارید، Creative Coding با p5.js بهترین نقطه شروع است. در این دوره پروژه محور، با JavaScript و کتابخانه p5.js تجربه‌های بصری تعاملی می‌سازید، Generative Art خلق می‌کنید، صدا و تصویر را به کد وصل می‌کنید و برای وب دموی حرفه‌ای منتشر می‌کنید.

  • مدرس: سهراب معتبر
  • منتور: سهراب معتبر و
شروع قیمت از ۲,۴۵۰,۰۰۰ تومان
افزودن به سبد خرید
آخرین بروز رسانی: ۱۴۰۲/۱۱/۱۶
امکان خرید قسطی
۱۲ هفته

۶ ساعت آموزش در هفته

۴.۷ (نظر ثبت شده ۱۲ )
سطح: جامع

دوره آنلاین کدنویسی خلاق با p5.js | Creative Coding

۱۴ ساعت ویدیو آموزشی

۱۳ فصل ، ۹۱ درس و ۴ تمرین

گواهی پایان دوره

دارد

دوره آنلاین کدنویسی خلاق با p5.js | Creative Coding
۴.۷ (نظر ثبت شده ۱۲ ) ۱۱۸ سطح: جامع
شروع قیمت از ۲,۴۵۰,۰۰۰ تومان
افزودن به سبد خرید

توضیحات دوره

کدنویسی خلاق رسانه‌ای است که در آن «کد» مثل قلم‌مو عمل می‌کند. در این برنامه جامع، از قدم‌های ابتدایی JavaScript و محیط p5.js شروع کرده و به‌سرعت وارد ساخت اسکچ‌های بصری، انیمیشن‌های 2D و تعامل‌های کاربر محور می‌شویم. یاد می‌گیریم روی بوم HTML Canvas رسم کنیم، با رنگ و حرکت بازی کنیم و به کمک Noise، Randomness و Mapping الگوهای چشم‌نواز بسازیم.

در ادامه به Generative Art می‌رسیم: طراحی الگوریتمی، الگوهای هندسی پیچیده، Fractal و آشوب کنترل‌شده. سپس با Data و متن کار می‌کنیم، Data Visualization‌های کوچک می‌سازیم و حتی صدا را با p5.sound به تصویرت وصل می‌کنیم تا Audio Visualهای تعاملی شکل بگیرند. بخش تعامل شامل رویدادهای موس و کیبورد، Slider، Button و کنترل‌های ساده UI است تا کاربر با اثر هنری شما بازی کند.

برای پروژه‌های پیشرفته‌تر، مفاهیم سه بعدی و WebGL مقدماتی، دوربین و نور را تجربه می‌کنیم و با Object Oriented Programming ساخت سیستم ذرات و رفتارهای پیچیده را می‌آموزیم. در پایان، خروجی‌ها را به‌صورت دموی وب منتشر می‌کنیم؛ می‌توانید با CSS ظاهر صفحه را شخصی‌سازی کرده و یک پورتفولیوی آنلاین بسازید. اگر پیش‌زمینه‌ای در Python دارید یا می‌خواهید بعداً Python را دنبال کنید، متوجه می‌شوید که انتقال مفاهیم هنر مولد بین زبان‌ها ساده است. همچنین با ایده‌هایی از «کدنویسی با هوش مصنوعی» برای الهام‌گیری پالت رنگ یا الگو آشنا می‌شوید تا بدانید AI دستیار است، نه جایگزین خلاقیت.

برنامه‌نویسی خلاق

اطلاعات بیشتر

  • گواهی قابل اشتراک

    اضافه کردن مدرک در پروفایل لینکدین

  • منتورشیب و تمرین

    این دوره دارای ۴ تمرین است

چرا یادگیری دوره آنلاین کدنویسی خلاق با p5.js | Creative Coding؟

  • ترکیب هنر و فناوری: ایده‌های هنری را با زبان برنامه نویسی به اثر تعاملی تبدیل کن.

  • بازار کار پویا: همکاری با تیم‌های وب، استودیوهای خلاق و نصب‌های تعاملی در رویدادها.

  • درک برنامه نویسی در عمل: حلقه، تابع، آرایه، OOP و 3D را در قالب پروژه‌های واقعی یاد بگیرید.

  • افزایش سرعت ایده تا دموی وب: با p5.js Web Editor و اشتراک‌گذاری فوری، بازخورد سریع بگیرید.

  • مسیر تکمیلی باز: پس از دوره می‌توانید سراغ هنر مولد با Python، مصورسازی داده یا توسعه بازی بروید.

آنچه در این دوره می‌آموزید

مبانی p5.js و جاوااسکریپت خلاق

  • راه‌اندازی محیط و Canvas نصب و شروع کار با p5.js، ساخت فایل‌ها و ساختار setup و draw.
  • پایه‌های کدنویسی متغیر، تابع، آرایه و حلقه‌ها با رویکرد Creative Coding و دیباگ ساده.

تفکر الگوریتمی تبدیل ایده‌های بصری به گام‌های قابل کدنویسی و طراحی الگوهای تکرارشونده.

طراحی دوبعدی و انیمیشن

  • ترسیم و شکل‌دهی خطوط، منحنی‌ها، Bezier و ساخت فرم‌های پیچیده با createGraphics.
  • ترنسفورم‌ها و حرکت translate، rotate، scale و کنترل فریم‌ریت برای انیمیشن روان.

الگوهای مولد ساخت pattern های generative و بافت‌های بصری قابل تکرار.

تصویر، متن و داده

  • پردازش تصویر loadImage، کار روی پیکسل‌ها، فیلتر و ترکیب برای خلق افکت‌های خلاقانه.
  • کار با متن Strings، تایپوگرافی و چیدمان متن در پوستر و پویا‌نمایی‌های تایپی.

داده‌محور فکر کردن خواندن JSON و CSV، نگاشت داده به تصویر و شروع مصورسازی ساده.

ریاضی خلاق و شبیه‌سازی

  • نگاشت و درون‌یابی mapping و interpolation برای کنترل نرمِ حرکت و تغییرات.
  • Noise و Random تفاوت تصادفی و پرلین نویز و کاربردشان در بافت‌های طبیعی.
  • هندسه و بردار زوایا، مثلثات و وکتورها برای مسیر، سرعت و جهت.

سیستم‌های پویا فرکتال، آشوب، سلول‌های خودکار و شبیه‌سازی فیزیک مثل جاذبه، فنر و ذرات.

تعامل و رابط تعاملی

  • ایونت‌ها و ورودی‌ها ماوس و کیبورد، Drag and Drop و مدیریت زمان و تایمر.
  • المان‌های رابط ساخت Slider، Button، Checkbox، Text Input و Color Picker با p5.dom.

ورودی چندرسانه‌ای اتصال Webcam یا میکروفون برای پروژه‌های Interactive Art.

صوت، سه‌بعدی و توسعه برای وب

  • صوت واکنشی آنالیز طیف و Amplitude با p5.sound برای ویژوال‌های Audio-Reactive.
  • سه‌بعدی در وب رندر WebGL، نور، دوربین و متریال برای حجم‌های 3D تعاملی.
  • شی‌گرایی و مقیاس‌پذیری ساخت کلاس‌ها، ماژولار کردن کد و استفاده از کتابخانه‌ها.

انتشار آنلاین آماده‌سازی پروژه برای وب، بهینه‌سازی عملکرد و اشتراک‌گذاری در گیت‌هاب یا ادیتور p5.

گواهی پایان دوره اینورس

این گواهی به افرادی اعطا می‌شود که دوره آموزشی اینورس را با موفقیت گذرانده‌اند. این مدرک نشان‌دهنده‌ی کسب مهارت‌ها و دانش لازم در زمینه‌های مرتبط است و می‌تواند در بهبود فرصت‌های شغلی و حرفه‌ای مؤثر باشد.

آموزش تمرین‌محور

یادگیری از طریق انجام پروژه‌های واقعی و کاربردی در طول دوره

منتورشیپ حرفه‌ای

همراهی و راهنمایی اختصاصی مدرسین مجرب اینورس برای هر هنرجو

دسترسی آنلاین و آسان

امکان یادگیری آنلاین از هر مکان، با پلتفرمی کاربرپسند و به‌تناسب برنامه شخصی

گواهی پایان دوره معتبر

دریافت گواهی رسمی از مدرسه اینورس پس از اتمام موفقیت‌آمیز دوره

به‌روز بودن محتوا

آموزش بر اساس آخرین نسخه‌ها و تکنیک‌های به‌روز مرتبط با دوره آموزشی انتخاب‌شده

ویژگی ها و مزایای دوره

  • اصول کدنویسی برای هنرمندان

    مبانی JavaScript و p5.js را با مثال‌های بصری یاد می‌گیری تا مفاهیم سخت ساده شوند.

  • Workflow حرفه‌ای وب

    p5.js Web Editor، مدیریت فایل‌ها، ادغام با HTML و CSS و انتشار آنی روی وب.

  • منتورینگ و دسترسی آسان

    بازخورد تخصصی روی تمرین‌ها، ویدئوهای VOD و فایل‌های اسکچ برای شروع سریع.

  • پورتفولیو و اعتبار

    دموهای قابل انتشار، مناسب Behance و GitHub Pages به‌همراه گواهی پایان دوره.

  • مسیر سریع از ایده تا اجرا

    پروژه محور با 4 تمرین؛ هر تمرین خروجی مشخص و قابل نمایش دارد.

برنامه آموزشی

یک دوره آموزشی تمرین‌محور

برنامه درسی اینورس به طور مداوم توسط تیم ما به‌روز می‌شود تا یک روش یادگیری عملی را تضمین کند

تعداد کل درس ها: ۹۱
تعداد کل فصل ها: ۱۳
تعداد کل تمرین ها: ۴
مشاهده سرفصل ها

برنامه آموزشی

تعداد کل درس ها: ۹۱
تعداد کل فصل ها: ۱۳
تعداد کل تمرین ها: ۴
۱
مقدمات
فصل۱
۶۰ دقیقه ۱۱ درس ۱ تمرین دارد

سهراب معتبر

مدرس دوره
  • ۴
  • ۱ دوره
  • ۳۸ نظر

پیش‌نیاز های دوره

  • آشنایی مقدماتی با مفاهیم پایه ریاضی مثل مختصات و زاویه‌ها مفید است اما الزامی نیست.

  • نرم‌افزار Processing (مراحل نصب در دوره آموزش داده می‌شود).

فرصت های شغلی پس از دوره
  • هنرمند مولد (Generative Artist)
  • توسعه‌دهنده فرانت‌اند تعاملی WebGL/p5.js
  • طراح رسانه تعاملی و اینستالیشن
  • طراح ویژوال واکنشی به صدا
  • موشن دیزاینر با رویکرد کدنویسی
  • فعالیت به عنوان هنرمند دیجیتال در گالری‌ها و نمایشگاه‌ها
  • طراحی و توسعه تجربیات تعاملی برای وب‌سایت‌ها و اپلیکیشن‌ها
  • خالق تجربه‌های کدنویسی خلاق (Creative Coder)
  • همکاری با تیم‌های توسعه وب و توسعه بازی

این دوره برای چه کسانی مناسب است؟

  • هنرمندان و طراحان گرافیک که می‌خواهند مهارت‌های کد را به آثارشان اضافه کنند.

  • علاقه‌مندان به Generative Art و Creative Coding که به دنبال اجرای ایده در وب هستند.

  • طراحان وب که می‌خواهند لایه‌ای از تعامل و Motion به پروژه‌های HTML-CSS اضافه کنند.

  • افراد مبتدی برنامه‌نویسی که یک مسیر جذاب برای ورود می‌خواهند و به JavaScript علاقه دارند.

  • دانشجویان هنر و فناوری که قصد ساخت پروژه پایان‌ترم یا نمایشگاهی تعاملی دارند.

این دوره مثل یک آزمایشگاه زنده است: در هر فصل یک اثر قابل نمایش می‌سازید؛ از پوسترهای تعاملی و الگوهای Geometric Patterns تا ویژوال‌های صوتی و اسکچ‌های سه بعدی. در پایان، یک صفحه‌ی Showcase دارید که می‌توانید در Behance یا GitHub Pages منتشر کنید و در مصاحبه یا گالری به نمایش بگذارید

اگر می‌خواهی با کد «خلق» کنی، همین حالا ثبت نام کن.

اولین پوستر تعاملی را با چند خط کد ساختم. دیدن نتیجه روی وب‌سایت واقعاً انگیزه‌بخش بود.

هر زبان برنامه‌نویسی یه دنیای جدید رو پیش روی من باز می‌کنه. با یادگیری زبان‌های مختلف، خلاقیتم چند برابر شدهبا p5.js به پروژه‌های HTML-CSS خودم حرکت و تعامل اضافه کردم. همکاری با تیم فرانت خیلی روان‌تر شد.

برنامه‌نویسی خلاق، تلفیق زیبایی از هنر و تکنولوژی است. من با استفاده از سورس کدها و زبان‌های برنامه‌نویسی مختلف، آثار هنری تعاملی خلق می‌کنم.بخش Generative Art عالی بود. از Noise و Fractal برای ساخت پترن‌های منحصر به فرد استفاده کردم و در Behance منتشرشان کردم.

بخش p5.sound دقیقاً همان چیزی بود که نیاز داشتم. موزیک‌ویدئویی ساختم که ویژوال‌ها به ضرب موسیقی واکنش نشان می‌دادند.

از الگوهای Generative برای فرم‌یابی استفاده کردم. Noise و وکتورها به طراحی ماکت‌های پارامتریک کمک کرد

به کمک این دوره توانستم پروتوتایپ‌های تعاملی بسازم و در مصاحبه کاری، مهارت جاوااسکریپتم را با نمونه‌های واقعی نشان بدهم

برای کلاس هنر دیجیتال از تمرین‌ها استفاده کردم. دانش‌آموزها با تغییر چند خط کد، انیمیشن‌های شخصی خودشان را ساختند و انگیزه‌شان چند برابر شد.

سوالات متداول

 بله. دوره از مبانی شروع می‌شود و به‌صورت پروژه محور پیش می‌رود. در «اینورس اسکول آنلاین» می‌توانید با سرعت خودتان یاد بگیرید.

 یک کامپیوتر و مرورگر کافی است. از p5.js Web Editor استفاده می‌کنیم. گزینه Processing هم برای کار آفلاین معرفی می‌شود.

خیر. مفاهیمی مثل زاویه، وکتور و Noise را با مثال‌های بصری یاد می‌گیری. هر جا لازم باشد، راهنمای ساده ارائه شده است.

مجموعه‌ای از دموهای وب شامل الگوهای هندسی، انیمیشن تعاملی، ویژوال‌های صوتی و یک پروژه نهایی که آماده نمایش در پورتفولیو است.

 بله. مفاهیم هنر مولد قابل انتقال هستند و مسیرهایی مثل Generative Art با Python یا مصورسازی داده پیشنهاد می‌شود.

بله. پس از اتمام موفق، گواهی پایان دوره اینورس صادر می‌شود و می‌توانید به پروفایل LinkedIn اضافه کنید.

پاسخ سوال خود را نگرفته‌اید؟

با پشتیبانی تیم اینورس در ارتباط باشید تا همکاران ما در سریعترین زمان، پاسخ شما را بدهند