Headshot of Rupert

Rupert McKay

Side projects

Boids #

An implementation of an artificial life program, first developed in the 1980s. In brief, just three simple rules lead to intelligent flocking behaviour. Implemented all my own tooling from the groundup, including vector algebra and dynamic frame loop adjustments.

Learn Braille #

A simple flashcard app for learning Braille. Uses the Leitner method of spaced repetition to gradually build up your confidence.

Learn Morse #

A simple flashcard app for learning Morse Code. Uses a custom spaced repetition method.

Flags #

A minimal interactive demonstration of semaphore flags.

Random Grid #

Using only 2 by 1 tiles, randomly tiles a grid.

Train Ride #

A tribute to the vaporwave aesthetic. Take a sunset trip through the infinite metropolis. Rendered with three.js

Rust Render #

A Julia Set renderer whose initial offset value rotates through the complex plane. Primarily written in Rust compiled to WASM, and called from JavaScript.

Lindenmayer #

A Lindenmayer fractal generator. Creates a random branch structure and recursively reapplies it to itself. Written solely in Vanilla JS and HTML5 Canvas.

Beads #

A little Connect4 implementation. Can you beat the AI? Uses minimax over a limited depth, falling back to a heuristic value heatmap when that depth is exceeded.

Langton's Ant #

A simple visualizer for Langton's Ant, a cellular automaton first described by Christopher Gale Langton in 1986.

Fireworks #

A simple firework simulation. Click or tap the screen to create an explosion. An explosion of bright particles and trailing embers will shoot out in 3D, as if you are watching a real explosion from a safe distance.

Cities #

A simple population center simulation. Cities emerge over time, and connect to one another. As they form more connections, they can grow in size. But if they are not connected to a smaller city, they collapse and decay.

Noisy #

Perlin noise in 2D starts by generating a grid of random unit vectors. But what if the unit vectors were smoothly rotating over time? In this project a create a smoothly animated Perlin noise field.

DVD Bounce #

The famous bouncing DVD logo animation.

Time After Time #

A clock represents the passage of time by the movement of three arms rotating in front of a circular face. But what if we broke those rules? 'Time After Time' is an experiment in visualizing time in different ways.

Cross View #

A cube is spinning in space, with six orbiting lights. The scene is rendered twice, once for each eye. If you cross your eyes to each fix on a different half of the screen, your perception will be tricked into perceiving depth.

Voronoi #

A little experiment with voronoi cells. A cloud of points travel randomly across the world space, while every frame the space is divided by Voronoi cells. The heavy lifting is done by d3-delaunay

Anima Tile #

Animates a rotating tiling system. I got the idea for this while looking at a brick wall and observing that the conventional brick laying pattern is great at preventing slipping vertically but not horizontally. So I started wondering about tiling patterns which don't allow slippage in any direction, and I made this to help me visualize it.

Gravatar Lookup #

A minimal interface for performing Gravatar lookups. If a matching Gravatar is not found, an Identicon is displayed instead.

Shiny Measure #

A simple weight tracker. Data is only stored in localstorage, unique to your device and browser. No networking, no tracking, not a single API call after the page load.

Convection #

A one-day hack to build a physics simulation, which aims to demonstrate that temperature mixing is an emergent property of thermal expansion. Got the idea for this while watching a pot of water boil.

Phong #

Hand made raytracer using only Typescript. A fun experiment in the mathematics of perspective geometry. Performance is very much bottlenecked by the browser. But becomes fully memoized after 100 frames.