How about adding some circles to the composition? Add the following lines after the last drawLine call:

gl::drawSolidCircle( Vec2f(getWindowWidth()/2,
  getWindowHeight()/2), 50 );

After you compile and run the application, you should see a circle in the middle of the screen. The drawSolidCircle() function takes two parameters. First is the position of the center of the circle. Second is the radius of the circle. We define the position by using the Vec2f object again. As you can see, we use getWindowWidth() and getWindowHeight() again. This time we need them to get the center coordinates of the screen. We get it by dividing the window's width and height by 2. Again, by using these methods we make sure that our circle will be drawn in the middle of the screen no matter what size the window is.

There is a shorter way to do this though that is by using the getWindowCenter() method. If we use it, we get the same result but the code looks a bit more clear:

gl::drawSolidCircle( getWindowCenter(), 50 );

Let's change the color of the circle to something else. You can chose your own color, but I will use magenta this time. Add the following line of code right before the drawSolidCircle() function call:

gl::color( 1, 0, 1 ); // set color to magenta

Try to experiment with the position, radius, and color of the circle. Try to draw more than one shape and also try giving them different colors.

What if we want to draw just the outline of the circle? Cinder has a separate function for this called drawStrokedCircle(). After the drawSolidCircle() function add another line of code as follows:

gl::drawStrokedCircle( getWindowCenter(), 100 );

Similar to the drawSolidCircle() function, drawStrokedCircle() also takes two parameters—position and radius. The difference is just that it draws just the outline. The outline has the same thickness that we defined earlier with the help of the glLineWidth() function. Let's change it to something else by adding the following line of code just before the drawStrokedCircle() line:

glLineWidth( 4 );

Compile and run the project, and see what happens. You should see a screen similar to the following screenshot:

There is a hidden third parameter for the drawSolidCircle() and drawStrokedCircle() functions. As the circles are drawn by using triangles, each time a circle is being drawn, it has to be decided how many triangles to use. Cinder does it automatically but it is possible to define the triangle count by ourselves. So let's change the amount of triangle segments:

gl::color( 1, 0, 1 ); // set color to magenta
gl::drawSolidCircle( getWindowCenter(), 50, 5 );
glLineWidth( 4 );
gl::drawStrokedCircle( getWindowCenter(), 100, 5 );

Note the highlighted parts of the code. We told the circle drawing functions to draw circles by using just five triangles. By doing this we get pentagons instead of circles. Compile and run the project to see it yourself!

Try to experiment with all the properties to get the most out of it. You can draw almost any kind of regular polygon shape with this function.