This morning I whipped up my first (tiny) hand-coded HTML5 app, using the canvas tag for 2D drawing. The first unit of my CS0 course is about binary representations of data, including numbers, text, and graphics. The graphics are of course the most fun — see also hex nostalgia.
There’s no shortage of color-choosing widgets on the web, but I wanted one that would clearly illustrate the additive color model used by computer video displays and projectors. Most of the students are not media arts majors, and so they’re still attached to the subtractive primary colors they learned in elementary school. Despite their familiarity with displays that rely on it, “red + green = yellow” is not natural to them.
With the HTML5 canvas, additive color is a simple matter of:
context.globalCompositeOperation = 'lighter';
Once I got it working with the three 8-bit RGB sliders, I decided to have some fun with 4-bit color — call it CGA nostalgia. I recall my early days with PC BASIC (did color on TI and Apple work this way too?) when I first understood the pattern to the mapping of colors to the numbers 0–15.
Intarweb, je vous présente: 4-bit color, 24-bit color. Feel free to view source.