Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
128
Notice that the acceleration curve is concave, like the front of a spoon, while the shape of
the deceleration curve is convex. As you look at the figures, think about how much distance
is being covered over what time period. Is distance increasing more rapidly than
time or vice versa, and is the rate of change constant, increasing, or decreasing at different
parts of the curve? Is the curve smooth and continuous? The graph shows smooth
acceleration and deceleration beginning at point (0, 0), meaning that no time or distance
have elapsed.
In Figures 4-8 and 4-9, I divided each of the curves into four straight segments, between
the white points. These straight segments, approximating the curve, are called secant lines.
By looking at the slope of these lines, labeled m1 through m4, you can predict how the
rate of speed is changing in the graphs. It is also possible to more precisely calculate
the slope of each of these secant lines by using the x and y components of the points at
the ends of each of the secant lines and dividing the change in the two y components
(∆ y) by the change in the two x components (∆ x). For example, to calculate the slope of
the first secant line (m1) in the deceleration curve, you can do the following:
m1 = ∆ y / ∆ x
m1 = 30 – 0 / 1 – 0
m1 = 30
If you take the time to calculate the remaining slopes of m2, m3, and m4, you’ll get 10, 5,
and 3.33, respectively. Since this is a deceleration curve, it makes sense that the slopes of
the secant lines decrease over time. (Of course, it’s a lot less work to simply guess how the
rate of change is affected based on how vertical the secant lines are.)
It is a little confusing thinking about rate of change vs. speed. Speed is the rate of motion,
which is simpler to think about. Speed is simply distance divided by time. If I move a rectangle
30 pixels in 3 seconds, the rectangle is moving 10 pixel per second (pps); that’s its
speed. For example, the following simple Processing sketch moves a rectangle across the
screen at approximately 30 pps:
//linear motion
int w = 20;
int h = 10;
int x = 0;
int y;
void setup(){
size(400, 400);
y = height/2;
frameRate(30);
}
void draw(){
background(255);
rect(x++, y, w, h);
}