Daniel Johnson's personal fragment of the web

Artistic Experiments


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.


Shift Clock

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.

The picture above is of the black-on-white version. There is also a grey-on-black version, if you prefer that color scheme.



This is an experiment I made recently. It displays the path that light would take when it refracts through variously-shaped objects, color-coded based on the initial angle of emission. In order to do this, it casts a series of rays and uses Snell's law to determine how they refract off of objects. It then iteratively casts more rays between rays that get too far apart or act differently (if one ray hits something and the other hits something else, for instance) to get higher accuracy. The raycasting is performed with JavaScript, and then the light intensity is interpolated between rays in WebGL.


Infinite Triangles

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.


QR Clock

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.


Speech -> Music

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.

The program, written in Javascript and utilizingthe WebMIDI API, first runs through the poem and extracts phonemes using the excellent Carnegie Mellon Pronouncing Dictionary. It then links together words that share phonemes, assigning each pair a strength depending on the number of matched phonemes (plus a bonus if the words are identical). Finally, it begins to play the poem syllable-by-syllable, assigning each word a note based on its first letter. When the playhead reaches a word that has links to other words, it creates a secondary playhead that plays the matched word simultaneously, producing temporary chords and repetition that die off over time.

In this video, the program is playing its rendition of “The Raven” by Edgar Allan Poe.



This is a pretty dumb experiment, really. I got the idea one day when I was absentmindedly typing into a blank page. I noticed that if I pressed and held multiple keys, it would repeatedly type all of them. I did this for some time, and discovered that by inserting text at the start of a document when the document consists of lots of repeated sequences, the sequences seem to dance and jitter due to the irregularities in letter width. So, of course, I wrote up a quick script in Javascript to simulate this, and then made it colorful. Don’t expect anything profound. It’s literally just text moving across the screen.


Stacked Clock

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.


Motion Cells

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.


© . All rights reserved. | Top