Creative Coding With Javascript: From Basics To Masterpieces

Learn how to use JavaScript to create stunning generative art, interactive visuals, and animations.

What you'll learn

JavaScript for Creative Projects – No boring theory! Learn by coding engaging visuals

Canvas API – Master the tools that power digital art and interactive graphics.

Generative Art Techniques – Use algorithms to create unique, evolving artworks.

Interactive Animations – Make visuals that respond to user input, sound, and motion.

Physics-Based Effects – Simulate natural movements like particles

Data Visualization & Procedural Design – Transform data into artistic visual representations.

Creative Web Experiences – Design projects that blend art, technology, and user interaction

discover how to work with text in your compositions.

export your animation as a video file that you can share online.

create a gui to control your sketches more easier

Discover how to draw basic shapes entirely in code, add color,

Produce an audio visualization by playing sound files

Create curves for different iterations, from design elements to graphs,

Experiment with particles and learn to dictate how they behave

Requirements

Basic math skills are recommended.

Previous knowledge of coding

Description

Turn Code into Art! Learn to Create Generative Art, Animations, and Interactive Visuals with JavaScriptDo you want to unlock your creativity through code? Ever wondered how digital artists, designers, and developers create beautiful visuals, mesmerizing animations, and interactive experiences using JavaScript?Welcome to Creative Coding with JavaScript, a hands-on course where you’ll explore the artistic side of programming and learn to build stunning generative art, interactive animations, and visual effects from scratch.create engaging visuals with code. Explore the fundamentals of programming and learn how to draw with creative coding in JavaScriptproduce animations, prints, interactive pieces, and more which have seen my collaborate with brands.Unlock Limitless Creativity – Experiment with color theory, patterns, randomness, and algorithmic design.Experiment with color theory, patterns, randomness, and algorithmic design.Develop visuals that respond to user input, motion, and real-time interactions.Whether you’re an artist, designer, web developer, or coding enthusiast, this course will empower you to turn ideas into visually dynamic experiences using JavaScript.By the end of this course, you’ll be able to build generative art, interactive experiences, and dynamic animations using JavaScript. Whether you're creating web-based art, game assets, data-driven visuals, or simply coding for fun, this course will unleash your inner creative coder.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Who Influnces Me

Section 2: Basic Creative Coding

Lecture 3 Configuration

Lecture 4 Introduction To Java

Lecture 5 Variables And Functions

Lecture 6 Arrays And Loops

Lecture 7 Environnement Sketching

Section 3: Designing Arcs

Lecture 8 Learn About Transform

Lecture 9 Create Angles

Lecture 10 Learn About Utility Functions

Lecture 11 Creating Arcs

Section 4: Visual Animations

Lecture 12 Objects And Classes

Lecture 13 Learn About Animation

Lecture 14 Create Lines

Lecture 15 Video Output

Section 5: Slides and Gui Creation

Lecture 16 Creating A Grid

Lecture 17 Manipulate Shapes With Noise

Lecture 18 Creating Slides And Gui

Section 6: Text Design

Lecture 19 How To Create Text

Lecture 20 Learn About Async

Lecture 21 Learn About Bitmap

Lecture 22 Learn About Glyfs

Section 7: Manipulate Shapes Colors And Patterns

Lecture 23 Drawing A Rectangle

Lecture 24 Drawing A Skewed Rectangle

Lecture 25 Distribution

Lecture 26 Adding Colors

Lecture 27 Clipping Mask

Lecture 28 Creating A Random Seed

Section 8: Curves And Cursor Interaction

Lecture 29 Drawing a Quadratic Curve

Lecture 30 Cursor Interaction

Lecture 31 Creating Multiple Points

Lecture 32 Creating Grid

Lecture 33 Learn About Segments

Lecture 34 Creating Animation

Section 9: Audio Visualization

Lecture 35 Pressing Play

Lecture 36 Creating Analyser

Lecture 37 Learn About Frequencies

Lecture 38 Creating Arcs

Lecture 39 Creating Poster

Section 10: Creating Particles

Lecture 40 Drawing Single Particle

Lecture 41 Applying Forces

Lecture 42 Distributing the Particles

Lecture 43 Modifying Scale and Colors

Lecture 44 Image Data

Section 11: Wrap up

Lecture 45 Final Tips

Lecture 46 Class Project

This course is for anyone with an interest in programming and learning to create visuals through code.