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

درس ها Lessons

• ورودی صدا Audio Input

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

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

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

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

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

• سقوط توپ Falling Balls

• راه اندازی برای Audio Visualizer 2 Setup for Audio Visualizer 2

• تابع Init Init function

• راه اندازی برای افکت فضایی سه بعدی Setup for 3d Space Effect

• microphone.js microphone.js

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

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

• تابع رسم Draw Function

• راه اندازی برای Audio Visualizer 1 Setup for Audio Visualizer 1

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

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

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

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

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

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

• پخش موزیک Play Music

• معرفی Introduction

• پرش توپ Jumping Balls

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

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

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

• شروع به کار (پیکسل افکت) Getting Started (Pixel Effect)

• مقدمه ( Audio Visualizer 2) Introduction ( Audio Visualizer 2)

• کتابخانه طرح بوم Canvas Sketch Library

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

• تولید اتم Generate Atoms

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

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

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

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

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

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

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

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

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

• رسم کمان (دایره) Draw an Arc (Cirlce)

• گره و NPM Node and NPM

• قالب HTML HTML Template

• تولید توپ Generate Balls

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

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

• شروع به کار (ذرات) Getting Started (Particles)

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

• ایجاد رندر Creating Renderer

• مقدمه ای بر افکت فضایی سه بعدی Introduction to 3D Space Effect

• تله پورت Teleport

• چرخش بوم Canvas Rotate

• شنوندگان رویداد Event Listeners

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

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

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

• شروع به کار (Audio Visualizer 1) Getting Started (Audio Visualizer 1)

• موارد استفاده three.js three.js Use Cases

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

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

• ترجمه بوم Canvas Translate

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

• کلاس توپ Ball Class

• رسم خطوط Draw Lines

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

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

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

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

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

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