Skip to content
Ákos Kappel
Language: en
Theme
Light
Dark

SketchBook

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

SketchBook landing page with the title drawn by particles and project previews

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 five new ones.

What you can try

  • Games: Snake, Pong against the computer or a friend, Tic Tac Toe with an unbeatable bot, Minesweeper
  • Simulations and algorithms: Game of Life, flocking boids, a genetic algorithm, a quadtree, maze generation and solving, sorting
  • Math: a Mandelbrot explorer with zoom, Fourier series, the chaos game, the Barnsley fern and fractal trees
  • 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

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

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
  • Five new projects
When
2021 – 2026
Type
Personal
Versions
  • p5.js 1.11
Stack
  • JavaScript
  • p5.js
  • Canvas
  • HTML
  • CSS
  • GitHub Pages
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.

1 of 3

Blue spirals at the edge of the Mandelbrot set

Mandelbrot explorer: click, drag and scroll to zoom into the fractal.