Toxiclibs is useful, very useful.

Toxiclibs is a library for processing developed by Karsten Schmidt (a.k.a Toxi), it provides an impressively expansive set of tools for accomplishing a whole raft of tasks in Processing (or just Java) that is useful for just about anyone working in the Processing environment. You can see the impressive variety of projects that use the library in the showreel below.

But the biggest downfall for Toxiclibs so far is the lack of tutorials. Sure there are plenty of (pretty impenetrable) JavaDocs, and Toxi is tirelessly working on helping to improve the documentation surrounding the library, but for something so big and complex (and widely used) there is still a glaring lack of tutorials, especially for the relative novice to the programming word like me. But Processing is all about the community, so instead of moaning about the lack of basic tutorials and giving up, it’s our duty to do something about it if we can. So starting from the basics of Toxiclibs I’m going to go through and play with all the features and figure out the basics and share what I learn along the way here for any other budding amateurs.

A caveat, I am doing this mostly for learning myself, so there are likely to be many things which are wrong or not quite right, if you’re older and wiser than me then please point these out and I will amend things accordingly, and won’t take offence, I’m doing this to learn after all!

Vectors

So vectors, I’ll assume people know what they are and what they’re good for (if not there are far better explanations out there than I can manage). In Toxiclibs there is a Vec2D class which is basically very similar to the PVector class that comes built in to processing. You can perform all the same maths operations on the vector, plus a few more. So why use this rather than the built in class? Well it does a touch more stuff and it’ll play nicer with multitude of other classes that are just on the horizon.

Above is a simple example showing the use of some of the basic vector functions such as rotate, add, addSelf and angleBetween to make a simple spirograph style plotter. The code is below and should look very familiar for anyone who is used to the basics of Processing.

// import the necessary toxiclibs libraries
import toxi.geom.*; 

// declare the vectors we will be using
Vec2D m, n, p;

void setup() {
  size(400,400);
  smooth();
  // create the three vectors
  m = new Vec2D(50,50); 
  n = new Vec2D(30,30);
  p = new Vec2D(10,10);
  background(0);
  strokeWeight(1);
}

void draw() {
  // translate so the centre of the screen is the origin
  translate(200,200);
  for(int i=0;i<20;i++){
    // rotate each of the vectors a little, change these
    // to produce a variety of patterns
    m.rotate(0.01);
    n.rotate(0.021);
    p.rotate(0.052);
    // calculate the angle between m and n vectors and
    // use this to set the stroke colour
    float ang = m.angleBetween(n,true);
    stroke(100*ang,255-100*ang,100+50*ang);
    // create a temporary vector for the final position of
    // the dot so we don't change our original vectors
    Vec2D blob = m.add(n);
    blob.addSelf(p);
    // draw a dot at the x,y co-ordinates of the sum of the
    // three vectors
    point(blob.x,blob.y);
  }
}

A plotting aside

In the previous example we used the normal Processing functions to plot the end point of the vector. For this we have to separately access the x and y coordinates and provide these to the point function. There is a more elegant solution built into Toxiclibs, which is the ToxiclibsSupport class that provides new drawing commands and gives easy access to existing Processing commands.

To use this feature we just need to import the relevant library:

Declare a new ToxiclibsSupport object:

ToxiclibsSupport gfx;

and initialise it in setup():

// initialise the ToxiclibsSupport class
gfx=new ToxiclibsSupport(this);

Then to plot a point corresponding to the location of our vector we can simply use the command:

blob.addSelf(p);

So our final complete code looks like this:

// import the necessary toxiclibs libraries
import toxi.geom.*; 
import toxi.processing.*;

// declare the vectors we will be using
ToxiclibsSupport gfx;
Vec2D m, n, p;

void setup() {
  size(400,400);
  smooth();
  // initialise the ToxiclibsSupport class
  gfx=new ToxiclibsSupport(this);
  // create the three vectors
  m = new Vec2D(50,50); 
  n = new Vec2D(30,30);
  p = new Vec2D(10,10);
  background(0);
  strokeWeight(1);
}

void draw() {
  // translate so the centre of the screen is the origin
  translate(200,200);
  for(int i=0;i<20;i++){
    // rotate each of the vectors a little, change these
    // to produce a variety of patterns
    m.rotate(0.01);
    n.rotate(0.021);
    p.rotate(0.052);
    // calculate the angle between m and n vectors and
    // use this to set the stroke colour
    float ang = m.angleBetween(n,true);
    stroke(100*ang,255-100*ang,100+50*ang);
    // create a temporary vector for the final position of
    // the dot so we don't change our original vectors
    Vec2D blob = m.add(n);
    blob.addSelf(p);
    // draw a dot at the x,y co-ordinates of the sum of the
    // three vectors
    // we can now do this just by passing the Vec2D object
    // to the point command, easy!
    gfx.point(blob);
  }
}

That's it for now, pretty basic, next time we will deal with the (marginally) more interesting case of using Line2D.