Chapter 7. Using 2D Graphics

In this chapter, we will learn how to work and draw with 2D graphics and built-in Cinder tools.

The recipes in this chapter will cover the following:

  • Drawing 2D geometric primitives
  • Drawing arbitrary shapes with the mouse
  • Implementing a scribbler algorithm
  • Implementing 2D metaballs
  • Animating text around curves
  • Adding a blur effect
  • Implementing a force-directed graph

Drawing 2D geometric primitives

In this recipe, we will learn how to draw the following 2D geometric shapes, as filled and stroked shapes:

  • Circle
  • Ellipse
  • Line
  • Rectangle

Getting ready

Include the necessary header to draw in OpenGL using Cinder commands.

Add the following line of code at the top of your source file:

#include "cinder/gl/gl.h"

How to do it…

We will create several geometric primitives using Cinder's methods for drawing in 2D. Perform the following steps to do so:

  1. Let's begin by declaring member variables to keep information about the shapes we will be drawing.

    Create two ci::Vec2f objects to store the beginning and end of a line, a ci::Rectf object to draw a rectangle, a ci::Vec2f object to define the center of the circle, and a float object to define its radius. Finally, we will create aci::Vec2f to define the ellipse's radius and two float objects to define its width and height.

    Let's also declare two ci::Color objects to define the stroke and fill colors.

    Vec2f mLineBegin,mLineEnd;
Rect fmRect;
Vec2f mCircleCenter;
float mCircleRadius;
Vec2f mEllipseCenter;
float mElipseWidth, mEllipseHeight;
Color mFillColor, mStrokeColor;
  2. In the setup method, let's initialize the preceding members:
    mLineBegin = Vec2f( 10, 10 );
mLineEnd = Vec2f( 400, 400 );

mCircleCenter = Vec2f( 500, 200 );
mCircleRadius = 100.0f;

mEllipseCenter = Vec2f( 200, 300 );
mEllipseWidth = 200.0f;
ellipseHeight = 100.0f;

mRect = Rectf( Vec2f( 40, 20 ), Vec2f( 300, 100 ) );

mFillColor = Color( 1.0f, 1.0f, 1.0f );
mStrokeColor = Color( 1.0f, 0.0f, 0.0f );
  3. In the draw method, let's start by drawing filled shapes.

    Let's clear the background and set mFillColor to be the drawing color.

    gl::clear( Color( 0, 0, 0 ) );
gl::color( mFillColor );
  4. Draw the filled shapes by calling the ci::gl::drawSolidRect, ci::gl::drawSolidCircle, and ci::gl::drawSolidEllipse methods.

    Add the following code snippet inside the draw method:

    gl::drawSolidRect( mRect );
gl::drawSolidCircle( mCircleCenter, mCircleRadius );
gl::drawSolidEllipse( mEllipseCenter, mEllipseWidth, ellipseHeight );
  5. To draw our shapes as stroked graphics, let's first set mStrokeColor as the drawing color.
    gl::color( mStrokeColor );
  6. Let's draw our shapes again, this time using only strokes by calling the ci::gl::drawLine, ci::gl::drawStrokeRect, ci::gl::drawStrokeCircle, and ci::gl::drawStrokedEllipse methods.

    Add the following code snippet inside the draw method:

    gl::drawLine( mLineBegin, mLineEnd );
gl::drawStrokedRect( mRect );
gl::drawStrokedCircle( mCircleCenter, mCircleRadius );
gl::drawStrokedEllipse( mEllipseCenter, mEllipseWidth, ellipseHeight );

    This results in the following:

    How to do it…

How it works…

Cinder's drawing methods use OpenGL calls internally to provide fast and easy drawing routines.

The ci::gl::color method sets the drawing color so that all shapes will be drawn with that color until another is set by calling ci::gl::color again.

There's more…

You can also set the stroke width by calling the glLineWidth method and passing a float value as a parameter.

For example, to set the stroke to be 5 pixels wide you should write the following:

glLineWidth( 5.0f );
..................Content has been hidden....................

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