Mainly Tech projects on Python and Electronic Design Automation.

Wednesday, November 21, 2012

RGB spectrum. 3D to 2D with smooth transition?

I was messing about with HTML red, green, blue triplets of 0..255 values each that are used for specifying HTML colours (with a u as I am English). I decided that I wanted to be able to take a spread of rgb values and arrange them in a spectrum.

Easily said, but hard to do. I went down a blind alley of converting to Hue, Saturation, Luminance; but could do nothing with that. I decided to ignore our eyes different sensitivities and any difference in 'purity' of pure red/green/blue from monitors and decided to try and work out mathematically how to create such a spectra.

The values for the three colours are independently variable over their ranges and so I got to thinking of the available colours as a colour cube. Think of a a 3D graph with three perpendicular axes red, green and blue. You can do the physics trick of taking your hand; stick the thumb straight up, the finger directly below the thumb straight out in front and the second finger below the thumb at right angles to them both pointing towards your body. There you have it! three perpendicular axes for red, green and blue, with the origin being towards your palm.  

The available colours fill the cube of integers (0, 0, 0) up to (255, 255, 255). I want to create a linear 'spectrum'.

If you consider the three points R, G, B, = (255, 0, 0), (0, 255, 0), (0, 0, 255) respectively,  they are the points of maximum r,g,b intensity, unsullied by other colours. If you cut the cube to expose the plane linking those three points then I would ideally like a spectra that  traversed R->G->B (->R); but what about the off-plane colour triplets?

If given a list of colour triplets to sort into a spectrum I decided to 
  1. Find out which of the three cardinal points/primary colours R, G, or B each triplet was closest-to.
  2. Sort all the triplets on their closeness to a primary.
  3. Extract three lists of the triplets for each primary colour in such a way that they would be sorted with the primaries near the centre of their list; and those with more of the next primary to the 'right' and to the previous primary to the 'left'.
    For example the Red list would have reddy-greens to the right and reddy-blues to the left; the green list would have greeny-reds to the left and greeny-blues to the right; similarly the blue list would have bluey-greens to the left and bluey-reds to the right.   
  4. Join the three lists in the R, G,B order - assuming that B wraps-round to R to form the spectrum.

The Code


 1 
 2 '''
 3 Generate rgb colours in order
 4 '''
 5 
 6 from pprint import pprint as pp
 7 from collections import namedtuple
 8 from itertools import product, groupby
 9 
10 
11 Rgb = namedtuple('Rgb', 'r g b')
12 # red, green, blue, dark, light. 'cardinal' points
13 RGBDL = ( Rgb(255, 0, 0), Rgb(0, 255, 0), Rgb(0, 0, 255), Rgb(0, 0, 0), Rgb(255, 255, 255) )
14 RGB   = ( Rgb(255, 0, 0), Rgb(0, 255, 0), Rgb(0, 0, 255) )
15 
16 def dist(p, q):
17     'dist squared between two points'
18     return sum((pp - qq)**2 for pp,qq in zip(p,q))
19 
20 def cmp(x,y):
21     return 1 if x>y else (0 if x==y else -1)
22 
23 def rgbsort2(rgblist):
24     'reddest to greenest to bluest (... to redest, circularly)'
25     # , , 
26     # cindex = 0 for red; 1 for green; 2 for blue.
27     Closest = namedtuple('Closest', 'distance, cindex, col')
28     # find Closest info for all colours
29     colourdistances = []
30     for col in rgblist:
31         # distance to each cardinal colour in turn
32         rgbdistances = tuple(dist(col, cardinal) for cardinal in RGB)
33         distance = min(rgbdistances)        # closest
34         cindex = rgbdistances.index(distance)
35         colourdistances.append(Closest(distance, cindex, col))
36     # Sort closest to a cardinal point first 
37     colourdistances.sort()
38 
39     # clist accumulates redder, greener, bluer colours separately.
40     # Most intense colour towards the middle of each sublist.
41     clist = [list() for i in range(3)]
42 
43     # Accumulate the sub-spectra for each cardinal colour
44     for _, cindex, col in colourdistances:
45         # add right if closest to next colour cardinal point
46         addright = col[(cindex + 1) % 3] > col[(cindex + 2) % 3]
47         if addright:
48             clist[cindex].append(col)
49         else:
50             clist[cindex].insert(0, col)
51     # Final spectrum
52     return clist[0] + clist[1] + clist[2]
53 
54 def rgb2HTML(colours):
55     f, ht = 4, 50
...

67     return txt
68 
69 
70 if __name__ == '__main__':
71     if 1:
72         # See http://www.lynda.com/resources/webpalette.aspx# for info on
73         # HTML colours without dithering on Windows & Mac.
74         nondithers = (0xFF, 0xCC, 0x99, 0x66, 0x33, 0x00)
75     else:
76         nondithers = tuple(range(0,256,32))
77     rgblist = [Rgb(*rgb) for rgb in product(*(nondithers,)*3)]
78     spectra2 = rgbsort2(rgblist)
79     #assert spectra == spectra2
80     with open('rgbgen.htm', 'w') as f:
81         f.write(rgb2HTML(spectra2))
82 
83 



I have had to miss-out the guts of the rgb2HTML function as Blogger has problems with rendering the HTML tags 

The result

I get some sort of progression, but could do better:

#FFFFFF (255,255,255)#FFCCFF (255,204,255)#FF99FF (255,153,255)#CCCCCC (204,204,204)
#FFCCCC (255,204,204)#FF66FF (255,102,255)#FF33FF (255,51,255)#CC99CC (204,153,204)
#FF99CC (255,153,204)#FF00FF (255,0,255)#000000 (0,0,0)#999999 (153,153,153)
#CC66CC (204,102,204)#FF66CC (255,102,204)#CC9999 (204,153,153)#FF9999 (255,153,153)
#CC33CC (204,51,204)#333333 (51,51,51)#FF33CC (255,51,204)#CC00CC (204,0,204)
#996699 (153,102,153)#666666 (102,102,102)#330033 (51,0,51)#FF00CC (255,0,204)
#330000 (51,0,0)#CC6699 (204,102,153)#993399 (153,51,153)#663366 (102,51,102)
#FF6699 (255,102,153)#990099 (153,0,153)#660066 (102,0,102)#996666 (153,102,102)
#CC3399 (204,51,153)#663333 (102,51,51)#FF3399 (255,51,153)#CC0099 (204,0,153)
#660033 (102,0,51)#FF0099 (255,0,153)#CC6666 (204,102,102)#993366 (153,51,102)
#660000 (102,0,0)#FF6666 (255,102,102)#990066 (153,0,102)#CC3366 (204,51,102)
#993333 (153,51,51)#FF3366 (255,51,102)#CC0066 (204,0,102)#990033 (153,0,51)
#FF0066 (255,0,102)#990000 (153,0,0)#CC3333 (204,51,51)#FF3333 (255,51,51)
#CC0033 (204,0,51)#FF0033 (255,0,51)#CC0000 (204,0,0)#FF0000 (255,0,0)
#FF3300 (255,51,0)#CC3300 (204,51,0)#FF6600 (255,102,0)#993300 (153,51,0)
#CC6600 (204,102,0)#FF6633 (255,102,51)#CC6633 (204,102,51)#996600 (153,102,0)
#996633 (153,102,51)#FF9900 (255,153,0)#663300 (102,51,0)#CC9900 (204,153,0)
#FF9933 (255,153,51)#CC9933 (204,153,51)#666600 (102,102,0)#999900 (153,153,0)
#FF9966 (255,153,102)#666633 (102,102,51)#999933 (153,153,51)#CC9966 (204,153,102)
#FFCC00 (255,204,0)#333300 (51,51,0)#999966 (153,153,102)#CCCC00 (204,204,0)
#FFCC33 (255,204,51)#CCCC33 (204,204,51)#FFCC66 (255,204,102)#CCCC66 (204,204,102)
#FFCC99 (255,204,153)#FFFF00 (255,255,0)#CCCC99 (204,204,153)#FFFF33 (255,255,51)
#FFFF66 (255,255,102)#FFFF99 (255,255,153)#FFFFCC (255,255,204)#CCFFCC (204,255,204)
#CCFF99 (204,255,153)#CCFF66 (204,255,102)#99CC99 (153,204,153)#99FF99 (153,255,153)
#CCFF33 (204,255,51)#CCFF00 (204,255,0)#003300 (0,51,0)#99CC66 (153,204,102)
#99FF66 (153,255,102)#669966 (102,153,102)#99CC33 (153,204,51)#336633 (51,102,51)
#99FF33 (153,255,51)#99CC00 (153,204,0)#336600 (51,102,0)#99FF00 (153,255,0)
#66CC66 (102,204,102)#669933 (102,153,51)#006600 (0,102,0)#66FF66 (102,255,102)
#669900 (102,153,0)#66CC33 (102,204,51)#339933 (51,153,51)#66FF33 (102,255,51)
#66CC00 (102,204,0)#339900 (51,153,0)#66FF00 (102,255,0)#009900 (0,153,0)
#33CC33 (51,204,51)#33FF33 (51,255,51)#33CC00 (51,204,0)#33FF00 (51,255,0)
#00CC00 (0,204,0)#00FF00 (0,255,0)#00FF33 (0,255,51)#00CC33 (0,204,51)
#00FF66 (0,255,102)#009933 (0,153,51)#00CC66 (0,204,102)#33FF66 (51,255,102)
#33CC66 (51,204,102)#009966 (0,153,102)#00FF99 (0,255,153)#339966 (51,153,102)
#006633 (0,102,51)#00CC99 (0,204,153)#33FF99 (51,255,153)#33CC99 (51,204,153)
#006666 (0,102,102)#009999 (0,153,153)#66FF99 (102,255,153)#336666 (51,102,102)
#339999 (51,153,153)#66CC99 (102,204,153)#00FFCC (0,255,204)#003333 (0,51,51)
#00CCCC (0,204,204)#33FFCC (51,255,204)#669999 (102,153,153)#33CCCC (51,204,204)
#66FFCC (102,255,204)#66CCCC (102,204,204)#00FFFF (0,255,255)#99FFCC (153,255,204)
#33FFFF (51,255,255)#99CCCC (153,204,204)#66FFFF (102,255,255)#99FFFF (153,255,255)
#CCFFFF (204,255,255)#CCCCFF (204,204,255)#99CCFF (153,204,255)#66CCFF (102,204,255)
#9999CC (153,153,204)#9999FF (153,153,255)#33CCFF (51,204,255)#00CCFF (0,204,255)
#000033 (0,0,51)#6699CC (102,153,204)#6699FF (102,153,255)#666699 (102,102,153)
#3399CC (51,153,204)#333366 (51,51,102)#3399FF (51,153,255)#0099CC (0,153,204)
#003366 (0,51,102)#6666CC (102,102,204)#336699 (51,102,153)#0099FF (0,153,255)
#000066 (0,0,102)#6666FF (102,102,255)#006699 (0,102,153)#3366CC (51,102,204)
#333399 (51,51,153)#3366FF (51,102,255)#0066CC (0,102,204)#003399 (0,51,153)
#0066FF (0,102,255)#000099 (0,0,153)#3333CC (51,51,204)#3333FF (51,51,255)
#0033CC (0,51,204)#0033FF (0,51,255)#0000CC (0,0,204)#0000FF (0,0,255)
#3300FF (51,0,255)#3300CC (51,0,204)#6600FF (102,0,255)#330099 (51,0,153)
#6600CC (102,0,204)#6633FF (102,51,255)#6633CC (102,51,204)#660099 (102,0,153)
#663399 (102,51,153)#9900FF (153,0,255)#330066 (51,0,102)#9900CC (153,0,204)
#9933FF (153,51,255)#9933CC (153,51,204)#9966FF (153,102,255)#9966CC (153,102,204)
#CC00FF (204,0,255)#CC33FF (204,51,255)#CC66FF (204,102,255)#CC99FF (204,153,255)

5 comments:

  1. Hello. I investigated this recently. Came up with a few approaches, settled on a mostly-elegant solution. Email me if you want more details =)

    ReplyDelete
    Replies
    1. I'd attach an image, if I could, but here's the numeric output of my traversal:
      000 003 006 009 00c 00f 03f 03c 039 036 033 030 060 063 066 069 06c 06f 09f 09c 099 096 093 090 0c0 0c3 0c6 0c9 0cc 0cf 0ff 0fc 0f9 0f6 0f3 0f0 3f0 3f3 3f6 3f9 3fc 3ff 3cf 3cc 3c9 3c6 3c3 3c0 390 393 396 399 39c 39f 36f 36c 369 366 363 360 330 333 336 339 33c 33f 30f 30c 309 306 303 300 600 603 606 609 60c 60f 63f 63c 639 636 633 630 660 663 666 669 66c 66f 69f 69c 699 696 693 690 6c0 6c3 6c6 6c9 6cc 6cf 6ff 6fc 6f9 6f6 6f3 6f0 9f0 9f3 9f6 9f9 9fc 9ff 9cf 9cc 9c9 9c6 9c3 9c0 990 993 996 999 99c 99f 96f 96c 969 966 963 960 930 933 936 939 93c 93f 90f 90c 909 906 903 900 c00 c03 c06 c09 c0c c0f c3f c3c c39 c36 c33 c30 c60 c63 c66 c69 c6c c6f c9f c9c c99 c96 c93 c90 cc0 cc3 cc6 cc9 ccc ccf cff cfc cf9 cf6 cf3 cf0 ff0 ff3 ff6 ff9 ffc fff fcf fcc fc9 fc6 fc3 fc0 f90 f93 f96 f99 f9c f9f f6f f6c f69 f66 f63 f60 f30 f33 f36 f39 f3c f3f f0f f0c f09 f06 f03 f00

      Delete
    2. Hi Instantiable. why not blog about it? I would read that.

      - Paddy.

      Delete
    3. Do you want to project 3d to _2D_ or to _1D_? If you want a continuous spectrum, you in fact need 1D projection, not 2D as you say in the title. Also, I know what instantiable did, it's not hard to reverse engineer. The code is on http://pastebin.com/GUGpQDyN, I hope it's clear enough. Basically you just pick "closest" color every time, breaking ties by changing later coordinates. But for _2D_ projection, it would be a much more complicated task. :-)

      Delete
    4. Thanks Veky, I'll look into this. I need to learn more about colour.

      Delete

Followers

Subscribe Now: google

Add to Google Reader or Homepage

Go deh too!

whos.amung.us

Blog Archive