Examples and Activities: Polygons and Curves

Computer Science 144
Introduction to Computer Science: Multimedia

Examples and Activities: Polygons and Curves

My generating code is linked in the right column, however you may choose to download a single zipfile with the entire collection, and place it within your Processing sketchbook.

The first set of images are examples discussed in class.

Sketch	My Code
	polychain.pde
	polychain_thick.pde
	polychain_thick2.pde
	polychain_filled.pde
	polygon_filled.pde
	polygon_unfilled.pde

Next, we provide an interactive sketch to help explain the various types of curve vertices that can be used in Processing. For each of these, you can press the 'r' key to randomize the vertices, and you may click and drag on any individual vertex to adjust it.

Sketch Description

Sketch	Description
	This demonstrates a Rom-Catmull spline, which is indicated by series of `curveVertex()` points. Note well that for a curve going through six vertices, you must formally add eight `curveVertex()` entries. The first and last are known as control points. Often, you repeat the first and last actual vertices as the control points, but they can be moved elsewhere to further define the tangents at the ends. Note well that this spline is guaranteed to go directly through all (non-control) points.
	This demonstrate a traditional Bezier spline with two end vertices and two control vertices. Notice that the curve uses two vertices as endpoints, but it does not necessariliy pass directly through the other control points. Although its more difficult to control where the curve passes through, Bezier splines are often preferred for producing more appealing shapes than Rom-Catmull splines. This particular animation demonstrates some of the underpinnings of the geometry of how the control points define the curve. In short, if you take the three lines that connect the sequence of vertices (shown in blue), then connect those three midpoints with two more segments (shown in red), and then connect the two midpoints of those segment with one more segment (shown in green), the spline will pass through the mipoint of that line and will be tangent to it. Note: you may toggle the display of the skeleton with the space key.
	While a portion of a traditional Bezier spline is defined by a quartet of vertex, control vertex, control vertex, vertex, it is possible to make a longer curve by combining such foursomes that intersect at the true vertices. However, there will be discontinuities unless each (control vertex, vertex, control vertex) triple are colinear. In this demonstration, there are two separate Bezier portions, defined by points (1,2,3,4) and by (4,5,6,7). There will be a discontinuity at vertex 4, unless it happens that vertices (3,4,5) are colinear. Note: you may toggle the display of the skeleton with the space key.

This demonstrates a Rom-Catmull spline, which is indicated by series of curveVertex() points. Note well that for a curve going through six vertices, you must formally add eight curveVertex() entries. The first and last are known as control points. Often, you repeat the first and last actual vertices as the control points, but they can be moved elsewhere to further define the tangents at the ends.

Note well that this spline is guaranteed to go directly through all (non-control) points.

This demonstrate a traditional Bezier spline with two end vertices and two control vertices. Notice that the curve uses two vertices as endpoints, but it does not necessariliy pass directly through the other control points.

Although its more difficult to control where the curve passes through, Bezier splines are often preferred for producing more appealing shapes than Rom-Catmull splines.

This particular animation demonstrates some of the underpinnings of the geometry of how the control points define the curve. In short, if you take the three lines that connect the sequence of vertices (shown in blue), then connect those three midpoints with two more segments (shown in red), and then connect the two midpoints of those segment with one more segment (shown in green), the spline will pass through the mipoint of that line and will be tangent to it.

Note: you may toggle the display of the skeleton with the space key.

While a portion of a traditional Bezier spline is defined by a quartet of vertex, control vertex, control vertex, vertex, it is possible to make a longer curve by combining such foursomes that intersect at the true vertices. However, there will be discontinuities unless each (control vertex, vertex, control vertex) triple are colinear.

In this demonstration, there are two separate Bezier portions, defined by points (1,2,3,4) and by (4,5,6,7). There will be a discontinuity at vertex 4, unless it happens that vertices (3,4,5) are colinear.

Note: you may toggle the display of the skeleton with the space key.

We conclude with a series of additional challenges making use of polygons and curves, and in many case, loops.

Sketch	My Code
	staircase_left.pde
	staircase_right.pde
	pyramid.pde
	This particular graph is of the function y = 0.01 * (x-300)² (keep in mind that y-axis in graphics is inverted from traditional mathematical coordinate system) parabola.pde
	This particular graph is of the parametric function defined by x = t * cos(t); y = t * sin(t); as t ranges from 0 to width by a small increment. For more fun, try x = t * cos(kt); y = t sin(k*t); for various choice of constant k. spiral.pde
	hexbricks.pde