What happens if the mouse cursor is the protagonist of a game? (Inspired by Alan Becker's "Animation vs Animator" series, as well as Cursorblade)
Hover over the game rectangle to start; avoid getting hit; fight off the amassing mob by hovering over them. Likely unplayable on mobile; may contain flashing pictures.
An investigation of puzzle shapes for "Jigsaw puzzle maths".
Click on the puzzle to regenerate the shape; click near the edges to toggle edge pieces; click on the statistics to toggle percentage mode.
Unsure why this one came out so gray. It's so grayscale that I'm reminded of my phone's "bedtime" mode! 😂
The basic animation here is that of 3 squares taking turns to advance by one step. However, when you repeat the animation with ever smaller squares meshing in and out of each other, it becomes quite confusing.
This was made for a programming exercise in which I presented a simplified version of the code and asked students to adapt it to recreate the exact effect: including the order of sliding and the fact that circles don't blink in and out of existence.
(Result of the exercise: it's easy to see the effects you need to replicate, but hard to figure out the tricks used 😅)
A recursive version of the Pythagorean gasket shown by DaniLaura on Mastodon.
Click to regenerate (might be a bit laggy).
An animation born out of the discussion with a student on why we draw grids with rectangles and not with lines.
...clearly, it's so that I can't suggest we animate the lines independently.
Click to start the animation.
This particle system is made of particles that switch between 4 states: growing, shrinking, turning-left, and turning-right. New particles preferentially spawn at the position of current particles.
Click to make a burst of new particles.
Move the mouse to have particles swarms around it. Hold down mouse button to hold the particles in place.
An attempt to replicate the liveliness of "Musical critter" with a oldschool vector spaceship.
Use arrow keys to move around. No mobile support.
An unfinished experiment in interactive map generation. Each hexagon color affects the likelihood of nearby hexagons being same/different -- similar to there being a deck of cards contributed by the surroundings. The idea was that you could focus on exploring the areas you like, thus developing them further than the areas you dislike.
Legend:
Ideally, would introduce longer-ranged card contributions—e.g. an "outpost" card which contributes 1 "monster den" card to all hexagons exactly 3 tiles away. Also, conditional contributions, such as a road tile which contributes "8" roads to nearby explorations if it's adjacent to less than 2 roads. And finally, sub-tiles/cards, such as a "sheep" card which can randomly appear on top of grass tiles or a "townfolk" card which appears randomly in towns.
Combining all three would be a way to make questlines: e.g. the "terrorized townfolk" sub-card of "city" tiles contributes 1 "goblin king" sub-card to all "mountain" tiles, as long as there hasn't been a "goblin king" already drawn on the map. Then, the "goblin king" card contributes 1 "heroic adventurer" sub-sub-card to any "tavern" sub-cards of "road" tiles, and so on.
Click to create lines. The canvas below tries to draw a fractal formed by shooting rays and keeping track of the side they exit from.
... it is not a very good fractal, however, so this gets the WIP tag for now 😅
Here's a curious fact: the following code draws an ellipse:
Explaining why this is exactly an ellipse is not intuitive, but with the help of people over at MathOverflow, it can be shown that it fits nicely into the general equation of an ellipse.
(Or, you could also use eigenvectors and eigenvalues to prove quasiperiodicity, but why complicate the math? 😂)
Exploration of creating a lively, animated character with sound! (Including breathing noises; hopefully those aren't too disconcerting.)
Use the arrow keys to move around. No mobile support.
Splitting rectangles according to the copper ratio (c = 4 + 1/c), inspired by @DaniLaura@mathstodon.xyz.
Click to re-render.
A game where you have to navigate an obstacle course using separate X-axis and Y-axis motion devices connected by a wire. An experiment in organizing things with classes, as I ponder how to best explain those to students.
Move with the arrow keys. On mobile, press the side of the screen you want to move in.
Press the left mouse button (or space) to move forward. Move the mouse turn the camera.
Try to reach the green-colored exit. The green line points the right direction.
An exploration of De Rahm curves. Plenty of sliders to play around with!
Credits:
Drag shapes to place them on the grid. Complete lines to score points. Use points to progress through a series of ever-more-expensive inversions of the grid, called "flips".
Can you reach a total score of more than 50 points?
This might be my most-polished p5.js game. It's also some of the worst code I've ever written, to the point that I've used it as an exercise in navigating unreadable code. The worst part of it is the code responsible for the adaptable layout; it's scattered in multiple places and stubbornly refuses to use an explict representation of rectangles.
I could rewrite it with better classes/modules/datatypes... but where's the fun in that? 😂
Game made during a code-together discussion with students, using the prompt "Heavy" from Inktober 2025, day 9.
Draw two shapes, then guess which one is heavier (that is, has a larger area). Get more point for guessing between shapes that are very close in area.
This (somewhat heavy) sketch was made for Mathober 2025, day 1: "Link".
My first real use of Verlet Integration!
Move your mouse to interact with (and maybe break) the chain.
Made for a TilingTuesday post on Mastodon.
Click somewhere on the page to start the music.
Effects experiment. How dramatic can you make clicking on the canvas?
Inspired a game I saw once, which in turn is inspired by the board game SET!.
Match sets of three cards, where each set has either all cards or no cards matching in every single attribute: color, shape, or number.
Press H to highlight possible matches. Drag to make a match out of adjacent or diagonally-adjacent tiles.
There is no scoring system yet.
Started off by simulating a rope, ended up attaching a "stone" to it to make a classical sling.
Stay still and click somewhere in the left end to pick up a stone, then spin to throw it at the target.
Click (do not drag) to draw a random curve between the last point and the new point.
Some quotes from people I've showed this to:
WHAT? Friend #1
This is weird. Bizarro. What's the point of it?
Friend #2Acquaintance #1
(Note: the random generator used in this sketch is not cryptographically secure. Please do not use this for generating signatures.)
A classic. Try to remember a color, then pick the right color when presented with multiple options.
The technique of randomizing colors in a grid as to confuse the person playing took a lot of trial and error. But, from watching others play the game, it seems to have worked!
Can you reach over 25?
An experiment in self-avoiding walks. Also, having fun with JavaScript's splat operator.
As the quip goes: when I wrote this code, only I and God knew what how it works. Now only God knows.
Looking at it today, it seems like like the code takes the list of points forming a Koch Snowflake, and passes them through a series of transformation matrices to get a new list of points. Can one do that? Who knows! Does it work? Apparently! Why do the points themselves have 6 coordinates? Maybe they are triangles! Ask them yourself! hmph
...At least the deep dark blue is nice 😁
Made for #TilingTuesday on Mastodon
An experiment in making rules for interactions between colored particles, and seeing the kinds of systems that evolve from that.
Couldn't figure a way to fit momentum preservation in without having all particles collapse into one rapidly-interacting particle complex, so, currently every interaction gains kinetic energy but we add a bit of friction so it doesn't explode.
Rules pictured here:
(The Green + Blue + Blue -> 2 Yellow chain (and v.v.) is necessary to maintain an on-going reaction; otherwise, the blue particles are quickly absorbed by groups of green/yellow to form non-reactive red/purple)
I'm somehow fond of this particular two-dimensional manner of drawing planets.
(The bowling ball holes are only subconsciously inspired by XKCD What If #46.)
Experimenting with raytracing in p5.strands. Also seen in Chasing Shiny Things.
Move your mouse along the screen to spin the truchet tiles.
Double click to change the shape of the tiles.
An exploration of animating Abelian sandpiles. Turned more fun by adding "negative sandpiles" and ensuring the total sum on-screen is always 0.
Click to drop a square grain of sand. Right click to drop a circle grain of sand. Enjoy the chain reactions.
This animation was inspired by a time-travel story by a friend.
...Any accuracy to the story is to be presumed coincidential. I haven't re-read it yet! (But it's an amazing book, and you need to read it!)
Made for a TilingTuesday post on Mastodon.
(Known bug: cubes around the corners might be blinking in and out of existence at certain screen sizes)
A simple checkerboard animation.
A much more complicated checkerboard animation. Made right after checkerboard animation 1 for a TilingTuesday post on Mastodon.
It's apparently possible to draw a Lissajous curve row by row!
An odd face with interlocking spinny eyes.
As mentioned on Mastodon, "Impromptu-coding late at night... might not have beens the best idea, on second thought."
Click to change colors.
A silly experiment based around generating random rhythms.
This sketch was my contribution to a Mastodon discussion on the many different ways creative tools understand scroll wheels, along with Scroll-to-rotate, 3D.
Scroll to find the hidden message. (Does not work on mobile.)
This sketch was my contribution to a Mastodon discussion on the many different ways creative tools understand scroll wheels, along with Scroll-to-rotate, 2D.
Scroll to find the hidden message. (Does not work on mobile.)
A O(n²) simulation of repulsive forces. Click to add new points.
Click to teleport.
In 2025, I was intrigued by the polygons formed out of chess knight moves on an integer grid. I produced a whole series of "knight tilings".
This sketch is a self-assembling crystal of the three smallest knight polygons.
Click to regenerate.
Click to make a splat.
Made as a quick showcase of what p5.js 2.0's new splineVertex function can do.
Try to get all the squares aligned on the line. Move the mouse to lock them into place.
Made as an example of p5.js's screenToWorld function.
Inspired by S.G. Tatham's article on the XOR operation.
Move the mouse to trace curved lines.
Click the shivering application icon to start the animation.
Made for Genuary 2025, January 27, prompt: Make something with no randomness or trigonometry.
Made for Genuary 2025, January 22, prompt: Gradient.
Run, square, run!
Caution: eyes blinking may startle some.
Move your mouse over the grid.
Can you clean up the resulting mess?
Double-click to restart.
An infinite descent game.
Can you get past the second win screen? Or get a win without taking damage (and thus without the "But at what cost?" message)?
A bit of lore: Initially, I thought of the circle as somehow transcending beyond the mortal plane by collecting coins. Now this doesn't make any sense: transcendence does not come from riches, and depending on who you ask, it even comes from a lack of riches! Plus, the only "transcendence" achieved is moving faster, while being just as vulnerable to the "mortal" world—not very transcedent at all.
Yet, two things have remained of that initial ideation: the name, COTR, as a portmanteau of "coin" and "transcend", and the circle glowing brighter as more "coins", for the lack of better word, are collected.
The map generation algorithm was inspired by the BBC Article on Entombed's maze generation.
An experiment of forming something similar to Electric trees using a 1-dimensional cellular automata.
An experiment in audio-visual effects. This experiment requires Web MIDI.
(Note that the code only check for connected MIDI devices when it's started; refresh the page if you can't see your device.)
Click to get a new set of colors.
This particle system is made of particles that meaner between going left and right based on a sine function.
Press and hold to queue a burst of new particles.
Could you make money selling that? Friend I showed this to
Yeah, but I like open-source / open art. Maybe I can sell the service of making custom lock screens or such instead? 🤔 My reply
I was experimenting with the technique of rendering fading trails to an off-screen canvas... before realizing I've made a car. Good excuse to try to make a reasonable mobile control scheme—left third of the screen maps to the left arrow, and likewise for the other three edge.
Drfiting car? More like a car in snow!
Scroll and drag to zoom/pan. (No mobile support.)
This was inspired by the JS13K 2018 submission "Exo" by Jack Oatley and Anton K. I wanted to make a strategy game focused around building structures in orbits of limited space that can also be taken up by moons / planets.
This particular sketch was an experiment in making a simple logical structure which assigns whole numbers to planet masses and orbit "sizes", but at the same time disallows overlapping orbits.
I ended up with a system structured around the fibonacci numbers: a size-n planet has mass equal to F_n, the n-th fibonacci number, takes up F_{n+1} spaces on an orbit, and has n/2-2 orbits with available space ranging from F_{n/2+1} to F_{n-1}.
The big numbers displayed are "gravity potentials", to be used for computing the energy needed to travel from surface/orbit to surface/orbit.
An experiment in using chunks to render an infinite plane of differently-sized rectangles.
Click to move around.
Every frame, a random point is selected. If it's covered by a bubble, that bubble is popped. Then, a bubble with radius equal to 60% of the maximum non-overlapping circle is added at that point1.
The largest bubble is highlighted.
Hold mouse down to make a new bubble.
If the descripion alone makes you think of a mathematical task in stochastic geometry such as "What percentage of the plane is covered by bubbles" or "What is the probability that there exists a bubble of radius larger than R", consider yourself nerdsniped 😇↩︎
An experiment in drawing gradients with shapes.
Made during a live session with students. Wanted to demonstrate rectangle-circle intersactions, ended up creating art instead.
An experimental game where time flows in rhythmic bursts. Click to shoot the purple circles; don't shoot the red health pickups.
Can you get past wave 40 60?
An icecream cone made as part of a programming lesson (BG). Click to regenerate the colors.
An experiment in recursion and faking depth through color and position. Click to regenerate.
A cube drawn in orthographic projection using p5.js's 2D functions. Used as an example of why switching to full-blown 3D is much easier.
Move you mouse over the brick wall to paint it yellow.
