color controls

color wheel control and palette manager. These interface controls for selecting colors, were built as an exercise. It consists of a radial hue selector, saturation and lightness xy pad, and small preview swatch. next a swatch array was added to store color settings. clicking any area in the grid will select a color slot and can output the stored color.

DOWNLOAD CONTROL DEMO

color wheel module diagram

The main colorwheel consists of 5 modules applied to the view in sequence. "Drag angle" determines the radial direction of user mouse drag. converting an x,y ray extending from the center to 360 degree outward. this range determines the hue.

calculating ray angle

inside 'radial 360' module: fixes angle direction sector and offsets

"center blend" is an xy accumulator with range conversion between 0-255 on each dimension. the display for the center square is pair of layered gradients of value and saturation. the input hue is shifted based on current rotary degree selection.

center blend for sat-val display

The swatch array is built upon modules with multiple index synchronized arrays.

inside main schematic block

the columns are created by a little module that reads the index elements, calculates the space available in the view box, and fits as many into rows and columns as possible within size and margin dimension constraints.

columnizer: take note of integer to float conversions

there is also a module that kind of reverses the process. it converts mouse x,y click to grid units, and finds out what array index that mouse click is contained within. then the columnize module puts the highlight rectangle around that box.

find index by x,y

swatch array: each trigger activates both

The basis is the 'color array', which consists of 4 arrays, one for each A,R,G,B value. they are added and retrieved at once by index, and can get and set values with triggers. below is the color array 'edit' module, which is paired with a duplicate color array 'read' module. they are synchronized to solve a problem with modifying colors while the draw loop is setting the index value.

color array edit: access to color array items happens here.