(See also part one, simple color relationships w/d3.)
Picking up where we left off, in the middle of Josef Albers' Interaction of Color (Yale Press's iPad edition), his study of the "middle mixture" affords a chance to bring in D3.js support for animations and transitions.
In this study, Albers chooses a trio of colors where the middle is a mixture in the middle of the other two. He recommends sliding the lowest part up slowly, so we can observe how the increased ratio of the darker color draws out how that darker color contributes to the mix, and then as you slide it back away again, you can see the top (lighter) color come through in the middle mixture. Concentrate on the middle block as the lower one moves up and down, and you can also see an illusory gradient effect near the top and bottom.
This study demonstrates how varying the quantity of each color present affects the relationships between colors and the overall feeling of a design even when the structure isn't altered in any other way. All of these use the same four colors and the same overall shape.
Each has its own distinct feel, right? Taken together they seem to dance chaotically, and it's not particularly pleasant, but its goal is instructive, of course, not aesthetic. Albers suggests using sheets of paper or your hands to block out smaller sets to look at in turn: a row, a column, etc., and considering which combinations are your favorite and why.
In writing this one up I waffled between writing a routine to generate the color permutations and laying them out explicitly like the example in the book, and I ended up matching the book explicitly. The rest of these exercises have tried to match the book closely, so it seemed okay to just iterate over an array of arrays that had been lined up by hand. I also did a lot of pixel-nudging to get the boxes to line up just so (hence punting on fixing the extra white space at the bottom).
This next study is a similar look at color mixture. The individual lines can be laid out with scaling easily enough with D3, but to make them look uneven/wobbly is a bit of a challenge.
This mostly recreates the effect of the study in the book but is
unsatisfying on a few counts. The "wobble" of the individual patches
is decent, but they should scale and skew a little more. The ordering
of the stacking throws off the effect, and the y-skew is a little
too great. Perhaps the biggest issue is the use of translate()
to locate each strip in its place sets the top-left (x,y) to too
fixed of a point; it needs to vary more. There is a lot going on
in the SVG transform
attributes
that I don't fully understand, largely around the shift in coordinate
systems, and that's holding me back from developing the right
approach to skewing and placing each strip correctly. I'll have to
revisit this to wrap my head around it more fully.
This is definitely the most disappointing recreation of studies from the book I've done so far.
The Weber-Fechner Law
Wikipedia points out discrepancies in the term "Weber-Fechner law" but as that's how Albers referred to the difference between the quantitative and perceptual effect of layering color: linear additions seem to lead to logarithmic effects, and exponential additions seem to lead to linear effects. In the book this study uses translucence, so I'll stick with SVG's opacity support to recreate it.
Arithmetic increases in application of color here, by way of stacking, lead to only slight shifts in the perceived color.
Ah, this recreates the effect of the study in the book much more
effectively than the previous one (a relief). With 75% fill-opacity
we can trace the distinct shades of color as 2, 3, and 4 patches
are overlaid in different spots. The difference from one to two is
much greater than the difference from three to four.
This next study repeats a similar process, showing off the difference between linear and exponential layer addition. At left, each succeding strip from top to bottom has one additional layer beyond the one above it; at right, the difference is a power of two. So at left, it is {1, 2, 3, 4, 5} layers, and at right, {1, 2, 4, 8, 16}.
I misread this one, getting it completely wrong at first. The ground
is a red, and the added layers are blacks, using SVG fill-opacity.
I had thought at first that the layers were all red, but the part
at right never converged to black until I re-read that they are
indeed black layers added on top, on both sides.
I haven't been able to recreate the subtlety of the shift to barely imperceptable on the left, but this is fairly close.
This final study is a look at near-equality of light intensity, the difficulty of choosing examples for which Albers warns us carefully. If chosen correctly, when the two saw-tooths come together, two colors with similar light intensity should start to blend into each other, even though they are dissimilar otherwise.
This works nicely - for that brief instant when the two sides touch it seems like the sawtooth pattern at their mutual boundary disappears and the colors start to merge.
This has been a great exercise, both in learning about color relativity and digging deeper into the basics of D3. Just makes me want to do more. There a lot of code in the studies I replicated here and in part one that could be much clearner, but I gave up on writing clean code in service of getting it done and keeping things simple. In future posts I'll be working with real datasets more often than not, and cleaner code will always help there. I aimed for staying true to the exact studies in the book, too, to have a target to aim towards, rather than taking the opportunity to do the exercises for myself, finding colors that would be a good match, because I wanted to learn about D3 at the same time, and reproduction is easier than original work. The app version of the book allows for creating your own studies, and I've played around with that some, so I don't feel like I'm missing out too much.
I hope you'll stay tuned, it feels like it's just getting started.