Daniel Johnson's personal fragment of the web

Posts tagged "text"

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 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.


© . All rights reserved. | Top