Trails and Smoother Colour Changes in Processing

Now that we have got the motion more controlled, we can go on to do other things with it such as add semi-transparent trails to the movement, change the speed of the colour changes and size changes, and plenty more. This is what the next part of the KKB210: Computational Arts 1 week 4 tutorial was focused on.

To start with we will be looking at having the changes to the variables being kept at the start of the next loop. IE, having the loop start with the box in the same position and the same colour as it was at the end of the previous loop.

In order to do this, we need to specify the variables prior to the loop, otherwise at every loop, the variable contents will go back to whatever was specified when the variables were created. So the start of our canvas will look like this:

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

int r=150;
int g=140;
int b=180;

void setup(){
size(500,500);
}

void draw() {
fill(0,0,250,10);
rect(0,0,width,height);

We have created a couple of different variables for colours from what I had used before. Previously I used c1, c2, c3 and sc1, sc2, sc3, however, when we were shown this part it was done using r, g, b, which is potentially a better set of variables to use since they are more descriptive.

By specifying the variables prior to the loop, it means that since we are no longer assigning their value at the start of each loop, their value remains the same as it was at the end of the previous loop.

We have also specified that the first thing the loop is to do is to create a box that starts at the origin (0,0) and be the width and height of the document (width,height). There is something a little bit different about this though. You may have noticed that I have used four parameters in the fill instead of the three that we have used previously. The fourth parameter is the alpha channel, so the syntax is fill(red,green,blue.alpha).

We have assigned 10 as the alpha channel, this allows for a degree of transparency by controlling the fill opacity.

It seems a little unusual to me that to create the appearance of a trail to the motion that we apply a lower opacity to the object below the one we want to have a trail, but it works.

Now that we have our canvas all set up, we can go ahead and work with those variables.

We will use the same random call for the movement of the box as we used in the previous part of the exercise:

// Get a random number for each of the four variables.
x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

// Set the size and position based on the random variables.
boxX += x1;
boxY += y1;
boxWidth += x2;
boxHeight += y2;

Now, we want to do something with that list of colour variables, (r,g,b).

r += int(random(4)-2);
g += int(random(4)-2);
b += int(random(4)-2);

For the random colours we used previously, we just used random to pick an integer between 0 and 255. As we are trying to make the colour changes more gradual, we want the random number to be small. For this reason, we have set random to pick an integer between 0 and 4 and then subtract 2 from it.

This means that the colour can, at the most, be adjusted by +2 or -2.

Now to put this into play:

fill(r,g,b)
// rect doesn’t change from the previous exercise.
Rect(boxX,boxY,boxWidth,boxHeight);
}

There you have it, if you have all that together you should get something like this:

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

int r=150;
int g=140;
int b=180;

void setup(){
size(500,500);
}

void draw() {
fill(0,0,250,10);
rect(0,0,width,height);

x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

boxX += x1;
boxY += y1;
boxWidth += x2;
boxHeight += y2;

r += int(random(4)-2);
g += int(random(4)-2);
b += int(random(4)-2);

fill(r,g,b);
rect(boxX,boxY,boxWidth,boxHeight);
}

Not sure how it should look? Have a look at how mine turned out.

Tags: , , ,

One Response to “Trails and Smoother Colour Changes in Processing”

  1. […] Trails and Smoother Colour Changes in Processing. […]

Leave a Reply