Motion in Processing

After learning how to actually draw something using Processing in the week 4 KKB210: Computational Arts 1 tutorial, we went on to discover the secrets of random motion!

We used the square that we drew in the previous part for the basis of this motion.

Now, to do random movement, you don’t need anything special because the draw() function that we used earlier actually loops over the contents of draw() {} continuously until it is ended with noLoop() or the program is closed.

So for movement, we just have to specify what we want to happen within the draw() {} loop.

As part of the week 4 tutorial, we made the box move randomly all over the screen and change size randomly.

To do this, we have to specify a list of variables within draw that will be used for the width, height and positioning of the box in place of the fixed parameters we used previously.

We do this with the following:

int x1, x2, y1, y2;

Now, we need to tell it what the value of these variables will be,.

x1 = int(random(width/2));
x2 = int(random(width/2));
y1 = int(random(height/2));
y2 = int(random(height/2));

The int () function converts the contents of the () to integers, be it a primitive datatype, string, or array.

The random() function selects a random number and can have one or two parameters. If one is specified then a random number will be selected between 0 and the parameter. If two parameters are specified, then the first is the lowest number and the second is the highest number and are written as random(low, high); and a random number will be chosen between these two parameters.

What we used in the tutorial for these parameters was a single high parameter based on the total width and height of the canvas. For the two x variables, we are generating a random number between 0 and half the width of the canvas. For the two y variables we are generating a random number between 0 and half the height of the canvas. This is done simply by saying width/2 (width divide 2) and height/2 (height divide 2).

So now, each time Processing runs through the draw loop, a new random integer will be assigned to the x1, x2, y1, and y2 variables. This doesn’t make the box change position though as it still uses the fixed parameters we assigned to it in the first part of the tutorial.

Just leave stroke(), strokeWeight() and fill() as they are, we want to look at rect();.

Instead of the fixed integers we used previously, we are going to replace them with a variable like below:

rect(x1,y1,x2,y2);

So, as in the previous part, the first two parameters are the position from the top left corner, so we have replaced the fixed parameters with x1 and y1. Then the last two parameters are the size of the box. We have replaced these with x2 and y2.

That’s it. You should have something like the following:

// Setup the canvas.
void setup(){
size(800,500);
}

// Create the draw loop.
void draw() {
background(0);

// Specify the variables.
int x1, x2, y1, y2;
x1 = int(random(width/2));
x2 = int(random(width/2));
y1 = int(random(height/2));
y2 = int(random(height/2));

// Draw the boxes.
stroke(255,255,0);
strokeWeight(5);
fill(255,0,0);
rect(x1,y1,x2,y2);
}

When run, this should give you a canvas with a box constantly moving and changing size. The default speed has the box moving fast enough that there appear to be multiple boxes appearing at once in different places.

If you aren’t sure that yours is behaving right, have a look at how mine turned out.

The variables above of course don’t have to stay like that. We have simply specified that the maximum random number should be half the width or height of the canvas. This is so that the boxes don’t end up positioned out of the box or bigger than the box entirely. You can of course remove the /2 on x1 and y1 for some larger boxes, or on x2 and y2 to allow the boxes to be rendered on any starting point on the canvas, even if it means the majority of the box will be off the canvas. You can of course do a combination of both, or put other variables there for other movements.

Additionally, you can have the colours of the boxes and their borders width and colour change the same way by adding some more variables:

// Setup the canvas.
void setup(){
size(800,500);
}

// Create the draw loop.
void draw() {
background(0);

// Specify the variables.
// Box widths and positions.
int x1, x2, y1, y2, swidth;
x1 = int(random(width));
x2 = int(random(width/2));
y1 = int(random(height));
y2 = int(random(height/2));
swidth = int(random(50));

// Box and border colours.
int c1, c2, c3, sc1, sc2, sc3;
c1 = int(random(255));
c2 = int(random(255));
c3 = int(random(255));
sc1 = int(random(255));
sc2 = int(random(255));
sc3 = int(random(255));

// Draw the boxes.
stroke(sc1, sc2, sc3);
strokeWeight(swidth);
fill(c1,c2,c3);
rect(x1,y1,x2,y2); }

Have a look at how mine came out if you aren’t sure what it should look like. Note that this has lots of rapidly flashing colours, so if you think you might have an adverse reaction, don’t look at it.

Tags: , , ,

One Response to “Motion in Processing”

Leave a Reply