Visualising complex functions

Remco Bloemen

2014-08-30, last updated 2014-09-01

The CIE HCL colorspace is a fascinating humane-centric way of calculating with colors. This became clear to me when I saw the “less-angry rainbow”, and here I have applied it to domain coloring in an interactive demo.

Demo

Canvas not supported

← Click here!

Why?

When I saw by Mike Bostock’s “http://bl.ocks.org/mbostock/310c99e53880faec2434[A Less-Angry Rainbow]” I was inspired and thought about applying it to https://en.wikipedia.org/wiki/Domain_coloring[Domain coloring] .

Then today I saw https://imgur.com/eIk5kM9[some] https://imgur.com/a/LVAfw[beautiful complex plots] on http://www.reddit.com/r/mathpics[/r/mathpics] and just had to build this. I took all of the examples from the plots on the various pages I just linked.

Perceptual uniform color maps

The basis of most domain colored graphs is the HSLHSL or HSVHSV color map:

Canvas not supported

This doesn’t look smooth to me. I can see bright yellow, cyan and purple hills in the center.

The https://en.wikipedia.org/wiki/International_Commission_on_Illumination[CIE] has been researching human color perception since 1913. Decades of precise measurements on human subjects have resulted in very accurate models of how colors are perceived. If we use their landmark model L*a*b*L^*a^*b^* model from 1971 and plot the perceived ‘luminance’ of the above graph, we get this:

Canvas not supported

This confirms exactly what I thought I saw.

We don’t want colors that are smooth for computers, we want colors that are smooth for humans. This has also been studied by the CIE and the solution is the https://en.wikipedia.org/wiki/CIELUV#Cylindrical_representation[LChuvLCh_{uv}] colorspace:

Canvas not supported

Much smoother! But, try moving your head up and down and looking at this graph from steep above or steep below.

Exactly.

You probably see some sinoidal curved lines. These are not part of the color space, but are caused by limitations of your monitor. You can try adjusting your monitors brightness, contrast, and gamma. Properly calibrated monitors should present a smooth image.

I have already tuned the saturation down by two-thirds to make the colors easier for monitors. If I where to saturate the colors more, a lot of them will be outside of what monitors are capable off.

Technical difficulties aside, its luminance is what we expect:

Canvas not supported

And this produced nice plots like:

image::example.jpg[width=“50%”,title=“Human-centric domain coloring.”,alt=“Domain coloring plot of the function ƒ(z)=((z21)(z2i)2)/(z2+2+2i){ƒ(z) =((z^2-1)(z-2-i)^2)/(z^2+2+2i)}. It is the same example as on the Wikipedia page, but rendered in the human oriented HCL colorspace.”]