• Post category:StudyBullet-7
  • Reading time:5 mins read


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

What you will 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

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?


Get Instant Notification of New Courses on our Telegram channel.


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
English
language

Content

Javascript Particles

Before Start
Getting Started
Event Listeners in JS
Draw an Arc (Circle)
Generate Atoms
Destroy and Blur
Create a Nice Sky-Stars Effect
Custom Movements of Particles (Parabolic)

Pixel Effect for Images

What is Pixel Rain Effect?
Setting Up the Project
Get Image Data in JS
Create Particle Class
Mapping from 2 Dimension to 1 Dimension
Apply the Mapping Formula
Draw Function
Complete the Effect
Add RGB Colors