To represent some point, just declare an object of the ofPoint class.

ofPoint p;

To initialize the point, set its coordinates.

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

Or, alternatively, use the constructor.

p = ofPoint( 100.0, 200.0 );

You can operate with points just as you do with numbers. If you have a point q, the following operations are valid:

There are a number of useful functions for simplifying 2D vector mathematics, as follows:

All functions' drawing primitives have overloaded versions working with ofPoint:

We are ready to solve the problem stated in the beginning of the Using ofPoint section. To avoid using many numbers in drawing code, we can declare a number of points and use them as vertices for primitive drawing. In computer graphics, such points are called control points.

Let's specify the following control points for the flower in our simplest flower example:

Now we implement this in the code.

Add the following declaration of control points in the testApp class declaration in the testApp.h file:

ofPoint stem0, stem1, stem2, stem3, leftLeaf, rightLeaf;

Then set values for points in the testApp::update() function as follows:

stem0 = ofPoint( 300, 100 );
stem1 = ofPoint( 300, 270 );
stem2 = ofPoint( 300, 300 );
stem3 = ofPoint( 300, 400 );
leftLeaf = ofPoint( 200, 220 );
rightLeaf = ofPoint( 400, 220 );

Finally, use these control points for drawing the flower in the testApp::draw() function:

ofBackground( 255, 255, 255 );           //Set white background
ofSetColor( 0, 0, 0 );                   //Set black color

ofCircle( stem0, 40 );                   //Blossom
ofLine( stem0, stem3 );                  //Stem
ofTriangle( stem1, stem2, leftLeaf );    //Left leaf
ofTriangle( stem1, stem2, rightLeaf );   //Right leaf

You will observe that when drawing with control points the code is much easier to understand.

Furthermore, there is one more advantage of using control points: we can easily change control points' positions and hence obtain animated drawings. See the full example code in 02-2D/03-FlowerControlPoints. In addition to the already explained code, it contains a code for shifting the leftLeaf and rightLeaf points depending on time. So, when you run the code, you will see the flower with moving leaves.