Processing: Creative Coding and Computational Art

the distance the rectangle moves are not perfectly synchronized; the rectangle may very
well be past the boundary when the collision check occurs. By checking for collision past
the boundary, we’re ensured of (eventually) catching it. However, this solution is not without
some problems.
Aesthetically, the rectangle may appear to go through the wall before bouncing off it. A
worse problem is that if the rectangle goes too far past the edge of the window, the detection
can actually catch it more than one time—causing it to get stuck (and sometimes
appear to shake) on the boundary. The quick fix for these problems is to immediately
place the rectangle against the display window wall after the detection, as I did in the
example code. Technically, this fix is not precisely accurate, but generally good enough for
“creative” coding purposes. For the more ambitious (or precise) reader, there is a more
complex (and accurate) way of fixing this overlap problem, by analyzing an object’s path
over time and finding precisely when it makes initial contact with the boundary.
Implementing such an approach is beyond this book, but most (computer science–
oriented) computer graphics texts will cover this approach.
Finally, after the collision has been detected and the rectangle has been put neatly back
against the display window edge, I simply reverse the sign of the speed variable by multiplying
it by –1. If it’s been a while since math class, remember that a negative multiplied by
another negative becomes a positive (and of course a negative times a positive equals a
negative).
Next, I’ll just add the collision detection and a timeout feature to the previous multirectangle
example. I’ll also add a background(255) call so that we can see the discrete rectangles
bouncing around (shown in Figure 11-4):
// Collision Detection and Timeout
int shapes = 200;
float[]speedX = new float[shapes];
float[]speedY = new float[shapes];
float[]x = new float[shapes];
float[]y = new float[shapes];
float[]w = new float[shapes];
float[]h = new float[shapes];
color[]colors = new color[shapes];
int timeLimit = 15;
void setup(){
size(400, 400);
frameRate(30);
noStroke();
// fill arrays will random values
for (int i=0; i