Lesson 3: Where to call background()

Whether to put background() inside of setup() or draw()?

Simply put, if you place a call to background() inside draw(), then it is the equivalent of erasing the screen with each run through draw(), which makes it look like the object is moving because the human eye can't refresh as fast as your computer display and Processing makes a run through draw() with each new frame your computer draws to its screen. On the other hand, if you put the call to background() inside setup(), you will draw over your previous iterations, without erasing them, essentially leaving a trail of an object's previous positions. Check out the program below. It draws a pink display window on which an orange circle is moving back and forth while a black line moves up and down.

float y = 0.0;
float x = 0.0;
float ell_direction = 1;
float line_direction = 1;

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

void draw() {
   background(234, 128, 128);
   frameRate(60);
   stroke(51, 34, 45);
   line(0, y, width, y);
   y = y + (1 * line_direction);
   fill(245, 166, 47);
   ellipse(x, height / 2, 10, 10);
   x = x + (0.5 * ell_direction);
  
   if (x > width || x < 0) {
    ell_direction = ell_direction * (-1);
   }
  
   if (y > height || y < 0) {
     line_direction = -line_direction;
   }
}

Screenshot of the program above running. The call to background() is inside the draw() block

program by E. Richardson, in Processing

Quiz yourself

What would it look like if you cut and pasted the line that says background(234, 128, 128); out of draw() and into setup()?

Click for answer...

The background turns black as the line makes it first downwards pass because the background doesn't get refreshed. The orange circle is still visible because it draws after the line. (The screenshot is on infinite loop here. In the real program the orange circle will continue to go back and forth, but the background will stay black after the line moves down once).