Learn Creative Coding with Vanilla JavaScript

Explore generative art as a human machine collaboration, using HTML, CSS, and vanilla JavaScript to create autonomous artwork, while you write everything from scratch, line by line, no frameworks.

Set up a basic web page with a canvas and linked html, css, and javascript. Center the canvas, apply a global reset, and use the 2d context to draw.

Explore how fractals form through JavaScript classes and canvas rendering, using a fractal class, particle class, and rain class to create a smooth 60 frames per second animation.

Explore object oriented programming by encapsulating data in classes, using constructors with the new keyword, and drawing a fractal on the canvas with a draw method and context.

Explore how to modify shapes on canvas by adjusting line width, line cap, color, and coordinates, and by controlling the line length with a class property and relative sizing.

Explore transforming shapes in vanilla JavaScript canvas by mastering translate, rotate, and scale to control the origin and rotation center, with practical demos of rectangles and lines.

Explore save and restore to manage canvas state, apply translate, rotate, and scale, and draw fractal lines with private methods and a public draw method.

Learn to draw fractals with vanilla JavaScript by building a tree-like fractal through recursion, canvas transforms, and depth control with a max level for radial symmetry.

Learn to create a snowflake fractal by drawing a main branch with two symmetric branches, using recursion, scaling, and angle control to form intricate fractal shapes.

Explore generating a wide range of random fractal shapes on canvas using a hue-saturation-lightness color model, random color and angle, and a particle system that renders at 60 fps.

Create a custom particle system with a particle class and a rain class that updates and draws 20 particles across the canvas, using an animation loop and requestAnimationFrame.

Learn to render a large fractal on one canvas while distributing particles across a second full-window canvas, convert shapes into black squares, and animate with a clear–update–redraw loop.

Convert complex fractal canvas drawings into images using data URLs, then replace 20 black rectangles with fractal images and animate randomized sizes and speeds across the canvas.

Experiment with particle rotation and fractal canvas transforms by adjusting angle, translate, and save/restore; render offscreen fractals as textures and vary shapes like circles and rectangles for diverse visuals.

Explore using curved lines with bezierCurveTo and quadraticCurveTo, replace lineTo and moveTo, and swap lines for images to create a wide variety of shapes on the HTML canvas.