Bored of primitive shape objects? Me too. It’s time to add a splash of colour.

TColor

The basic building block of colours in toxiclibs is the TColor class, as with many things in Toxiclibs it’s a feature rich alternative to a basic Processing building block, the color datatype. They can be constructed using convenient factory methods like newRandom() or specified in a variety of different colour spaces as shown below.

// create a random colour
TColor c1 = TColor.newRandom()
// create a colour specifying RGB and alpha values between 0 and 1
TColor c2 = TColor.newRGBA(0.2,0.9,0.5,1)
// create a colour specifying a hex value
String s = "ff0028";
TColor c = TColor.newHex(s);

Now we have our colour variable, we can perform various handy operations on it like darkening, desaturating, inverting, or getting its complement:

// load the appropriate toxiclibs libraries
import toxi.geom.*;
import toxi.color.*;
 
// declare four TColor variables
TColor c, c1, c2, c3;
 
void setup() {
  // set things up
  size(525,150);
  background(0);
  noStroke();
  // this is a static sketch so tell it not to loop
  noLoop();
}
 
void draw() {
  // create a new random colour
  c = TColor.newRandom();
  // generate various modifications of the chosen colour
  c1 = c.getComplement();
  c2 = c.getInverted();
  c3 = c.getRotatedRYB(0.5);
   
  // draw four squares to screen filled with our colours
  // of choice
  fill(c.toARGB());
  rect(25,25,100,100);
  fill(c1.toARGB());
  rect(150,25,100,100);
  fill(c2.toARGB());
  rect(275,25,100,100);
  fill(c3.toARGB());
  rect(400,25,100,100);
}
 
// if a key is pressed call draw() again to pick a new
// set of colours
void keyPressed() {
  redraw();
}

As you can see in the above example, in order to use our chosen colour we need pass it as an argument to one of Processing’s basic commands, in this case we use c.toARGB() to convert the TColor to a format the fill() command will understand. Then we just draw some boxes to the screen and they will be full of our favorite hue!

Below is an example that generates a new random colour when a key is pressed and uses the TColor.blend() function to smoothly change colours, along with automatically generating the complementary background.

// load the appropriate toxiclibs libraries
import toxi.geom.*;
import toxi.color.*;

// declare three TColor variables, and some others
TColor c, c_target;
float change_rate, t;
// boolean to tell if the colour is still changing
boolean changing = false;


void setup() {
  size(400,400);
  background(0);
  noStroke();
  // determines the speed of colour change
  change_rate = 0.001;
  // create a new random colour
  c = TColor.newRandom();
}

void draw() {
  // get the complement to the current block colour
  // and set it as the background.
  TColor back = c.getComplement();
  background(back.toARGB());
  // set the fill to the colour c
  fill(c.toARGB());
  // draw a rectangle in the centre of the screen
  rect(100,100,200,200);
  // check if the colour should be changing
  if(changing) {
    // blend c with the target colour, an amount dependant
    // on the time t
    c.blend(c_target,t);
    // increment time slightly
    t += change_rate;
    // check the distance to the target colour in HSV space
    float c_dist = c.distanceToHSV(c_target);
    // when the colour is close enough stop changing.
    if(c_dist<0.01){
      changing = false;
    }
  }
}

 void keyPressed() {
   // if a key is pressed pick a new random colour to change to
  c_target = TColor.newRandom();
  // reset time to be zero
  t = 0;
  changing = true;
}

So far we haven’t done much more than would be fairly simple using just processing alone. But TColor does give us access to lots of pretty common manipulations and makes changing between colour spaces pretty simple. It also means we can start using some of the other features of Toxiclibs colour libraries like nice palettes and pleasant gradients, but that’s for next time.

Below is another slightly more involved example of using the TColor class similarly to what we did above (source available at openprocessing.org):