Driven by a need to easily create a range of colours for some of my sketches to use, I have created a simple sketch (Processing 3.0) to interpolate a range of colours between starting and ending hex values. The sketch saves a reference jpeg image of the colours and their respective hex values burned in, and a text file of the colour values, formatted for use in a sketch.
The sketch lets you define the starting and ending colours as hex values, e.g # FAB307, and the number of values to be interpolated.
There are a lot of different tools available for creating colour values, however most of them do not allow you to set up a defined number of steps. The sketch can be dowloaded here.
Note:the description here assumes that you are familiar with Processing 3, and have experience of writing and executing sketches.
Creating the Colour Values
The colour vales are interpolated using the lerpColor() function. The global variable declarations used for this are set at the top of the sketch:
// ---> number of colours
int steps=12;
// ---> starting colour (hex)
color from = #ff0000;
// ---> final colour (hex)
color to = #00ff00;Any number of steps can be used. The width of each step in the resulting graphic is hard-coded to 75pixels to enable the colour value to be burned into the image. A couple of other global variables are declared at the top of the sketch:
float c,interval;
c holds the interpolated colour value
interval holds the steps between each colour value
int w=1+steps*95;w defines the overall width of the graphic, and is used in the size() function.
The lerpColor() function accepts three parameters:
lerpColor(c1, c2, amt)c1- the starting colour
c2- the final colour
amt- a float value between 0.0 and 1.0
A for() loop calculates each colour value and draws it onto the canvas using the fill() and rect() functions. The complete for() loop is shown below.
Writing the Text File
The text file containing the code fragment is written to the file system using Processing's PrintWriter class and CreateWriter() function.
The declarations used for this are set at the top of the sketch:
PrintWriter output;
String $colours, $colour;$coloursholds the string to be written to the file
$colourholds the current colour value as a string
The text output file is created within the setup() block of the sketch.
output = createWriter("colours_from_#"+hex(from,6)+"_to_#"+hex(to,6)+".txt");The parameter passed to the CreateWriter() function is a string holding the filename. The hex(from,6)fragment just formats the colour value to a string in hex format.
As each swatch is created in the for() loop, the colour values are added to the $colours string. Once the for() loop has completed the string is saved to the file using the PrintWriter's println() method. Finally, the output is flushed and the file closed.
output.println($colours);
output.flush();
output.close();The Complete for() Loop
The for() loop sits within the draw() section of the sketch.
for(float i=0; i<=(steps-1); i+=interval) {
c=(float)i/(steps-1);
color col = lerpColor(from, to, c);
fill(col);
rect(i*interval,0,interval-1,height);
$colour="#"+hex(col,6);
fill(255);
text($colour,(i*interval)+5, 40);
if(i<=width && i>0) {
$colours=$colours+",";
}
$colours = $colours+$colour;
}Using the Code Fragment in a Sketch
The code fragment creates a array of colour values.
Include the code in your sketch before the setup() block, as a global variable.
// Array to hold colour codes
color [] colour={#FAB703,#E9A910,#D89A1D,#C78C2A,#B67D37,#A56F44,#946151,#82525E,#71446B,#603578,#4F2785,#3E1892,#2D0A9F};When a colour is needed from the array, it is accessed using an index into the array, for example:
fill(colour[i]);with or without the optional transparency value. And remember, counting starts at 0 - so the 4th colour has an index of 3.
Examples
Here are some examples of the swatches created and their code fragments for use in a processing sketch.
color [] colour={#FAB703,#E9A910,#D89A1D,#C78C2A,#B67D37,#A56F44,#946151,#82525E,#71446B,#603578,#4F2785,#3E1892,#2D0A9F};
color [] colour={#00FF00,#00EA15,#00D52B,#00BF40,#00AA55,#00956A,#008080,#006A95,#0055AA,#0040BF,#002BD5,#0015EA,#0000FF};