Subtractive Color Mixing

I had this snippet of code illustrating subtractive color mixing sitting around for quite a while. I made it to experiment with additive color mixtures on screen and to think about what to do with it. It is just a doodle, but pretty, and a good way to show children how colors mix. I was about to write about this month when it occurred to me: what could be better than undulating Halloween blobs of color? So here I present to you the boiling blobs of Halloween.

Because the blobs are the pure subtractive primaries and the overlaps are exact channel-by-channel multiplication, each color in the tank can be predicted, a good way to understand of how pigments combine.

Blob Studio

Click "Add Blob" to start

Tip: Cyan, magenta, and yellow are the subtractive primaries. Watch the overlaps: cyan and magenta make blue, and all three make black.

Like most tools on my site, this one is based on math. We start by adding blob shapes, and the math comes from where they overlap on the screen. Display-wise, the shapes are just a mechanism for the colors to work on, and a fun display. The math is where two colored shapes overlap in multiply blend mode when the browser takes the color behind and the color in front, writes each as three numbers between 0 and 1 for red, green, and blue, and multiplies them channel by channel in a blend function: that product is the overlap color. Cyan is (0, 1, 1), meaning no red, full green, full blue. Magenta is (1, 0, 1). Multiply them and you get (0, 0, 1), pure blue. Cyan times yellow (1, 1, 0) gives green, magenta times yellow gives red, and all three stacked multiply down to (0, 0, 0), black. So the three subtractive primaries generate the three additive primaries as their pairwise overlaps, and they bottom out at black when all three are present. The primaries of pigment, multiplied, produce the primaries of light, and then black.

Directions

Click Add Blob to drop a cyan, magenta, or yellow blob to the tank.
Click the Add Huge Blob button to insert a even bigger blob.
The blobs drift across the screen on their own; watch where two of them cross and the colors change.
Click a blob to pop it.
Clear Tank to start over.