Hide
Don't get spied on – We respect your privacy and provide numerous options to protect it. Join Siafoo Now or Learn More

Color Picker for Nodebox Atom Feed -1

In Brief A nifty animated interactive color picker for Nodebox. Why should Photoshop have all the fun?... more
# 's
  1colors = ximport('colors')
2from colorsys import hsv_to_rgb
3from custom_primitives_library import dumbell_nodes # Found here: http://www.siafoo.net/snippet/180
4
5
6def setup():
7 global old_mx,old_my,m_x,m_y,h,w,d_h,d_w,div,r_size,useful_paths,\
8 hr_x_start,hr_x_end,hr_y_start,hr_y_end,h_selected,old_h_selected,hue_paths,\
9 s_selected,b_selected,need_redraw
10
11
12
13 # Path storage sequences for cross-frame reference.
14 hue_paths = []
15 useful_paths = []
16
17 # Initial Color Choices and Positional Variables
18 old_h_selected = 0.5
19 h_selected = 0.5
20 s_selected = 0.5
21 b_selected = 1
22
23
24 # Width and Height of color-selection grid
25 h = float(HEIGHT)*.8
26 w = float(WIDTH)*.8
27
28 # Sizes for splitting up the grid into swatches.
29
30 divide_into_x_by_x = 15 #The primary resolution-deciding variable.
31 div = w/divide_into_x_by_x
32 d_h = h/div
33 d_w = w/div
34 r_size = div
35
36 # Mouse Location Variables
37 start_x,start_y = w*0.5,h*0.5
38 old_mx,old_my = start_x,start_y
39 m_x,m_y = start_x,start_y
40
41 # The Hue-Selection Bar Parameters and Paths
42 hr_x_start = WIDTH*.85
43 hr_x_end = WIDTH*.95
44 hr_y_start = HEIGHT*.05
45 hr_y_end = HEIGHT*.75
46 huebar_height= hr_y_end-hr_y_start
47 huebar_width= hr_x_end-hr_x_start
48
49 hue_div = div*0.5
50 num_hues = max(int(huebar_height/hue_div),16)
51
52 c_list_source = []
53 for y in range(num_hues):
54 c = colors.hsb(y*1.0/num_hues,1.0,1.0)
55 c_list_source.append(c)
56
57 for ind,c in enumerate(c_list_source):
58 fill(c)
59 r = rect(hr_x_start,hr_y_start+ind*hue_div,huebar_width,hue_div,draw=False)
60 hue_paths.append(r)
61
62 # Refresh-tracking variable
63 need_redraw= True
64
65
66def draw():
67
68 global old_mx,old_my,m_x,m_y,h,w,d_h,d_w,div,r_size,useful_paths,\
69 hr_x_start,hr_x_end,hr_y_start,hr_y_end,h_selected,old_h_selected,hue_paths,\
70 s_selected,b_selected,need_redraw
71
72 colormode(HSB)
73 background(0.95)
74
75
76 t_mx = MOUSEX
77 t_my = MOUSEY
78 md_was = mousedown
79
80
81 # Check for a change in selected saturation/brightness square
82 if md_was and t_mx > 0 and t_mx<w and t_my >0 and t_my<h:
83
84 old_mx = m_x
85 old_my = m_y
86 m_x = t_mx
87 m_y = t_my
88
89 if old_mx != m_x and old_my != m_y:
90 need_redraw = True
91
92 # Check for a change in selected hue
93 if md_was and t_mx > hr_x_start and t_mx < hr_x_end\
94 and t_my > hr_y_start and t_my < hr_y_end:
95
96 h_selected_y = t_my - hr_y_start
97 huebar_height = hr_y_end-hr_y_start
98 old_h_selected = h_selected
99 h_selected = h_selected_y*1.0/huebar_height
100
101 if old_h_selected != h_selected:
102 need_redraw=True
103
104
105 if need_redraw:
106
107 useful_paths = []
108
109 # Build the main saturation/brightness grid
110 for x,y in grid(d_w,d_h,div,div):
111 t_s = float(x)/w
112 t_b = 1-float(y)/h
113 fill(h_selected,t_s,t_b)
114 if m_x > x and m_x < x+r_size and m_y > y and m_y < y+r_size:
115 s_selected = t_s
116 b_selected = t_b
117 stroke(colors.hsb(1,0,1))
118 strokewidth(div*0.05)
119 else:
120 stroke(None)
121 r = rect(x,y,r_size,r_size)
122 useful_paths.append(r)
123
124 # Build the numerical output region
125 stroke(0)
126 strokewidth(1)
127 fill(0)
128 fontsize(24)
129 tr,tg,tb = hsv_to_rgb(h_selected,s_selected,b_selected)
130 text_h = '%.3f' %(h_selected,)
131 text_s = '%.3f' %(s_selected,)
132 text_b = '%.3f' %(b_selected,)
133 text_tr = '%.3f' %(tr,)
134 text_tg = '%.3f' %(tg,)
135 text_tb = '%.3f' %(tb,)
136 s_fill = color(0.7)
137 hd_t,hd_s = dumbell_nodes(WIDTH*.02,HEIGHT*.85,90,'Hue',(text_h,),shapes_fill=s_fill)
138 sd_t,sd_s = dumbell_nodes(WIDTH*.14,HEIGHT*.85,90,'Sat.',(text_s,),shapes_fill=s_fill)
139 bd_t,bd_s = dumbell_nodes(WIDTH*.26,HEIGHT*.85,90,'Bright',(text_b,),shapes_fill=s_fill)
140
141 tr_t,tr_s = dumbell_nodes(WIDTH*.42,HEIGHT*.85,90,'Red',(text_tr,),shapes_fill=s_fill)
142 tg_t,tg_s = dumbell_nodes(WIDTH*.54,HEIGHT*.85,90,'Blue',(text_tg,),shapes_fill=s_fill)
143 tb_t,tb_s = dumbell_nodes(WIDTH*.66,HEIGHT*.85,90,'Green',(text_tb,),shapes_fill=s_fill)
144 useful_paths.extend((hd_t,hd_s,sd_t,sd_s,bd_t,bd_s,tr_t,tr_s,tg_t,tg_s,tb_t,tb_s))
145
146 # Build a circle containing the currently selected color.
147 stroke(.7)
148 strokewidth(3)
149 fill(colors.hsb(h_selected,s_selected,b_selected))
150 blot_o = oval(WIDTH*.825,HEIGHT*.82,WIDTH*.15,HEIGHT*0.155)
151 useful_paths.extend((blot_o,))
152
153
154 # If nothing has changed, redraw what we had last time.
155 else:
156
157 for p in useful_paths:
158 fill(p.fill)
159 stroke(p.stroke)
160 strokewidth(p.strokewidth)
161 drawpath(p)
162
163 # The hue-bar is always redrawn the same.
164 for hr in hue_paths:
165 fill(hr.fill)
166 stroke(None)
167 drawpath(hr)
168
169 need_redraw = False
170
171 return None
172
173
174# Execution Code
175try:
176 import psyco
177 psyco.bind(draw)
178 psyco.bind(setup)
179 psyco.bind(dumbell_nodes)
180except:
181 print "No such luck"
182
183# Image size and animation speed.
184s_mult = 9
185speed(5)
186size(s_mult*100,s_mult*100)

A nifty animated interactive color picker for Nodebox. Why should Photoshop have all the fun?

Once you get this snippet running, click on whatever color you like, and the picker will let you know the RGB and HSB values corresponding to the chosen swatch. These values are normalized to run from 0.0 to 1.0, so if you're using an integer-based system for the rest of your image coloration, don't forget to multiply by 255.

This snippet is dependent on my "Dumbell Nodes" primitive which you can find here.

http://www.siafoo.net/image/99