Drawing is one of the main capabilities of openFrameworks. Here, we consider the basics of 2D graphics, including drawing geometric primitives, working with colors, and drawing in an offscreen buffer. In this chapter we will cover:
- Geometric primitives
- Using ofPoint
- Coordinate system transformations
- Colors
- Using FBO for offscreen drawings
- Playing with numerical instability
- Screen grabbing
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.
Note
Graphics based on pixels is called raster graphics. Another kind of graphics is vector graphics, which is based on primitives such as lines and circles. Today, most computer screens are arrays of pixels and represent raster graphics. But images based on vector graphics (vector images) are still used in computer graphics (for details, see the Images basics section in Chapter 4, Images and Textures). Vector images are drawn on raster screens using the rasterization procedure.
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 can draw, the screen. The current width and height of the screen in pixels may be obtained using the ofGetWidth() and ofGetHeight() functions.
For pointing the pixels, openFrameworks uses the screen's coordinate system. This coordinate system has its origin on the top-left corner of the screen. The measurement unit is a pixel. So, each pixel on the screen with width w and height h pixels can be pointed by its coordinates (x, y), where x and y are integer values lying in the range 0 to w-1 and from 0 to h-1 respectively.
In this chapter, we will deal with two-dimensional (2D) graphics, which is a number of methods and algorithms for drawing objects on the screen by specifying the two coordinates (x, y) in pixels.
Tip
The other kind of graphics is three-dimensional (3D) graphics, which represents objects in 3D space using three coordinates (x, y, z) and performs rendering on the screen using some kind of projection of space (3D) to the screen (2D). For details on 3D graphics, go through Chapter 7, Drawing in 3D.