EARTH 801
Computation and Visualization in the Earth Sciences

(link is external) (link is external)

Lesson 3: Where to call background()

PrintPrint

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;
   }
}
orange circle moves left to right, black line moves up and down on pink background, see caption
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...