The background color of the screen

The drawing on the screen in openFrameworks should be performed in the testApp::draw() function (see the testApp.cpp section in Chapter 1, openFrameworks Basics). Before this function is called by openFrameworks, the entire screen is filled with a fixed color, which is set by the function ofSetBackground( r, g, b ). Here r, g, and b are integer values corresponding to red, green, and blue components of the background color in the range 0 to 255. Note that each of the ofSetBackground() function call fills the screen with the specified color immediately.

Tip

You can make a gradient background using the ofBackgroundGradient() function. See its description in the The triangles cloud example section in Chapter 7, Drawing in 3D.

You can set the background color just once in the testApp::setup() function, but we often call ofSetBackground() in the beginning of the testApp::draw() function to not mix up the setup stage and the drawing stage.

Pulsating background example

You can think of ofSetBackground() as an opportunity to make the simplest drawings, as if the screen consists of one big pixel. Consider an example where the background color slowly changes from black to white and back using a sine wave.

Note

This is example 02-2D/01-PulsatingBackground.

The project is based on the openFrameworks emptyExample example. Copy the folder with the example and rename it. Then fill the body of the testApp::draw() function with the following code:

float time = ofGetElapsedTimef();  //Get time in seconds

//Get periodic value in [-1,1], with wavelength equal to 1 second
float value = sin( time * M_TWO_PI );

//Map value from [-1,1] to [0,255]
float v = ofMap( value, -1, 1, 0, 255 );

ofBackground( v, v, v );          //Set background color

This code gets the time lapsed from the start of the project using the ofGetElapsedTimef() function, and uses this value for computing value = sin( time * M_TWO_PI ). Here, M_TWO_PI is an openFrameworks constant equal to 2π; that is, approximately 6.283185. So, time * M_TWO_PI increases by 2π per second. The value 2π is equal to the period of the sine wave function, sin(). So, the argument of sin(...) will go through its wavelength in one second, hence value = sin(...) will run from -1 to 1 and back. Finally, we map the value to v, which changes in range from 0 to 255 using the ofMap() function, and set the background to a color with red, green, and blue components equal to v.

Tip

See the descriptions of the ofGetElapsedTimef() and ofMap() functions in the Basic utility functions section in Chapter 1, openFrameworks Basics.

Run the project; you will see how the screen color pulsates by smoothly changing its color from black to white and back.

Tip

Replace the last line, which sets the background color to ofBackground( v, 0, 0 );, and the color will pulsate from black to red.

Replace the argument of the sin(...) function to the formula time * M_TWO_PI * 2 and the speed of the pulsating increases by two times.

We will return to background in the Drawing with an uncleared background section. Now we will consider how to draw geometric primitives.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset