Example 8-1: See the Frame Rate

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:

def draw():
  print frameRate

Example 8-2: Set the Frame Rate

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

def 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

def draw():
  print frameRate

Example 8-3: Move a Shape

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

radius = 40.0
x = -radius
speed = 0.5

def setup():
  size(240, 120)
  ellipseMode(RADIUS)

def draw():
  global x
  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.

Example 8-4: Wrap Around

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:

radius = 40.0
x = -radius
speed = 0.5

def setup():
  size(240, 120)
  ellipseMode(RADIUS)

def draw():
  global x
  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 8-1 for a diagram of how it works.

Figure 8-1. Testing for the edges of the window

Example 8-5: Bounce Off the Wall

In this example, we’ll extend Example 8-3 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:

radius = 40.0
x = 110.0
speed = 0.5
direction = 1

def setup():
  size(240, 120)
  ellipseMode(RADIUS)

def draw():
  global x, direction
  background(0)
  x += speed * direction
  if x > width-radius or 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.

Example 8-6: Calculate Tween Positions

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:

startX = 20.0      # Initial x coordinate
stopX = 160.0      # Final x coordinate
startY = 30.0      # Initial y coordinate
stopY = 80.0       # Final y coordinate
x = startX         # Current x coordinate
y = startY         # Current y coordinate
step = 0.005       # Size of each step (0.0 to 1.0)
pct = 0.0          # Percentage traveled (0.0 to 1.0)

def setup():
  size(240, 120)

def draw():
  global x, y, pct
  background(0)
  if pct < 1.0:
    x = startX + ((stopX-startX) * pct)
    y = startY + ((stopY-startY) * pct)
    pct += step
  ellipse(x, y, 20, 20)

Example 8-7: Generate Random Values

The following short example prints random values to the Console, with the range limited by the position of the mouse. As you can see when you run the example, the random() function always returns a floating-point value:

def draw():
  r = random(0, mouseX)
  print r 

Note that the random() function is a Processing function, and behaves differently from the random module included in the Python standard library. See “Python Standard Library” for more information.

Example 8-8: Draw Randomly

The following example builds on Example 8-7; 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:

def setup():
  size(240, 120)

def draw():
  background(204)
  for x in range(20, width, 20):
    mx = mouseX / 10
    offsetA = random(-mx, mx)
    offsetB = random(-mx, mx)
    line(x + offsetA, 20, x - offsetB, 100)

Example 8-9: Move Shapes Randomly

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:

speed = 2.5
diameter = 20
x = 0.0
y = 0.0

def setup():
  global x, y
  size(240, 120)
  x = width/2
  y = height/2

def draw():
  global x, y
  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:

def draw():
  global x, y
  x += random(-speed, speed)
  y += random(-speed, speed)
  x = constrain(x, 0, width)
  y = constrain(y, 0, height)
  ellipse(x, y, diameter, diameter)

Example 8-10: Time Passes

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

def draw():
  timer = millis()
  print timer

Example 8-11: Triggering Timed Events

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:

time1 = 2000
time2 = 4000
x = 0.0

def setup():
  size(480, 120)

def draw():
  global x
  currentTime = millis()
  background(204)
  if currentTime > time2:
    x -= 0.5
  elif currentTime > time1:
    x += 2
  ellipse(x, 60, 90, 90)

Example 8-12: Sine Wave Values

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:

angle = 0.0

def draw():
  global angle
  sinval = sin(angle)
  print sinval
  gray = map(sinval, -1, 1, 0, 255)
  background(gray)
  angle += 0.1

Example 8-13: Sine Wave Movement

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

angle = 0.0
offset = 60.0
scalar = 40.0
speed = 0.05

def setup():
  size(240, 120)

def draw():
  global angle
  background(0)
  y1 = offset + sin(angle) * scalar
  y2 = offset + sin(angle + 0.4) * scalar
  y3 = offset + sin(angle + 0.8) * scalar
  ellipse( 80, y1, 40, 40)
  ellipse(120, y2, 40, 40)
  ellipse(160, y3, 40, 40)
  angle += speed

Example 8-14: Circular Motion

When sin() and cos() are used together, they can produce circular motion. The cos() values provide the x coordinates, and the sin() values provide 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:

angle = 0.0
offset = 60.0
scalar = 30.0
speed = 0.05

def setup():
  size(120, 120)

def draw():
  global angle
  x = offset + cos(angle) * scalar
  y = offset + sin(angle) * scalar
  ellipse( x, y, 40, 40)
  angle += speed