Constraint-Based Quadrilateral Demonstration

Applet:

The screen images and applet demonstrate a theorem about quadrilaterals, which is often used as a demonstration of constraint-based graphics. The theorem states that if one takes an arbitrary quadrilateral, bisects each side, and draws lines between the midpoints, the result is a parallelogram. The hypotheses of this theorem are expressed using required constraints that the x and y value of each midpoint is the average of the x and y values of the respective endpoints. To add a bit of complication, there are also required inequality constraints to keep all the points inside the demo window. When you move over an endpoint or midpoint and hold the mouse button down, this in effect adds a constraint that the selected point follow the mouse. This mouse constraint is strong but not required, so that if you try to move outside the window the selected point will bump against the side and stop. Notice the effect when you move a midpoint near the edge of the window. Finally, there are weak stay constraints on the x and y parts of each endpoint so that the solver tries to leave the endpoints at their current positions if possible.

The four screen images are from a demo that uses a Smalltalk implementation of the Cassowary constraint satisfaction algorithm. Cassowary is described in "Solving Linear Arithmetic Constraints for User Interface Applications".

The Java constraint satisfaction code for the applet was generated automatically from a list of the constraints using a constraint compilation algorithm based on projection and implemented by Warwick Harvey. The projection algorithm is described in the paper "Compiling Constraint Solving using Projection". The other portions of the applet were written by Richard Lin.