Mastering openFrameworks: Creative Coding Demystified: openFrameworks is the doorway to so many creative multimedia possibilities and this book will tell you everything you need to know to undertake your own projects. You'll find creative coding is simpler than you think.

The screens of modern computers consist of a number of small squares, called pixels (picture elements). Each pixel can light in one color. You create pictures on the screen by changing the colors of the pixels.

The openFrameworks project can draw on the whole screen (when it is in fullscreen mode) or only in a window (when fullscreen mode is disabled). See how to set screen modes in the main.cpp and setup() sections in Chapter 1, openFrameworks Basics. For simplicity, we will call the area where openFrameworks...

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.

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.

In this chapter we will deal with 2D graphics. 2D graphics can be created in the following ways:

Maybe you noted a problem when considering the preceding flower example: drawing primitives by specifying the coordinates of all the vertices is a little cumbersome. There are too many numbers in the code, so it is hard to understand the relation between primitives. To solve this problem, we will learn about using the ofPoint class and then apply it for drawing primitives using control points.

ofPoint is a class that represents the coordinates of a 2D point. It has two main fields: x and y, which are float type.

ofPoint p;

p.x = 100.0;
p.y = 200.0;

Sometimes we need to translate, rotate, and resize drawings. For example, arcade games are based on the characters moving across the screen.

When we perform drawing using control points, the straightforward solution for translating, rotating, and resizing graphics is in applying desired transformations to control points using corresponding mathematical formulas. Such idea works, but sometimes leads to complicated formulas in the code (especially when we need to rotate graphics). The more elegant solution is in using coordinate system transformations. This is a method of temporarily changing the coordinate system during drawing, which lets you translate, rotate, and resize drawings without changing the drawing algorithm.

Up until now we have worked with colors using the functions ofSetColor( r, g, b ) and ofBackground( r, g, b ). By calling these functions, we specify the color of the current drawing and background as r, g, and b values, corresponding to red, green, and blue components, where r, g and b are integer values lying in the range 0 to 255.

These functions are simple, but not enough. Sometimes, you need to pass the color as a single parameter in a function, and also do color modifications like changing the brightness. To solve this problem, openFrameworks has the class ofColor. It lets us operate with colors as we do with single entities and modify these.

ofColor is a class representing a color. It has four float fields: r, g, b, and a. Here r, g, and b are red, green, and blue components of a...

By default, the screen is cleared each time before testApp:draw() is called, so you need to draw all the contents of the screen inside testApp::draw() again and again. It is appropriate in most cases, but sometimes we want the screen to accumulate our drawings. In openFrameworks, you can do this by disabling screen clearing using the ofSetBackgroundAuto( false ) function. All successive drawings will accumulate on the screen. (In this case you should call ofBackground() rarely, only for clearing the current screen).

This method is very simple to use, but is not flexible enough for serious projects. Also, currently it has some issues:

So, when you need to accumulate drawings...

FBO in computer graphics stands for frame buffer object. This is an offscreen raster buffer where openFrameworks can draw just like on the screen. You can draw something in this buffer, and then draw the buffer contents on the screen. The picture in the buffer is not cleared with each testApp::draw() calling, so you can use FBO for accumulated drawings.

In openFrameworks, FBO is represented by the class ofFBO.

The typical scheme of its usage is the following:

Sometimes it is desirable to save the picture drawn by your project in the file. You can do it using tools of your operating system, but it's more comfortable to do it right in your project. So let's see how to save the contents of your project screen to an image file.

For such purposes, we need to use the ofImage class for working with images. Though the class is considered in Chapter 4, Images and Textures, for screen grabbing, it is just enough to understand that the ofImage object holds an image.

The following code saves the current screen to file on the pressing of the Space bar. It should be added to the testApp::keyPressed() function as follows:

//Grab the screen image to file
if ( key == ' ' ) {
  ofImage image;  //Declare image object

  //Grab contents of the screen
  image.grabScreen( 0, 0, ofGetWidth(), ofGetHeight() );  

  image.saveImage( "screen.png" );  //Save image to file
}

The parameters of the image.grabScreen() function specify the rectangle of the grabbing...

In this chapter, we have considered some of the basic topics of 2D drawing. For reading further on openFrameworks 2D capabilities, we suggest the following topics:

For deeper exploration of the world of 2D graphics, we suggest the following topics:

If you are interested in playing with generative art, explore the...

In this chapter we learned how to draw geometrical primitives using control points, perform transformations of the coordinate system, and work with colors. Also, we studied how to accumulate drawings in the offscreen buffer and considered the generative art example of using it. Finally, we learned how to save the current screen image to the file.

In the next chapter we will continue learning 2D graphics and will consider one powerful method of generating fascinating animations and drawings – particle systems.