Color sorting (RGB) with 3-D Hilbert curve

[camillemilou]

I am an architect interested in colors (in the "real world" for my job and because I paint). Inspired by Johannes Itten's book (1961) "the Art of colors", I went through the "fundamental questions" regarding colors, primary / secondary colors, additive / substractive etc... to figure out what they are and how they work. In the "not so real world" of computers and screens, colors are reduced to the "RGB cube", the additive system.

Navigating the color cube is a pleasant visual and intellectual experience, intertwined with simple geometry and a little bit of math. It may be a start to make an math animation video : (Wildly stimulating colors + satisfying geometry) x simple math...

The angle I propose is :

1. To wonder how to properly sort colors
2. To show 3D-Hilbert curve is a way to do it, and then get the corresponding gradient.
3. To wonder if we can find a Hilbert-like curve going from Black to White
4. To try a 3x3x3 curve and then get the corresponding gradient.
5. To count the different possible 3x3x3 curves, and and then get their corresponding gradients.
6. Same with a 5x5x5 curve and so on.
7. To wonder if we can smoothly transition from one to another of these different possible pathways.
8. To illustrate an animation of these transitions.

A simple visual and geometric exploration.

Showing off this wonderful excel sheet of my attempt to manually do this with 729 = 9³ colors...

Contact : I suggest this thread is a good space to keep things collaborative

Context : https://corte.si/posts/code/hilbert/portrait/

CC-BY.)

[alverndbl]

To be honest this was the first time I heard about the Hilbert Curve (HC), so I might not get it, but I think your excel is wrong. I can't see how the Hilbert curve would work in a 3x3x3. I tried to model it in a 3d software and this is the shape it has resulted:

It does not look like an iteration of a 3d H.C. https://www.wolframcloud.com/objects/demonstrations/HilbertAndMoore3DFractalCurves-source.nb

The way I would approach this is by considering the "RGB cube" the space to be filled and then create the HC curves in that space, using the coordinates of the vertices as the colors. If we do that for the first order HC we have:

[camillemilou]

Hello,

Thank you for your message. Yes indeed, what you suggest is the most straightforward approach. If you use a (2x2x2) cube and use the (HC)... that would work and be very interesting. You would end up with the gradient that you have. You are basically covering the (2) first steps I was talking about in my original message : **1. To wonder how to properly sort colors

2. To show 3D-Hilbert curve is a way to do it, and then get the corresponding gradient.** Only thing left to do is to iterate the (HC) and get the resulting continuous gradient to see what it looks like... I have not found it anywhere, and I would be curious to see the result.

Having said that, I was curious to develop a way to do essentially the same thing (sorting colors), but from BLACK to WHITE... so the difficulty is now to start with the (0,0,0) corner and end with the (1,1,1) corner.

I have tried to figure this out and I think (I may be wrong) it is possible to use a "space filling curve" - different from the (HC). If you start with a (3x3x3) cube as your building block {instead of a (2x2x2)cube} you can then iterate the process and expand to a (9x9x9) cube... and so on. Step 1 : (3x3x3) cube = 27 colors Step 2 : (9x9x9) cube = 729 colors Step 3 : (27x27x27) cube = 19683 colors and so on... it grows quite fast.

Just to give a little bit of context here, the reason I want to go from Black to White is because it is way more logically intuitive (in order to sort colors in the real worldfor example). Although the (HC) would work, it is too "mathematical" in my opinion and doesn't "feel" satisfactory. Note that with the 3x3x3 cube you also end up with the Grey color right in the middle of your gradient which I think is pretty cool too... Another reason to develop this idea (I may be way over my head here) is that if you extend this method to n-dimensions, it is still more logically intuitive to list data from the (0,0,0,0,...) corner to the (1,1,1,1,...) corner. In my opinion these two extremes should be as far as possible in your list and your mid-point (1/2,1/2,1/2,...) should also be in the middle of your list.

On my excel sheet I built the 3x3x3 base-cube with the 27 primary colors, which I gave the followinf code-name (from white to black): W = white C = Cyan Y = Yellow M = Magenta r = Red g = Green b = Blue Cw = Cyan + White Yw = Yellow + White Mw = Magenta + White rw = Red + White gw = Green + White bw = Blue + White Ck = Cyan + Black Yk = Yellow + Black Mk = Magenta + Black rk = Red + Black gk = Green + Black bk = Blue + Black Sg = Spring green Ch = Chartreuse Az = Azur Or = Orange Vi = Violet Ro = Rose K = Black X = grey

Then I was in the process of trying to complete step (2 which is actually wrong because I didn't rotate the second sub-part...) but I did a 3D model of the 729 color curve and it seems to be working. So in theroy it seems to me like this is feasible... I have no idea how to program this though.

[MartinoRinaldi]

I'm not sure if this is exactly what you wanted to achive but it's only a small test I've done with Matlab. I've used a curve of second order with 64 differet colours ( each channel has 4 different levels). The first three row are the single RGB value for each point, the fourth row is the resulting colours.

[camillemilou]

Hello Martino, Thanks yes that's about it (regarding step 1 and 2)! Are you able to generate more iterations and get closer to a continuous gradient? Are you able to remove the first 3 rows and stretch the last one? (so we can see the gradient better) Thanks !