Quadrilateral demo - Cassowary Javascript

By Greg J. Badros

Refactored and optimized by Alex Russell

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. Implementations exist in many other lanuages (C++, Java, Smalltalk) with wrappers for others (Guile Scheme, 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, Firefox 9+, Opera 11+, IE 9, Safari 5+, and Safari on an iPad 2. See the source to the demo.