When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Development
SkillShare logo

Code Art: Learn Creative Coding to Generate Visuals with JavaScript

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free
Code Art: Learn Creative Coding to Generate Visuals with JavaScript

Related Courses

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon5 hours 5 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Code Art: Learn Creative Coding to Generate Visuals with JavaScript

Introduction

Before Start

Getting Started (Particles)

Event Listeners

Draw an Arc (Cirlce)

Generate Atoms

Destroy and Blur

Generate a Nice Sky-Stars Effect

Custom Movements of Particles (Parabolic)

Getting Started (Pixel Effect)

Setting Up the Project

Get Image Data in JS

Create Particle Class

Mapping from 2d to 1d

Apply the Mapping Formula

Draw Function

Complete the Effect

Add RGB Colors

Node and NPM

Install canvas-sketch

Canvas Sketch Library

Practice Rectangles

Canvas Translate

Canvas Rotate

Save and Restore

Randomness

Bounce Animation

Circle Class

Generate Circles

Animate Circles

Bounce Circles

Euclidean Distance

Draw Lines

Get the Distance Between 2 Dots

Responsive Line Width

Getting Started (Audio Visualizer 1)

Setup for Audio Visualizer 1

HTML Template

Complete HTML

microphone.js

Get Microphone Data

Ball Class

Generate Balls

Falling Balls

Jumping Balls

Audio Input

Introduction ( Audio Visualizer 2)

Setup for Audio Visualizer 2

Create Figures

Circular Movement

Change Size with Microphone Input

Play Music

Teleport

What is three.js?

three.js Use Cases

Install three.js

Open the project

Import three.js

Creating Scene and Camera

Creating Renderer

Create a Cube

Render the Scene

Animate the Cube

Introduction to 3D Space Effect

Setup for 3d Space Effect

Init function

Create Stars

Use Geometry and Material

Animate Function

Finish the Projet

Some three.js Examples

What You Will Learn?

  • 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..
  • 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.