Processing: Creative Coding and Computational Art

float x, y, r = 20;
float speedX = 2, speedY = 2.5;
void setup(){
size(400, 400);
x = width/2;
y = height/2;
noStroke();
smooth();
}
void draw(){
background(0);
x+=speedX;
y+=speedY;
ellipse(x, y, r*2, r*2);
// check wall collisions
if (x > width-r){
x = width-r;
speedX*=-1;
}
else if (x < r){
x = r;
speedX*=-1;
}
else if (y > height-r){
y = height-r;
speedY*=-1;
}
else if (y < r){
y = r;
speedY *=-1;
}
}
This strategy will work fine for orthogonal collisions, when the object bounces off a horizontal
or vertical surface. However, it won’t work for an object hitting an angular or curved
surface, including objects colliding with each other. The next section will show you how to
deal with these cases.
Vectors
To begin to think about these more advanced types of collisions, you need to consider
how an object’s path is controlled by the speed values you increment it by. In the last
example, I incremented x by 2 and y by 2.5. Obviously, since y is being increased more
each frame than is x, the object moves on more of a vertical path than a horizontal one.
Since neither speed value was 0, you could also predict that the object would move in
some type of diagonal path. If speedX had been 0, the object would have only moved vertically.
And of course the situation would have been reversed if speedY had been 0.
MOTION
521
11