Drawing a Million Dots
tl;dr : Live demo, code on github, a million dots (maybe)
Edit 2021-10-07 : I’ve tweaked the code to allow upload of arbitrary images and be able to change the parameters
Big numbers feature a lot on the news. But how does one visualize millions, billions, trillions..?
There are a bunch of things I want to write in Javascript in the near future, but I’m very rusty and there are ‘newer’ features that I’ve never used (notably Promises). I don’t usually bother with coding exercises, motivation issues – if I’m coding I want it directly towards some concrete project.
But this morning, I’ve no idea what prompted this, I woke wondering how you’d go about drawing a million dots. I’ve barely looked at HTML Canvas in the past (did spend a good while with SVG, back in the day), so I couldn’t resist having a go, you know, just an hour or so while I wake up…
I wanted it so it could be checked, so aimed for a block of 10×10 dots, then a 10×10 block of those blocks, once more and that should be a million…
Starting with a .png image :
I put that on an initial canvas.
It sounds an obvious use of recursion, and that’s the direction I initially went in. But I got hopelessly confused with the scaling – adding borders to the blocks complicated things (I shaded the borders while trying to figure it out).
Yeah, it got messy. So I unwrapped it.
I went through a spell using two canvases defined in the HTML, bouncing/multiplying the dots from one to the other. But it was still a bit confusing, especially since the first dot is a special case. It became a lot clearer using 3 canvases in the HTML, each filled pretty much procedurally. When I went for 2×2 the scaling/borders started clicking into place and I went back to bouncing between two canvases. But visibility is lacking in the later iterations, so I ended up dynamically adding canvases so all are displayed in turn.
I believe this is 10,000 sheep:
In the demo I’ve got each canvas size = 800. I think I got canvas size up to 10000×10000 before Chrome started balking, that’s how I got this image.
PS. It also turned out to be a really good coding exercise adding the facility to upload arbitrary images and be able to change the parameters. I reckon one systematic mistake I made was not to start by thinking in terms of modules/objects, scope of variables got quite confusing. I put in a function.function() call as a quick and dirty hack, but refactoring the whole into something more modular would be neater. Anyway, bar any simple/obvious changes I’m calling that done.
