This is an experiment I started working on many months ago, but didn’t actually finish until recently. It was based on some doodles I used to make, where I would draw a bunch of lines, continuing each until it intersected with others. It creates a bunch of lines randomly, and then extends them until they intersect, coloring the regions between the lines.
I'm really happy with how this experiment turned out. It's a clock that spells out the time with squares, and then shifts those squares into their new positions whenever the time changes. It draws the time text into a hidden tiny
canvas element at each minute, then uses
getImageData to extract the individual pixels. Any pixel that has been drawn with an alpha > 0.5 is set as a destination for the next squares animation. The animations themselves are performed using d3.js.
This experiment was one of my first experiments with WebGL. The story behind this one starts with a camping trip I took with some friends. We didn’t camp in the wilderness because of logistical issues, so we ended up camping close to a beach. On the beach, people started to build sand sculptures, so I began working on a Sierpinski-esque triangle design, but with recursion in the inner triangle as well. Ultimately, a few other people ended up working on the increasingly intricate design. After the camping trip ended, the triangular fractals (affectionately called “tringles” by my friend Sarah) became a sort of running joke and obsession, and we ended up doodling them all over the place. Eventually I decided to make a version with code that would be infinite.
A ridiculously useless but rather cool looking clock. Every second, it creates a QR code that encodes the time and date, and then animates each pixel of the QR code to its new state. It attempts to move the dark pixels between locations, sliding from one location to another, but if a given pixel cannot be animated using motion, it simply fades away. You’ll need a QR reader to actually use this.
This is a program I wrote to explore the connection between the patterns in poetry and speeches and the patterns in music. Unfortunately, I cannot upload it here (the WebMIDI API integration does not seem to work anymore and also it was built with a very specific soundfont so viewing it elsewhere would not be equivalent), so instead of the actual program you can watch a video of it.
In this video, the program is playing its rendition of “The Raven” by Edgar Allan Poe.
This is one of my favorite experiments. I had the original idea during a vacation to Hawaii. Basically, I wanted to make a clock where the hands were connected end-to-tip instead of all being connected to the center of the clock, making a sort of time arm (second hand starting where minute hand ended, etc). I made a version of that using Rainmeter on my desktop for a while.
This is an experiment I made a long time ago, inspired by a flocking cellular automaton I saw on Rectangle World. In this experiment, the canvas is divided into a bunch of cells, each of which maintain a vector. Every frame, each cell attempts to make its vector closer to the vectors of its neighbors, and the vectors are “normalized” so that the average length is 1 (some are longer, some are shorter). On top of this, I built 19 different variations, each of which displays the results in a different way.
My first few variations display the actual vectors, either just as lines or by mapping direction to hue and length to brightness. In most of the other variations, the code places particles “on top” of the cells, and they move in the direction that the vectors point. In a few of the variations, I connect the particles to each other and draw lines between them, making a sort of web effect. This was one of the first experiments I made with the HTML5 Canvas, and I like how it looks.