آموزش Code Art: کدنویسی خلاقانه را برای تولید تصاویر با JS بیاموزید

سرفصل ها و درس ها

ذرات جاوا اسکریپت Javascript Particles

• قبل از شروع Before Start

• ایجاد فایل های پروژه Create Project Files

• بوم HTML5 HTML5 Canvas

• Canvas و CTX ایجاد کنید Create Canvas and CTX

• یک مستطیل رسم کنید Draw a Rectangle

• Live Server چیست؟ What is Live Server?

• شنونده رویداد در JS Event Listener in JS

• شنوندگان رویداد تمرین می کنند Event Listeners Practice

• قوس Arc

• یادآوری (سرعت ویدیو) Reminder (Video Speed)

• تولید اتم Generate Atoms

• نابود کردن و تار کردن Destroy and Blur

• یک افکت زیبای آسمان-ستارز ایجاد کنید Create a Nice Sky-Stars Effect

• حرکات سفارشی ذرات (پارابولیک) Custom Movements of Particles (Parabolic)

• چالش مثلث Sierpiński Sierpiński Triangle Challenge

جلوه پیکسل برای تصاویر Pixel Effect for Images

• اثر باران پیکسل چیست؟ What is Pixel Rain Effect?

• راه اندازی پروژه Setting Up the Project

• دریافت داده های تصویری در JS Get Image Data in JS

• ایجاد کلاس ذرات Create Particle Class

• نقشه برداری از 2 بعدی به 1 بعدی Mapping from 2 Dimension to 1 Dimension

• فرمول نقشه برداری را اعمال کنید Apply the Mapping Formula

• تابع رسم Draw Function

• افکت را کامل کنید Complete the Effect

• اضافه کردن رنگ های RGB Add RGB Colors

کتابخانه بوم طرح Canvas-sketch library

• معرفی Introduction

• گره و NPM Node and NPM

• Canvas-sketch را نصب کنید Install canvas-sketch

• بوم-اسکیس چیست؟ What is canvas-sketch?

• مستطیل ها را تمرین کنید Practice Rectangles

• ترجمه بوم Canvas Translate

• چرخش بوم Canvas Rotate

• ذخیره و بازیابی Save and Restore

• تصادفی بودن Randomness

• انیمیشن پرش Bounce Animation

• کلاس دایره Circle Class

• ایجاد حلقه ها Generate Circles

• دایره ها را متحرک کنید Animate Circles

• حلقه های پرش Bounce Circles

• فاصله اقلیدسی Euclidean Distance

• رسم خطوط Draw Lines

• فاصله بین دو نقطه را بدست آورید Get the Distance Between Two Dots

• عرض خط پاسخگو Responsive Line Width

چگونه یک Audio Visualizer بسازیم؟ How to make an Audio Visualizer?

• معرفی Introduction

• برای Audio Visualizer تنظیم کنید Set up For the Audio Visualizer

• قالب HTML HTML Template

• HTML را کامل کنید Complete HTML

• microphone.js microphone.js

• دریافت اطلاعات میکروفون Get Microphone Data

• کلاس توپ Ball Class

• تولید توپ Generate Balls

• سقوط توپ Falling Balls

• پرش توپ Jumping Balls

• ورودی صدا Audio Input

ویژوالایزر صوتی دایره ای Circular Audio Visualizer

• شروع شدن Getting Started

• برپایی Setup

• ایجاد ارقام Create Figures

• حرکت دایره ای Circular Movement

• تغییر اندازه با ورودی میکروفون Change Size with Microphone Input

• پخش موزیک Play Music

• تله پورت Teleport

مقدمه ای بر three.js Introduction to three.js

• Three.js چیست؟ What is three.js?

• استفاده از Cases of three.js Use Cases of three.js

• Three.js را نصب کنید Install three.js

• پروژه را باز کنید Open the Project

• وارد کردن three.js Import three.js

• ایجاد صحنه و دوربین Creating the Scene and Camera

• Renderer را ایجاد کنید Create the Renderer

• یک مکعب ایجاد کنید Create a Cube

• صحنه را رندر کنید Render the Scene

• مکعب را متحرک کنید Animate the Cube

افکت فضایی سه بعدی 3D Space Effect

• معرفی Introduction

• برپایی Setup

• تابع Init( ). Init( ) Function

• ستاره ها را ایجاد کنید Create the Stars

• از هندسه و متریال استفاده کنید Use Geometry and Material

• عملکرد متحرک Animate Function

• پروژه را تمام کنید Finish the Project

• چند نمونه three.js Some three.js Examples