To view this content, you need to install Java from java.com

To create new vertices, click and drag a mid point of the control polygon.

Controls:

You may turn on and off any section of the demo using the following hot keys:
b : Toggles the B-Spline Curve
f : Toggles the Four-Point Curve
c : Toggles the constant speed animation
a : Toggles the parametric animation
g : Toggle the control polygon

You may control animations using:
p : pauses the whole thing
q : speed up parametric animations (white circles)
w : slow down parametric animations (white circles)
e : speed up constant animations (green circles)
r : slow down constant animations (green circles)

Effects of editing the polygon:

Sequenced animation screen captures:

Source code: PolygonCurveExample

Built with Processing

Project P1, Part a.

By Devin G Hunt

The purpose of this phase was to introduce the student to curve creation and the code style of graphic systems. The project instructed the student to build a curve designing program that constructed curves from a control polygon that the user could easily interact with. The result is seen on the right. Through the use of a mouse a user can shape the polygon to their liking and observe how the newly formed curves are shaped. The green and white dots are animated using a constant and parametric scheme, respectively.

The application was built using processing, a free source system based off of Java and OpenGL. To ease code creation and processing power the Vert class was created to handle point-type maths, such as midpoint and projection calculations.

The user can grab the yellow circles (handles) with the mouse pointer and dynamically alter the shape of the curves. By clicking on the white midpoint handles the user can create new control points to drastically alter the curves and the animations. Also, for added control the user can turn on and off different visual sections and even pause the application. This allows for easy analysis of the parametric and constant speed animations. All of these controls are explained to the right below the app.

The subdividing of the control polygon into the B-Spline and Four Point curve was accomplished recursively. As depicted below, the B-Spline recursive algorithm used 4 points to compute a span of the curve. To create the span the midpoints between each point is calcualte and that data is used to create a new midpoint to tweak points B and C towards them. For example, point B is tweak to the B` position using the midpoints between A/B and B/C. The algorithm then operates on the three midpoints and the newly created B' and C' to achieve the span. To create a full, closed loop curve, this recursion must be completed over the entirety of the control polygon. This is accomplished by creating a wrapper. The wrapper passes successive points to the recursive algorithm. For example, a control polygon with points A, B, C, and D would need to pass is sets [A, B, C, D], [B, C, D, A], [C, D, A, B], and [D, A, B, C] to create a smooth approximating curve.

The recursive model of the Four-Point Span algorithm is much the same the B-Spline except that six points are needed. As the diagram depicts below, the subdivision scheme is slightly different from the previous B-Spline scheme. First a midpoint is found between a point and its third degree neighbor (A/D, B/E, C/F). Using this midpoint the midpoint between B/C, C/D, and D/E are tweaked away from it by one eighth the distance to create l, m, and n. This produces a smooth interpolating curve that intersects all of the control points. The recursive algorithm can only produces a span of this curve and requires multiple calls by by a wrapper to create a full closed loop curve.

To animate the white circles in a parametric fashion the vertices of each curve's subdivision had to be computed and stored. A fixed time interval was created using the applets internal clock that calls the draw function for the parametric animation. This method, in turn draws a circle at each vertex stored in the curves array sequentially, creating an animated effect. The white circles seem to swoop out quickly across long flat curves and crawl along short curves because the motion of these disks is determined merely by vertex density and not absolute distance traveled.

The constant speed animation is much more complex and allows smooth curve shape-independent movement. The speed of the this animation style is based on a desired time for the green dot to make a full circuit. Using this information a set step distance can be computed to allow for even motion. Projection of the set step onto a curve's subdivision forces even moment, while relay on vertices as keying points produces motion with a pseudo-accelerated look.