CompGeoJS Parametric Line

compgeojs-blog

I’ve been traveling on business the last two months, so little time has been available to work on the CompGeoJS project.  A recent break in the routine gave me an opportunity to begin work on parametric curves, the most basic of which is a line in 2D space.  The line equation is merely (1-t)P0 + tP1 where P0 and P1 are vectors.  While a line may appear relatively simple in scope, I devoted a substantial amount of thought to the IPlanarCurve interface that specifies all methods that any parametric curve must implement.  The Curve class serves as a pseudo-abstract base class from which all other planar curves such as Line derive.

CompGeoJS will support up to cubic curves in the 1.0 release, which require a maximum of four control points.  In the case of a line that requires only two points for its definition, accessors for the middle two control points always return zero from the superclass and mutators for these points are empty.

As with all other methods in CompGeoJS, the library encapsulates only the mathematical definition of a parametric line.  While properties may be accessed or changed, all CompGeoJS methods are purely computational in nature and are completely divorced from rendering.  Line rendering is performed with the EaselJS library using Javascript line decorators.  I like to use the Decorator pattern for line drawing since it allows a general rendering system to be easily augmented for different line types such as dotted or dashed.

The LineExample demo uses a solid-line decorator that serves as a placeholder for easy insertion of more complex decorators in future examples.  This demo also brings together EaselJS-based tools such as graph markers and the slice tool.  Interactive markers are used to define endpoints of a line segment.  The slice tool may be moved left and right across the graph to query the natural parameter at the current x-coordinate as well as the point on the line at that parameter.  While only the segment is rendered, the line is completely defined for parameters outside [0,1].

You are welcome to view the Javascript source, which is non-minified and documented. There are even some suggestions for improving the demo.  You may also peruse the IPlanarCurve documentation from the CompGeoJS Documentation page see what methods are available for future parametric curves in the library

Enjoy!


Comments are closed.