Cinder Path2d

Features Of Cinder

Cinder provides the following features:

• Core platform features (IO, networking, touch, etc.)
   
• 3D Graphics (OpenGL)
   
• 2D Graphics (SVG, Fonts, Image Handling)
   
• Math libraries
   
• Media (Video, Audio, OpenCV)
   
• ImGUI integration
   

Let us now discover Cinder Path2D.

Cinder Path2D

Path2D is one of the most powerful utilities offered by Cinder. The Path2d class represents a contour comprised of line segments and quadratic and cubic Beziér curves. 

We will now learn about Path2D objects, starting with the basics.

Points And Segments

An instance of Path2D consists of points and segments. Points and segments can be defined as follows:

• A point is a 2D location that indicates where a line segment begins or ends. It also refers to the coordinates of a handle that defines the path's curve.
   
• A segment in Path2D is a line segment defined by the start/end points and handles' positions.
   

There are five types of segments in Cinder Path2D. Let us now learn about them.

Types Of Segments

The types of segments are as follows:

 MOVETO

 It consists of a single point from which you can start or continue your drawing. Every path must begin with a MOVETO segment.

Example:

// Using the moveTo function.
Path2d myPath;
myPath.moveTo( vec2(650.0f, 190.0f ) );
gl::draw( myPath ) 

LINETO

It consists of a single point that constructs a line from the preceding point

Example: 

// Using the lineTo function.
Path2d myPath;
myPath.moveTo( vec2( 200.0f, 60.0f ) );
myPath.lineTo( vec2( 400.0f, 150.0f ) );
gl::draw( myPath );

QUADTO

It allows us to make a quadratic bezier curve with a single center handle point and one endpoint

Example:

// Using the quadTo function.
Path2d myPath;
myPath.moveTo( vec2( 200.0f, 1500.0f ) );
myPath.quadTo( vec2( 200.0f, 60.0f ), vec2( 400.0f, 60.0f ) );
gl::draw( myPath );

CUBICTO

It allows us to make a quadratic Belize curve consisting of two handle points. One controls the curve from the initial point. Other controls the curve going into the given endpoint.

Example:

// Using the cubicTo function.
Path2d myPath;
myPath.moveTo( vec2( 200.0f, 190.0f ) );
myPath.curveTo( vec2( 300.0f, 170.0f ), vec2( 300.0f, 60.0f ), vec2( 400.0f, 60.0f ) );
gl::draw( myPath );

CLOSE

We can create a line between the starting and ending points of a path with the help of CLOSE.

Example:

// Using the close function
Path2d myPath;
myPath.moveTo( vec2( 150.0f, 170.0f ) );
myPath.lineTo( vec2( 300.0f, 60.0f ) );
myPath.lineTo( vec2( 450.0f, 170.0f ) );
myPath.close();
gl::draw( myPath );

Let's take a look at the Cinder Path2d drawing functions now.

Drawing Functions

Cinder offers a variety of drawing functions for us to use. These functions result in constructing a path using the basic segment types. There are many drawing functions in Cinder Path2D. Let us learn more about them.

Types Of Drawing Functions

The basic drawing functions are as follows:

MOVETO

This function redirects Path2D to the starting point. All the further drawing functions will continue from here. This function accepts one coordinate as an argument and returns MOVETO segment.

LINETO 

This function allows you to draw a line from the previous path to the given path. It accepts one co-ordinate as an argument and returns LINETO segment.

Example:

// Using the lineTo function for drawing.
Path2d myPath;
myPath.moveTo( vec2( 300.0f, 220.0f ) );
myPath.lineTo( vec2( 400.0f, 320.0f ) );
myPath.lineTo( vec2( 500.0f, 220.0f ) );
myPath.lineTo( vec2( 600.0f, 320.0f ) );
myPath.lineTo( vec2( 700.0f, 220.0f ) );
gl::draw( myPath );

QUADTO

We can draw a quadratic bezier curve with the help of this function. It accepts one central handle point and one endpoint as an argument and results in a QUADTO segment.

Example:

// Using the quadTo function for drawing.
Path2d mPath;
myPath.moveTo( vec2( 230.0f, 315.0f ) );
myPath.quadTo( vec2( 230.0f, 225.0f ), vec2( 320.0f, 225.0f ) );
myPath.quadTo( vec2( 320.0f, 315.0f ), vec2( 410.0f, 315.0f ) );
myPath.quadTo( vec2( 410.0f, 225.0f ), vec2( 500.0f, 225.0f ) );
myPath.quadTo( vec2( 500.0f, 315.0f ), vec2( 590.0f, 315.0f ) );
myPath.quadTo( vec2( 590.0f, 225.0f ), vec2( 680.0f, 225.0f ) );
myPath.quadTo( vec2( 680.0f, 315.0f ), vec2( 770.0f, 315.0f ) );
gl::draw( myPath );

CURVETO

We can draw a cubic bezier curve with the help of this function. This function takes two handle points and one endpoint as arguments and results in a CUBICTO segment.

Example:

// Using the curveTo function for drawing.
Path2d myPath;
myPath.moveTo( vec2( 300.0f, 74.0f ) );
myPath.curveTo( vec2( 350.0f, 74.0f ), vec2( 400.0f, 214.0f ), vec2( 400.0f, 264.0f ) );
myPath.curveTo( vec2( 400.0f, 414.0f ), vec2( 600.0f, 414.0f ), vec2( 600.0f, 264.0f ) );
myPath.curveTo( vec2( 600.0f, 214.0f ), vec2( 650.0f, 74.0f ), vec2( 700.0f, 74.0f ) );
gl::draw( myPath );

ARC 

This function also results in a CUBICTO segment. It accepts the start angle(in radians), the end angle(in radians), and an optional boolean to set the direction of the arc. The boolean argument is set to true by default, which results in the forward movement of the arc. If you want the arc in a backward direction, you can pass a boolean value of false as an argument to this function.

Example:

// Using the arc function for drawing.
Path2d myPath;
myPath.arc( vec2( 500.0f, 270.0f ), 200.0f, M_PI * 0.5f, M_PI * 0.0f, true );
gl::draw( myPath );

ARCTO

This function creates a rounded corner by drawing a line segment from the current point toward the first point given. This segment ends in an arc with the provided radius, the end of which is tangent to the line segment that connects the two specified points. This function accepts a target point, a tangent position, and a radius as arguments. It results in a path consisting of LINETO and CUBICTO segments.

Example:

// Using the arcTo function for drawing.
Path2d myPath;
myPath.moveTo( vec2( 488.0f, 345.0f ) );
myPath.arcTo( vec2( 638.0f, 105.0f ), vec2( 488.0f, 105.0f ), 35.0f );
gl::draw( myPath );

You can use a combination of all these functions to create drawings. Now let us move further and look at some advanced functions of Cinder Path2D.

Advanced Functions

Cinder allows you to let your creative side out with the help of these advanced functions. Path2D offers a lot of advanced functions for you to use. Let's take a look at some of them.

Types of Advanced Functions

The following are some advanced Cinder Path2d functions:

CALCBOUNDINGBOX

This function identifies all handle point positions and calculates the path's bounding box.

Example:

// Example of using the calcBoundingBox() function.
Path2d myPath;
myPath.moveTo( vec2( 377.0f, 343.0f ) );
myPath.curveTo( vec2( 333.0f, 292.0f ), vec2( 424.0f, 284.0f ), vec2( 440.0f, 252.0f ) );
myPath.curveTo( vec2( 451.0f, 230.0f ), vec2( 460.0f, 91.0f ), vec2( 505.0f, 91.0f ) );
myPath.curveTo( vec2( 550.0f, 91.0f ), vec2( 558.0f, 213.0f ), vec2( 566.0f, 243.0f ) );
myPath.curveTo( vec2( 578.0f, 286.0f ), vec2( 665.0f, 316.0f ), vec2( 626.0f, 348.0f ) );
myPath.curveTo( vec2( 587.0f, 380.0f ), vec2( 544.0f, 336.0f ), vec2( 501.0f, 336.0f ) );
myPath.curveTo( vec2( 462.0f, 336.0f ), vec2( 401.0f, 371.0f ), vec2( 377.0f, 343.0f ) );
myPath.close();
gl::draw( myPath );
gl::drawStrokedRect( myPath.calcBoundingBox() );

CALCPRECISEBOUNDINGBOX

This function also calculates the bounding box of the path but does not include the positions of handle points in it.

Example:

// Example of using the calcPreciseBoundingBox() function.
Path2d myPath;
myPath.moveTo( vec2( 377.0f, 343.0f ) );
myPath.curveTo( vec2( 333.0f, 292.0f ), vec2( 424.0f, 284.0f ), vec2( 440.0f, 252.0f ) );
myPath.curveTo( vec2( 451.0f, 230.0f ), vec2( 460.0f, 91.0f ), vec2( 505.0f, 91.0f ) );
myPath.curveTo( vec2( 550.0f, 91.0f ), vec2( 558.0f, 213.0f ), vec2( 566.0f, 243.0f ) );
myPath.curveTo( vec2( 578.0f, 286.0f ), vec2( 665.0f, 316.0f ), vec2( 626.0f, 348.0f ) );
myPath.curveTo( vec2( 587.0f, 380.0f ), vec2( 544.0f, 336.0f ), vec2( 501.0f, 336.0f ) );
myPath.curveTo( vec2( 462.0f, 336.0f ), vec2( 401.0f, 371.0f ), vec2( 377.0f, 343.0f ) );
myPath.close();
gl::draw( myPath );
gl::drawStrokedRect( myPath.calcPreciseBoundingBox() );

CONTAINS

This function allows you to find out whether a given point lies in the area of the path.

Example:

// Example of using the contains() function.
Path2d myPath;

// Creating a drawing.
myPath.moveTo( vec2( 377.0f, 343.0f ) );
myPath.curveTo( vec2( 333.0f, 292.0f ), vec2( 424.0f, 284.0f ), vec2( 440.0f, 252.0f ) );
myPath.curveTo( vec2( 451.0f, 230.0f ), vec2( 460.0f, 91.0f ), vec2( 505.0f, 91.0f ) );
myPath.curveTo( vec2( 550.0f, 91.0f ), vec2( 558.0f, 213.0f ), vec2( 566.0f, 243.0f ) );
myPath.curveTo( vec2( 578.0f, 286.0f ), vec2( 665.0f, 316.0f ), vec2( 626.0f, 348.0f ) );
myPath.curveTo( vec2( 587.0f, 380.0f ), vec2( 544.0f, 336.0f ), vec2( 501.0f, 336.0f ) );
myPath.curveTo( vec2( 462.0f, 336.0f ), vec2( 401.0f, 371.0f ), vec2( 377.0f, 343.0f ) );
myPath.close();


int column = floor( getWindowWidth() / 15 ) - 1;
int row = floor( getWindowHeight() / 15 ) - 1;

// Using the contains function
for( int i = 0; i < column; i++ ) {
	for( int j = 0; j < row; j ++ ) {
		vec2 pt( 15.0 + ( i * 15.0 ), 16.0 + ( j * 15.0 ) );
		Color fill = myPath.contains( pt ) ? Color( 1.0, 0.0, 0.0 ) : Color( 0.8, 0.8, 0.8 );
		gl::color( fill );
		gl::drawSolidCircle( pt, 5 );
	}
}

TRANSFORMED

This function returns a copy of the path that has been converted using the specified transform matrix.

Example:

// Example of using the transformed() function.
// Creating a drawing.
Path2d myPath;
myPath.moveTo( vec2( -8.8f, -0.0f ) );
myPath.curveTo( vec2( 15.0f, 15.0f ), vec2( 35.0f, 35.0f ), vec2( 50.0f, 50.0f ) );
gl::draw( myPath );

// Using the transformed function.
gl::pushMatrices();
for( int i = 0; i < 8; i++ ){
	gl::translate( vec2( 400.0f, 170.0f ) );
	MatrixAffine2<float> matrix;
	matrix.scale( 1.3f );
	matrix.rotate( ( ( M_PI * 2) / 8 ) * i );
	auto copy = myPath.transformed(matrix);
	gl::draw( copy );
}
gl::popMatrices();

SUBDIVIDE

This function returns an array of points that, according to the specified tolerance, subdivide the path's curves into smaller segments.

Example:

// Example of using subdivide() function.
gl::enableAlphaBlending();
gl::color( 0, 0, 0 );

// Creating a drawing.
Path2d myPath;
myPath.moveTo( vec2( 575.0f, 220.0f ) );
myPath.curveTo( vec2( 575.0f, 30.0f ), vec2( 425.0f, 105.0f ), vec2( 500.0f, 270.0f ) );
myPath.curveTo( vec2( 575.0f, 345.0f ), vec2( 425.0f, 420.0f ), vec2( 425.0f, 320.0f ) );
gl::draw( myPath );

// Using the subdivide function.
auto sdiv = myPath.sdiv( 0.6f );
for( auto i : sdiv ) {
gl::color( ColorA( 0, 0, 0, 0.4 ) );
gl::drawSolidCircle( i, 5.0 );
};

That was all there was to Cinder Path2D. Let us now address some frequently asked questions.

Frequently Asked Questions

What is Cinder?

Cinder is a library designed for professional creative coding in C++. It is a free and open-source community-driven library.

When was Cinder released?

Cinder was released as a public tool in 2010 as a free and open-source library.

What is the use of Cinder?

Creative coding in C++ is not accessible without an external library. Cinder is a library that allows users to do creative coding in C++.

What is creative coding?

Software, code, and computational processes are used in creative coding to express oneself or produce works of art. Creative coding is considered to be more aesthetic than functional.

What is Cinder-Path2D?

Path2D is one of the most powerful utilities offered by Cinder. The Path2d represents a contour comprised of line segments and quadratic and cubic Beziér curves. 

Conclusion

We learned about Cinder Path2D in this article. We have covered points and segments, drawing functions, and advanced functions used in Path2D.

We hope this article helps you on your journey. You can refer to these articles related to Cinder by Coding Ninjas.

• Audio in Cinder
• Cinder + Git
• Cinder Blocks
   

You can refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, System Design, and many more!

Head to our practice platform, Coding Ninjas Studio, to practice top problems, attempt mock tests, read interview experiences and interview bundles, follow guided paths for placement preparations, and much more!

Happy coding, Ninja!