screensave.js

I am gradually going through my pile of old programming projects and I figure some of them are worth publishing on my blog. One of them I worked on a few years ago, for my harvey.dog site, involved playing with the JavaScript canvas.

I used a very simple random-sampling strategy where smaller and smaller fuzzy dots are painted, layered on top of each other. Each dot is the color of a single pixel selected at random from anywhere in the photo, and the dot, no matter how large, is centered on that same spot in the photo. After a few tens of thousands of dots the image sort of resembles a painting.

It turned out that the process of slowly building up the image is more fun to look at than the final product, so I slowed it down so it could be seen in action. The painting process has a kind of "raindrops on the window" or "picture coming into focus" effect. I added a transition between photos, and it looped through photos endlessly like a screensaver would.

While the harvey.dog site is non-interactive, I made some modifications to allow the page to work with any image file. All the user has to do is drag one or more images onto the page and it'll go through and paint each image. Because the entire process is handled by the browser running on device, the page doesn't send the photos anywhere.

I don't know if it's interesting to anyone else, or has any potential use, but in case it does it can be played with here.