I’ve been fooling with a favorite-color app as an Identity-tech testbed, and I wanted to reward people just a little for making the effort to pick and save and maybe share their own faves. I’d seen some of the flashy stuff that the cool kids are doing with HTML5 and even though I’m really a server-side guy it looked like fun, so I poked around.
What I discovered is that the HTML5 Canvas is easy to learn and easy to program, so I’m going to show you a little hack I did, not because there’s anything particularly wonderful about it, but just to try help convince anyone who hasn’t dived in that maybe they should.
Color basics · I’m sure most of you know this stuff, but bear with me for one paragraph for the sake of the rest. On computers colors are made up of three numbers, giving red, green, and blue values typically in a range from 0-255. So (0, 0, 0) is black, (255, 255, 255) is white, (255, 0, 0) is a harsh unforgiving red, and so on. [Actually they’re given as four values with the other one being the transparency, but let’s ignore that for now.]
The field just below is an instance of the nice JSColor chooser; so click on the “EEEEEE” and choose away.
The three squares over on the right represent Red, Blue, and Green, top to botton, and when you picked a color, they painted in its pure R, G, and B components. Which is sort of boring for most colors.
Click and we’ll repaint the RGB squares with pretty color maps. The top one shows all the colors that can be made with your color’s Red value, the second all the colors with its Blue value, and the last all the colors with its Green value.
But wait, didn’t you choose a color? Go ahead, give it a try.
There are only a handful of APIs that you need for this sort of
There’s an interesting technical point: I had three canvases to render and
I wanted to do it in parallel so I checked out Web Workers which have a nice
API but you can’t touch the DOM which makes them much less interesting. But in
one of the rare pleasant surprises in my decades of computer
programming, I noticed that firing off three different
setInterval calls, one for each Canvas, pretty well achieves the
same effect. Because callbacks.
Also, as a dynamic-typing guy, I was pleased when I refactored everything from a hash indexed by “R”, “G”, and “B” to an array indexed by 0, 1, and 2... and most of the code didn’t have to change, because in dynamically-typed languages it’s obvious what you mean. As a side effect, it got faster.
Gripes · Mind you, not everything’s perfect: The state of searchable online documentation is execrable. Many searches lead to W3Schools or HTMLCanvasTutorials or whatever. Eventually I discovered that while Mark Pilgrim has retired from the Net, someone has unretired his Dive Into HTML5, and it’s really quite good.
Who knows, maybe you’ll like coding in it. And even if you don’t, maybe you should try it anyhow.