Random Pixels

The end result

This took me far too long, but in my defence it was a long day of regression testing at work: a node.js endpoint which generates a random pixelated image.

The code is reasonably simple: generate a backing 2d array of random values where the probability of there being a pixel is reduced each row. So P(pixel|row(0))=1.0, P(pixel|row(n))=0.0 where n is the number of rows and P(pixel|row(x))=x/n where x is any row between 0 and n.

The image is then generated, with the usual process of putting 2d coordinates in a single dimension array, with the added fun that each pixel has to take up 4 items in the array (rgba). Thus for any point (x, y) the starting index is (x + y * width) * 4.

I still have to improve the drop shadow code as it's hacky and buggy, my original thought was to check the alpha of the neighbouring pixels, but I did this in a dumb way and it needs a complete rewrite. Especially the wrapping code.

All in all it was a fun little piece of computer vision programming which takes my website rewrite beyond the default bootstrap theme (oh yeah, I rewrote my main website and used Let's Encrypt everywhere).


Generation of the drop shadow is now there. It uses the backing array rather than the image data, as well as generating offsets and summing then with the current location.