Part 1: Path2D Basics

Introduction

Cinder's Path2D API is one of Cinder's most powerful yet most underused utilities. This guide will walk through what a Path2D object is from the nuts and bolts and work through some of the more advanced functions. Each part has an interactive portion with code snippets that you can cut and paste into Cinder's draw function. You can use the templates and samples in this repo to get started.

Points and Segments

A Path2D instance is constructed of points and segments. A point refers to a 2D coordinate of where a line segment starts or ends as well as a coordinate of a handle that defines the curve of the path. A segment refers to the line segment as defined by the positions of the start/end points and handles. The types of segments are:

  • MOVETO: Consists of a single point to start or continue your drawing from. Every path must start with a MOVETO segment.
  • LINETO: Consists of a single point which contructs a line from the previous point
  • QUADTO: A quadratic bezier curve consisting of 1 central handle point and 1 end point
  • CUBICTO: A cubic bezier curve consisting of one handle point that controls the curve from the previous point and one handle point controlling the curve going into the given end point.
  • CLOSE: A line created between the first and last points of a path.