Web Analytics Made Easy -
top of page
  • Chris Owens

Processing 3 Swatch Creator: How to use lerpColor() and PrintWriter

Updated: Sep 11, 2021

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.


The Complete for() Loop

The for() loop sits within the draw() section of the sketch.

  for(float i=0; i<=(steps-1); i+=interval) {
  color col = lerpColor(from, to, c);
  text($colour,(i*interval)+5, 40);
  if(i<=width && i>0) {
    $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:


with or without the optional transparency value. And remember, counting starts at 0 - so the 4th colour has an index of 3.


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};

89 views0 comments


bottom of page