Code Art: Learn Creative Coding To Generate Visuals With Js

Learn the fundamentals of generative art and discover how to develop, draw, and animate visuals with HTML and Javascript

What you'll learn
Code Art
Creative Coding
Generative Art
Creating Visuals with Coding
Code Animations
Javascript Animations
Html5 Canvas
Html5 CTX
Canvas-sketch library
ThreeJS
Making Audio Visualizers
Particle Effect
Requirements
Basic Math Skills
Code Editor
Browser
Programming experience is an advantage
Description
Why code art?Because once you learn creating art with coding, there is actually no limit. You don’t have the boundaries of visual effect programs!Creative algorithms are data driven can work real time and interactive.It’s combination of technical side and design.There are many languages and ways of creative coding.We’ll use html and javascript in this course, because nowadays javascript is everywhere.You’ll have a chance to make your project interactive with other technologies with JS.We’ll create particles that will listen the music and behave differently.After learning this technique you can use audio input in any effect you want!You’ll be shocked when you see how easy it is to make these animations.If you already know a programming language that’s a big advantage.Where can I use these visuals?It’s up to you! You can create your own NFT collection. Upload effects to your website, put them in your portfolio, or just to make them for fun!Why this course?We as Yeti team, are working to create professional online education lectures. We are trying to keep it as simple as possible. You'll find the best practices for creative coding.This course is created with both Windows and Mac users, meaning you can get full benefit whether you are a windows or mac user.All students have access to the Q&A forums where our Instructors, Teaching Assistants and Community are ready to help answer your questions and cheer on your success.Who this course is for:Programmers - DevelopersDesignersFreelancersAnimatorsGraphic DesignersWho feels comfortable with another programming language and want to learn creative codingEveryone interested in animations, visuals, algorithms, and art

Overview

Section 1: Javascript Particles

Lecture 1 Before Start

Lecture 2 Getting Started

Lecture 3 Event Listeners in JS

Lecture 4 Draw an Arc (Circle)

Lecture 5 Generate Atoms

Lecture 6 Destroy and Blur

Lecture 7 Create a Nice Sky-Stars Effect

Lecture 8 Custom Movements of Particles (Parabolic)

Section 2: Pixel Effect for Images

Lecture 9 What is Pixel Rain Effect?

Lecture 10 Setting Up the Project

Lecture 11 Get Image Data in JS

Lecture 12 Create Particle Class

Lecture 13 Mapping from 2 Dimension to 1 Dimension

Lecture 14 Apply the Mapping Formula

Lecture 15 Draw Function

Lecture 16 Complete the Effect

Lecture 17 Add RGB Colors

Section 3: Canvas-sketch library

Lecture 18 Node and NPM

Lecture 19 Install canvas-sketch

Lecture 20 What is canvas-sketch?

Lecture 21 Practice Rectangles

Lecture 22 Canvas Translate

Lecture 23 Canvas Rotate

Lecture 24 Save and Restore

Lecture 25 Randomness

Lecture 26 Bounce Animation

Lecture 27 Circle Class

Lecture 28 Generate Circles

Lecture 29 Animate Circles

Lecture 30 Bounce Circles

Lecture 31 Euclidean Distance

Lecture 32 Draw Lines

Lecture 33 Get the Distance Between Two Dots

Lecture 34 Responsive Line Width

Section 4: How to make an Audio Visualizer?

Lecture 35 Introduction

Lecture 36 Set up For the Audio Visualizer

Lecture 37 HTML Template

Lecture 38 Complete HTML

Lecture 39 microphone.js

Lecture 40 Get Microphone Data

Lecture 41 Ball Class

Lecture 42 Generate Balls

Lecture 43 Falling Balls

Lecture 44 Jumping Balls

Lecture 45 Audio Input

Section 5: Circular Audio Visualizer

Lecture 46 Getting Started

Lecture 47 Setup

Lecture 48 Create Figures

Lecture 49 Circular Movement

Lecture 50 Change Size with Microphone Input

Lecture 51 Play Music

Lecture 52 Teleport

Section 6: Introduction to three.js

Lecture 53 What is three.js?

Lecture 54 Use Cases of three.js

Lecture 55 Install three.js

Lecture 56 Open the Project

Lecture 57 Import three.js

Lecture 58 Creating the Scene and Camera

Lecture 59 Create the Renderer

Lecture 60 Create a Cube

Lecture 61 Render the Scene

Lecture 62 Animate the Cube

Section 7: 3D Space Effect

Lecture 63 Introduction

Lecture 64 Setup

Lecture 65 Init( ) Function

Lecture 66 Create the Stars

Lecture 67 Use Geometry and Material

Lecture 68 Animate Function

Lecture 69 Finish the Project

Lecture 70 Some three.js Examples

This course is for both developers and designers who want to draw with code.