SketchBook

21 small browser sketches: classic games, simulations, fractals and canvas effects.

About the project

Small projects I wrote in 2021 while learning JavaScript, mostly by following tutorials. Later I fixed their bugs, gave them one shared design that works on phones, and added nine new ones.

What you can try

Games: Snake, Pong against the computer or a friend, Tic Tac Toe with an unbeatable bot, Minesweeper, 2048
Simulations and algorithms: Game of Life, flocking boids, a genetic algorithm, a quadtree, maze generation and solving, sorting, Langton's Ant, reaction-diffusion
Math: a Mandelbrot explorer with zoom, Fourier series, the chaos game, the Barnsley fern, fractal trees and a double pendulum
Effects that react to the pointer or touch, two of them built from your own uploaded image
Every project has a short explanation of how it works
A landing page with category filters and a preview of every project

Under the hood

Plain HTML, CSS and JavaScript without a build step, hosted on GitHub Pages
Maze solvers and sorting algorithms are written as generators that pause after every step, so the animation can show them one step at a time
Pixel-heavy effects write straight into image buffers, and the Mandelbrot set renders a few rows per frame to keep the page responsive
The double pendulum is integrated with RK4, and several copies start 0.001° apart to show how quickly they drift apart
Reaction-diffusion follows the Gray-Scott model

Changelog

p5.js 1.3 to 1.11
One shared dark design
Canvases that fit any screen and work with touch
About a dozen bug fixes
Nine new projects

When: 2021 – 2026
Type: Personal
Versions: p5.js 1.11
Stack: JavaScript
p5.js
Canvas
HTML
CSS
GitHub Pages

Gallery

Blue spirals at the edge of the Mandelbrot set — Mandelbrot explorer: click, drag and scroll to zoom into the fractal.

A generated maze with the explored cells colored and the shortest path drawn in green — Maze: generated step by step, then solved by breadth-first search, depth-first search or A*.

Colorful flowing lines drawn by particles following Perlin noise — Flow Field: thousands of particles following Perlin noise, stirred by the pointer.

Glowing green rings and cells grown by a reaction-diffusion simulation — Reaction-Diffusion: patterns grown by the Gray-Scott model; draw to add chemical.

Many colored double pendulums with tangled trails — Double Pendulum: copies that start 0.001° apart end up in completely different places.

Bars being sorted by quicksort, with comparison and write counters — Sorting: six algorithms animated step by step, with comparisons and writes counted.