More Controlled Motion in Processing

The third part of the week 4 tutorial in KKB210: Computational Arts 1 continued the focus on motion from the second part. For this part we used many of the things we had already done in the previous parts, but modified slightly to create more controlled movement.

You can easily edit the previous sketch to do this, or you can write it up from scratch.

Getting things started:

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

void draw() {
background(0);

Recognise everything so far? Ok, we are going to use the variables from part 2 along with four new ones that we are going to assign more specific values to.

// Setup the variables we used before.
int x1, x2, y1, y2;

// Setup the new variables.
// Assign them with more specific values.
int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

// Assign the first viariables with a
// more controlled random.
x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

// Add assign the first variables to the
// second variables.
boxX += x1;
boxY += y1;
boxWidth += y2;
boxHeight += y2;

The random variables should make sense, they are a slight variation on what we have used before. The random number will be chosen from between 0 and 6, and then it will have 3 subtracted from it.

The new variables are what we will be using for the positioning and movement of the box. When we first created them, we assigned them with fixed values. We made the box a square by assigning boxWidth and boxHeight 250, making it 250 wide by 250 high. We then gave the square a fixed position by assigning boxX and boxY 100, making it 100 from the top and 100 from the left.

After the random numbers have been generated for the first set of variables, we then assign them to the second set. However, in order for them to not overwrite our specific sizing and positioning completely, we use an add assign, which is what the += operator is. Add assign basically takes the variable and adds whatever we specify to it. There is also subtract assign available, the syntax for it is -= however we haven’t used it in this scenario.

The add assign takes our specified measurements and then adds the random number to it. This gives us much more controlled motion as for each loop the position and size of the box is reset and then adjusted based on a random number between 0 and 6 less 3, so it is very restricted as to just how far it can go.

Of course for this to actually work, you have to change the parameters of rect slightly. So the last part of this exercise would be:

fill(255,0,0);
rect(boxX,boxY,boxWidth,boxHeight);
}

Have a look at my version if you aren’t sure about how it should look.

I have dropped the stroke and random colours from the previous parts, but these are very easy to implement here as well.

All you would have to do is make the following changes:

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

void draw() {
//do some drawing
background(0);

int x1, x2, y1, y2;

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

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;

// Add the colour variables.

// 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));

// Add the stroke functions.

stroke(sc1, sc2, sc3);
strokeWeight(10);

// Change the fill to use the random colours.

fill(c1,c2,c3);
rect(boxX,boxY,boxWidth,boxHeight);
}

I used a fixed width stroke for this one, but you could of course make it a random width like in the previous part by adding a variable for it and using the random() command.

For example:

// Add the variable.
int swidth;
swidth = int(random(50));

stroke(sc1,sc2,sc3)
// Change strokeWeight.
strokeWeight(swidth);

Making these changes I got this. 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: , , ,

Leave a Reply