آموزش کدنویسی خلاق: تصاویر و لوگوهای ذرات

درس ها Lessons

• کلاس های جاوا اسکریپت و سیستم های ذرات JavaScript classes and particle systems

• چگونه هر چیزی را در یک شبکه سازماندهی کنیم How to organise anything into a grid

• پاکسازی کد Code cleanup

• انیمیشن روی دکمه کلیک کنید Animation on button click

• راه اندازی پروژه 2 Project 2 setup

• رسم اجسام ذره ای Drawing particle objects

• بهینه سازی عملکرد Performance optimizations

• انتقال ذرات متحرک Animated particle transitions

• تعاملات موش و فیزیک ذرات Mouse interactions and particle physics

• حرکت سلول ها به اطراف Moving the cells around

• چگونه تصاویر را روی بوم وسط قرار دهیم How to center images on canvas

• تبدیل تصاویر به کد Converting images to code

• نحوه ترسیم، برش و برش تصاویر با کد How to draw, crop & slice images with code

• ایجاد انتقال متحرک منحصر به فرد Creating unique animated transitions

• استخراج مختصات و رنگ ها از داده های پیکسل Extracting coordinates and colors from pixel data

• اثر چاپ ذرات Particle print effect

• اثر جمع آوری ذرات Particle assemble effect

• فرمول فیزیک حرکت (اصطکاک و کاهش) Motion physics formula (friction & easing)

• نحوه پیدا کردن فاصله بین 2 نقطه How to find the distance between 2 points

• تعامل ماوس Mouse interactivity

• تبدیل تصاویر به سیستم ذرات Turning images into particle systems

• ذرات تصادفی چندگانه Multiple randomized particles

• نحوه استفاده از بوم How to use canvas

• تجزیه و تحلیل پیکسل با getImageData Pixel analysis with getImageData

• نحوه متحرک سازی تصاویر با کد How to animate images with code

• روش drawImage drawImage method

• حرکت ذرات Particle motion

• گرفتن جهت از نقطه A به نقطه B Getting direction from point A to point B

• پروژه 1: جلوه های Slice & Dice بر روی تصاویر Project 1: Slice & Dice Effects on Images

• کلاس افکت Effect class

• پروژه 2: تصاویر ذرات Project 2: Particle Images

• رسم مستطیل Drawing rectangles

• آزمایش های کدگذاری خلاقانه Creative coding experiments

• کشیدن تصاویر Drawing images

• راه اندازی HTML، CSS و جاوا اسکریپت HTML, CSS & JavaScript setup