Code Art- Learn Creative Coding to Generate Visuals with JS

Code Art: Learn Creative Coding to Generate Visuals with JS, available at $69.99, has an average rating of 4.5, with 78 lectures, based on 213 reviews, and has 3112 subscribers.

You will learn about Code Art, Creative Coding, Generative Art Creating Visuals with Coding Learn to draw with code Javascript Animations Html5 Canvas and CTX Particle Effect with Vanilla JS Canvas-sketch library ThreeJS Making Audio Visualizers This course is ideal for individuals who are This course is for both developers and designers who want to draw with code. It is particularly useful for This course is for both developers and designers who want to draw with code.

Enroll now: Code Art: Learn Creative Coding to Generate Visuals with JS

Summary

Title: Code Art: Learn Creative Coding to Generate Visuals with JS

Price: $69.99

Average Rating: 4.5

Number of Lectures: 78

Number of Published Lectures: 78

Number of Curriculum Items: 78

Number of Published Curriculum Objects: 78

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Code Art, Creative Coding, Generative Art

Creating Visuals with Coding

Learn to draw with code

Javascript Animations

Html5 Canvas and CTX

Particle Effect with Vanilla JS

Canvas-sketch library

ThreeJS

Making Audio Visualizers

Who Should Attend

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

Target Audiences

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

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 – Developers

Designers

Freelancers

Animators

Graphic Designers

Who feels comfortable with another programming language and want to learn creative coding

Everyone interested in animations, visuals, algorithms, and art

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

Instructors

Yeti Learn
Best Seller Instructors

Rating Distribution

1 stars: 3 votes

2 stars: 4 votes

3 stars: 29 votes

4 stars: 52 votes

5 stars: 125 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!