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:
In this recipe, we will learn how to draw the following 2D geometric shapes, as filled and stroked shapes:
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"
We will create several geometric primitives using Cinder's methods for drawing in 2D. Perform the following steps to do so:
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;
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 );
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 );
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 );
mStrokeColor
as the drawing color.gl::color( mStrokeColor );
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:
3.138.106.233