Code Art: Learn Creative Coding to Generate Visuals with JS

Course Curriculum

Chapter 1: Javascript Particles

Lecture 1: Before Start

Lecture 2: Create Project Files

Lecture 3: HTML5 Canvas

Lecture 4: Create Canvas and CTX

Lecture 5: Draw a Rectangle

Lecture 6: What is Live Server?

Lecture 7: Event Listener in JS

Lecture 8: Event Listeners Practice

Lecture 9: Arc

Lecture 10: Reminder (Video Speed)

Lecture 11: Generate Atoms

Lecture 12: Destroy and Blur

Lecture 13: Create a Nice Sky-Stars Effect

Lecture 14: Custom Movements of Particles (Parabolic)

Lecture 15: Sierpiński Triangle Challenge

Chapter 2: Pixel Effect for Images

Lecture 1: What is Pixel Rain Effect?

Lecture 2: Setting Up the Project

Lecture 3: Get Image Data in JS

Lecture 4: Create Particle Class

Lecture 5: Mapping from 2 Dimension to 1 Dimension

Lecture 6: Apply the Mapping Formula

Lecture 7: Draw Function

Lecture 8: Complete the Effect

Lecture 9: Add RGB Colors

Chapter 3: Canvas-sketch library

Lecture 1: Introduction

Lecture 2: Node and NPM

Lecture 3: Install canvas-sketch

Lecture 4: What is canvas-sketch?

Lecture 5: Practice Rectangles

Lecture 6: Canvas Translate

Lecture 7: Canvas Rotate

Lecture 8: Save and Restore

Lecture 9: Randomness

Lecture 10: Bounce Animation

Lecture 11: Circle Class

Lecture 12: Generate Circles

Lecture 13: Animate Circles

Lecture 14: Bounce Circles

Lecture 15: Euclidean Distance

Lecture 16: Draw Lines

Lecture 17: Get the Distance Between Two Dots

Lecture 18: Responsive Line Width

Chapter 4: How to make an Audio Visualizer?

Lecture 1: Introduction

Lecture 2: Set up For the Audio Visualizer

Lecture 3: HTML Template

Lecture 4: Complete HTML

Lecture 5: microphone.js

Lecture 6: Get Microphone Data

Lecture 7: Ball Class

Lecture 8: Generate Balls

Lecture 9: Falling Balls

Lecture 10: Jumping Balls

Lecture 11: Audio Input

Chapter 5: Circular Audio Visualizer

Lecture 1: Getting Started

Lecture 2: Setup

Lecture 3: Create Figures

Lecture 4: Circular Movement

Lecture 5: Change Size with Microphone Input

Lecture 6: Play Music

Lecture 7: Teleport

Chapter 6: Introduction to three.js

Lecture 1: What is three.js?

Lecture 2: Use Cases of three.js

Lecture 3: Install three.js

Lecture 4: Open the Project

Lecture 5: Import three.js

Lecture 6: Creating the Scene and Camera

Lecture 7: Create the Renderer

Lecture 8: Create a Cube

Lecture 9: Render the Scene

Lecture 10: Animate the Cube

Chapter 7: 3D Space Effect

Lecture 1: Introduction

Lecture 2: Setup

Lecture 3: Init( ) Function

Lecture 4: Create the Stars

Lecture 5: Use Geometry and Material

Lecture 6: Animate Function

Lecture 7: Finish the Project

Lecture 8: Some three.js Examples