Quadrilateral demo - Cassowary Javascript

By Greg J. Badros

The below is a new (as of May 2011) all-javascript implementation of the bounded quadrilateral demonstration that was first released as part of the Cassowary constraint solving toolkit. In addition to Javascript, there are also C++, Java, and Smalltalk implementations, and the C++ implementation is wrapped for use with Guile Scheme (see also Scwm) and Python. See the full paper on the Cassowary algorithm by Alan Borning and Greg Badros.

In this demo, dozens of declarative constraints are used to represent an arbitrary quadrilateral, the midpoints of the four vertices, and the fact that the end points need to stay in the bounding rectangle of the canvas. Mouse/touch gestures on any of the eight control points allow you to move that control point, and the entire constraint system is incrementally re-solved as you drag the control point. You will see real-time evidence that the "interior" quadrilateral is always a parallelogram.

Tested on Chrome 11 on Windows, Firefox 4.0.1 on Windows, Safari on an iPad 2. See the source to the demo (in CVS).