To create smooth motion, Processing tries to run the code inside draw() at 60 frames each second. To confirm the frame rate, run this program and watch the values print to the Console. The frameRate variable keeps track of the program's speed.

void draw() {
  println(frameRate);
}

The frameRate() function changes the speed at which the program runs. To see the result, uncomment different versions of frameRate() in this example:

void setup() {
  frameRate(30);    // Thirty frames each second
  //frameRate(12);  // Twelve frames each second
  //frameRate(2);   // Two frames each second
  //frameRate(0.5); // One frame every two seconds
}

void draw() {
  println(frameRate);
}

The following example moves a shape from left to right by updating the x variable:

int radius = 40;
float x = -radius;
float speed = 0.5;

void setup() {
  size(240, 120);
  smooth();
  ellipseMode(RADIUS);
}

void draw() {
  background(0);
  x += speed; // Increase the value of x
  arc(x, 60, radius, radius, 0.52, 5.76);
}

When you run this code, you'll notice the shape moves off the right of the screen when the value of the x variable is greater than the width of the window. The value of x continues to increase, but the shape is no longer visible.

There are many alternatives to this behavior, which you can choose from according to your preference. First, we'll extend the code to show how to move the shape back to the left edge of the screen after it disappears off the right. In this case, picture the screen as a flattened cylinder, with the shape moving around the outside to return to its starting point:

int radius = 40;
float x = -radius;
float speed = 0.5;

void setup() {
  size(240, 120);
  smooth();
  ellipseMode(RADIUS);
}

void draw() {
  background(0);
  x += speed;               // Increase the value of x
  if (x > width+radius) {   // If the shape is off screen,
    x = -radius;            // move to the left edge
  }
  arc(x, 60, radius, radius, 0.52, 5.76);
}

On each trip through draw(), the code tests to see if the value of x has increased beyond the width of the screen (plus the radius of the shape). If it has, we set the value of x to a negative value, so that as it continues to increase, it will enter the screen from the left. See Figure 7-1 for a diagram of how it works.

Figure 7-1. Testing for the left edge of the window.

In this example, we'll extend Example 7-3: Move a Shape to have the shape change directions when it hits an edge, instead of wrapping around to the left. To make this happen, we add a new variable to store the direction of the shape. A direction value of 1 moves the shape to the right, and a value of −1 moves the shape to the left:

int radius = 40;
float x = 110;
float speed = 0.5;
int direction = 1;

void setup() {
  size(240, 120);
  smooth();
  ellipseMode(RADIUS);
}

void draw() {
  background(0);
  x += speed * direction;
  if ((x > width-radius) || (x < radius)) {
    direction = -direction; // Flip direction
  }
  if (direction == 1) {
    arc(x, 60, radius, radius, 0.52, 5.76); // Face right
  } else {
    arc(x, 60, radius, radius, 3.67, 8.9);  // Face left
  }
}

When the shape reaches an edge, this code flips the shape's direction by changing the sign of the direction variable. For example, if the direction variable is positive when the shape reaches an edge, the code flips it to negative.

To make this example code modular, we've created a group of variables at the top. Run the code a few times and change the values to see how this code can move a shape from any location to any other at a range of speeds. Change the step variable to alter the speed:

int startX = 20;      // Initial x-coordinate
int stopX = 160;      // Final x-coordinate
int startY = 30;      // Initial y-coordinate
int stopY = 80;       // Final y-coordinate
float x = startX;     // Current x-coordinate
float y = startY;     // Current y-coordinate
float step = 0.005;   // Size of each step (0.0 to 1.0)
float pct = 0.0;      // Percentage traveled (0.0 to 1.0)

void setup() {
  size(240, 120);
  smooth();
}

void draw() {
  background(0);
  if (pct < 1.0) {
    x = startX + ((stopX-startX) * pct);
    y = startY + ((stopY-startY) * pct);
    pct += step;
  }
  ellipse(x, y, 20, 20);
}

The following short example prints random values to the Console, with the range limited by the position of the mouse. The random() function always returns a floating-point value, so be sure the variable on the left side of the assignment operator (=) is a float as it is here:

void draw() {
  float r = random(0, mouseX);
  println(r);
}

The following example builds on Example 7-7: Generate Random Values; it uses the values from random() to change the position of lines on screen. When the mouse is at the left of the screen, the change is small; as it moves to the right, the values from random() increase and the movement becomes more exaggerated. Because the random() function is inside the for loop, a new random value is calculated for each point of every line:

void setup() {
  size(240, 120);
  smooth();
}

void draw() {
  background(204);
  for (int x = 20; x < width; x += 20) {
    float mx = mouseX / 10;
    float offsetA = random(-mx, mx);
    float offsetB = random(-mx, mx);
    line(x + offsetA, 20, x - offsetB, 100);
  }
}

When used to move shapes around on screen, random values can generate images that are more natural in appearance. In the following example, the position of the circle is modified by random values on each trip through draw(). Because the background() function is not used, past locations are traced:

float speed = 2.5;
int diameter = 20;
float x;
float y;

void setup() {
  size(240, 120);
  smooth();
  x = width/2;
  y = height/2;
}

void draw() {
  x += random(-speed, speed);
  y += random(-speed, speed);
  ellipse(x, y, diameter, diameter);
}

If you watch this example long enough, you may see the circle leave the window and come back. This is left to chance, but we could add a few if structures or use the constrain() function to keep the circle from leaving the screen. The constrain() function limits a value to a specific range, which can be used to keep x and y within the boundaries of the display window. By replacing the draw() in the preceding code with the following, you'll ensure that the ellipse will remain on the screen:

void draw() {
  x += random(-speed, speed);
  y += random(-speed, speed);
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
  ellipse(x, y, diameter, diameter);
}

You can watch the time pass when you run this program:

void draw() {
  int timer = millis();
  println(timer);
}

When paired with an if block, the values from millis() can be used to sequence animation and events within a program. For instance, after two seconds have elapsed, the code inside the if block can trigger a change. In this example, variables called time1 and time2 determine when to change the value of the x variable:

int time1 = 2000;
int time2 = 4000;
float x = 0;

void setup() {
  size(480, 120);
  smooth();
}

void draw() {
  int currentTime = millis();
  background(204);
  if (currentTime > time2) {
    x -= 0.5;
  } else if (currentTime > time1) {
    x += 2;
  }
  ellipse(x, 60, 90, 90);
}

This example shows how values for sin() cycle from −1 to 1 as the angle increases. With the map() function, the sinval variable is converted from this range to values from 0 and 255. This new value is used to set the background color of the window:

float angle = 0.0;

void draw() {
  float sinval = sin(angle);
  println(sinval);
  float gray = map(sinval, −1, 1, 0, 255);
  background(gray);
  angle += 0.1;
}

This example shows how these values can be converted into movement:

float angle = 0.0;
float offset = 60;
float scalar = 40;
float speed = 0.05;

void setup() {
  size(240, 120);
  smooth();
}

void draw() {
  background(0);
  float y1 = offset + sin(angle) * scalar;
  float y2 = offset + sin(angle + 0.4) * scalar;
  float y3 = offset + sin(angle + 0.8) * scalar;
  ellipse( 80, y1, 40, 40);
  ellipse(120, y2, 40, 40);
  ellipse(160, y3, 40, 40);
  angle += speed;
}

When sin() and cos() are used together, they can produce circular motion. The cos() values provide the x-coordinates, and the sin() values the y-coordinates. Both are multiplied by a variable named scalar to change the radius of the movement and summed with an offset value to set the center of the circular motion:

float angle = 0.0;
float offset = 60;
float scalar = 30;
float speed = 0.05;

void setup() {
  size(120, 120);
  smooth();
}

void draw() {
  float x = offset + cos(angle) * scalar;
  float y = offset + sin(angle) * scalar;
  ellipse( x, y, 40, 40);
  angle += speed;
}

A slight change made to increase the scalar value at each frame produces a spiral, rather than a circle:

float angle = 0.0;
float offset = 60;
float scalar = 2;
float speed = 0.05;

void setup() {
  size(120, 120);
  fill(0);
  smooth();
}

void draw() {
  float x = offset + cos(angle) * scalar;
  float y = offset + sin(angle) * scalar;
  ellipse( x, y, 2, 2);
  angle += speed;
  scalar += speed;
}

In this example, notice that each rectangle is drawn at coordinate (0,0), but they are moved around on the screen, because they are affected by translate():

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

void draw() {
  translate(mouseX, mouseY);
  rect(0, 0, 30, 30);
}

The translate() function sets the (0,0) coordinate of the screen to the mouse location. In the next line, the rect() drawn at the new (0,0) is in fact drawn at the mouse location.

After a transformation is made, it is applied to all subsequent drawing functions. Notice what happens when a second translate command is added to control a second rectangle:

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

void draw() {
  translate(mouseX, mouseY);
  rect(0, 0, 30, 30);
  translate(35, 10);
  rect(0, 0, 15, 15);
}

The smaller rectangle was translated the amount of mouseX + 35 and mouseY + 10.

To isolate the effects of a transformation so they don't affect later commands, use the pushMatrix() and popMatrix() functions. When the pushMatrix() function is run, it saves a copy of the current coordinate system and then restores that system after popMatrix():

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

void draw() {
  pushMatrix();
  translate(mouseX, mouseY);
  rect(0, 0, 30, 30);
  popMatrix();
  translate(35, 10);
  rect(0, 0, 15, 15);
}

In this example, the smaller rectangle always draws in the upper-left corner because the translate(mouseX, mouseY) is cancelled by the popMatrix().

The rotate() function rotates the coordinate system. It has one parameter, which is the angle (in radians) to rotate. It always rotates relative to (0,0), known as rotating around the origin. To spin a shape around its center point, first use translate() to move to the location where you'd like the shape, then call rotate(), and then draw the shape with its center at coordinate (0,0):

float angle = 0.0;

void setup() {
  size(120, 120);
  smooth();
}

void draw() {
  translate(mouseX, mouseY);
  rotate(angle);
  rect(−15, −15, 30, 30);
  angle += 0.1;
}

When translate() and rotate() are combined, the order in which they appear affects the result. The following example is identical to Example 7-19: Rotation, except that translate() and rotate() are reversed. The shape now rotates around the upper-left corner of the display window, with the distance from the corner set by translate():

float angle = 0.0;

void setup() {
  size(120, 120);
  smooth();
}

void draw() {
  rotate(angle);
  translate(mouseX, mouseY);
  rect(−15, −15, 30, 30);
  angle += 0.1;
}

The scale() function stretches the coordinates on the screen. Like rotate(), it transforms from the origin. Therefore, as with rotate(), to scale a shape from its center, translate to its location, scale, and then draw with the center at coordinate (0,0):

float angle = 0.0;

void setup() {
  size(120, 120);
  smooth();
}

void draw() {
  translate(mouseX, mouseY);
  scale(sin(angle) + 2);
  rect(−15, −15, 30, 30);
  angle += 0.1;
}

From the thick lines in Example 7-21: Scaling, you can see how the scale() function affects the stroke weight. To maintain a consistent stroke weight as a shape scales, divide the desired stroke weight by the scalar value:

float angle = 0.0;

void setup() {
  size(120, 120);
  smooth();
}

void draw() {
  translate(mouseX, mouseY);
  float scalar = sin(angle) + 2;
  scale(scalar);
  strokeWeight(1.0 / scalar);
  rect(−15, −15, 30, 30);
  angle += 0.1;
}

In this final and longest transformation example, we've put together a series of translate() and rotate() functions to create a linked arm that bends back and forth. Each translate() further moves the position of the lines, and each rotate() adds to the previous rotation to bend more:

float angle = 0.0;
float angleDirection = 1;
float speed = 0.005;

void setup() {
  size(120, 120);
  smooth();
}

void draw() {
  background(204);
  translate(20, 25);  // Move to start position
  rotate(angle);
  strokeWeight(12);
  line(0, 0, 40, 0);
  translate(40, 0);   // Move to next joint
  rotate(angle * 2.0);
  strokeWeight(6);
  line(0, 0, 30, 0);
  translate(30, 0);   // Move to next joint
  rotate(angle * 2.5);
  strokeWeight(3);
  line(0, 0, 20, 0);

  angle += speed * angleDirection;
  if ((angle > QUARTER_PI) || (angle < 0)) {
    angleDirection *= −1;
  }
}

Here, we don't use a pushMatrix() or popMatrix(), because we want the transformations to propagate—for each transformation to build on the last. The coordinate system is automatically reset to the default when draw() begins each frame.