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 jаvascript
What you'll learn
Code Art
Creative Coding
Generative Art
Creating Visuals with Coding
Code Animations
jаvascript 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 jаvascript in this course, because nowadays jаvascript 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: jаvascript 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.
Homepage

https://www.udemy.com/course/code-art/