Introduction
Drawmetry is a drawing application for creating vector graphics. The saved file format is readable by any application that supports SVG, which includes most web browsers (Internet Explorer, though, requires a plugin) and some other drawing applications such as Inkscape and Visio. What sets Drawmetry apart from other drawing applications, is that it allows the user to express relationships between different parts of a drawing by the use of constraints. These constraints allow for precise positioning the drawing's objects, which are maintained under subsequent modifications of the drawing.
Figure 1 illustrates some of the features of Drawmetry.
Figure 1: A cycloid
The figure shows a screen shot of the application's panel while drawing a cycloid, the curve traced by a point on a circle as the circle rolls along a line. The figure contains 5 point variables marked by five dots; one green (P_0), two yellow (P_1 and P_3) and two red (P_2 and P_4). A point variable can be regarded as the 2-dimensional equivalent of a cell in a spread sheet. Whereas the value of a cell is a number, the value of a point variable is a point. A dot is drawn at the point that is the value of a point variable. This value may be changed by dragging the dot to another place on the screen. Drawmetry names the point variables P_0, P_1, P_2, and so on, as they are introduced into the drawing. Just as with cells in a spreadsheet, point variables may be associated with constraints. For instance, P_1 is associated with the constraint "=horizontal(P_0)". This formula constrains P_1 to be horizontally aligned with P_0. Note that the constraint does not fully determine the value of P_1. Any point on the horizontal line through P_0 satisfies the formula. If P_0 moves, P_1 will follow, making the minimal adjustment necessary to satisfy the constraint. If the user tries to move P_1 by dragging it, P_1 will follow the cursor as closely as possible while remaining horizontally aligned with P_0.
The point variable P_3 is constrained by the formula "=vdistance(P_0, 50)", which keeps P_3 at a vertical distance of 50 points (1 point = 1/72 inch) from P_0. If P_0 moves, then P_3 will make the minimal adjustment that keeps it on a horizontal line 50 points above P_0. If P_3 is dragged, it will follow the cursor as closely as possible, while staying on the horizontal line 50 points above P_0.
The point var P_2 is constrained by the formula "=project(P_3, P_0, P_1)", which places P_2 at the projection of P_3 onto the line through P_0 and P_1. Unlike the horizontal and vdistance constraints, the project constraint fully determines the value of its target P_2.
Finally, P_4 is constrained by the formula "=rotate(P_2, P_3, -distance(P_0, P_2) / 50)". This formula is composed of two sub-formulas; rotate and distance. The formula "=rotate(P_2, P_3, alpha)" , where alpha is a number, places the constraint's target (in this case P_4) at the point obtained by rotating P_2 counter-clockwise around P_3 an angle of alpha (alpha expressed in radians). The length of the arc of circle from P_2 to P_4 is -alpha times the radius 50, which equals the distance from P_0 to P_2. So distance(P_0, P_2) = -alpha * 50, which gives alpha = -distance(P_0, P_2) / 50. Hence, the formula that constrains P_4. If P_3 moves, the positions of P_2 and P_4 are automatically updated to satisfy their constraints.
The five point variables P_0, ..., P_4 are used to keep the parts of the drawing in place. P_0 and P_1 serve as end points of a line segment. Since P_1 is constrained to be horizontally aligned with P_0, the line segment will remain horizontal. The cycloid itself (the red curve) is drawn by tracing P_4 as P_3 is dragged horizontally across the image. This generates hundreds of sample points on the curve, which Drawmetry then uses to automatically generate a path consisting of sequence of Bézier curves that fits the sample points. In Figure 1, the red curve consists of three cubic curves, and the maximum distance between any of the sample points and the red curve is less than 1 point. After the curve is generated, it may be anchored to P_0, which will keep it fixed relatively to P_0. The point variables P_3 and P_4 may be used to anchor the circle. This will keep the circle centered at P_3 and rotating around P_3 as P_4 rotates around P_3.
Note that the dots that are used to indicate the value of the point variables are visual tools used while editing a drawing and are not present when printing the drawing, viewing the drawing in a web browser or exporting the drawing to PNG, JPEG, or GIF format. The colors of the dots have meaning. A green dot signifies that the corresponding point variable is free, i.e., no constraint is associated with it and the point variable can take any point in the 2-dimensional plane as a value. The point variable has two degrees of freedom (DOF) corresponding to the two dimensions of the space in which it can move freely. An orange dot signifies that the corresponding point variable is constrained, but the point variable can still take any value within a 1-dimensional subset of the plane, such a line or a circle. The point variable has thus one DOF. A red dot signifies that the corresponding point variable has zero DOF. Its value is constrained to a finite number (in practice 0, 1, or 2) of possible values. The drawing in Figure 1 has a total of four DOF, two associated with P_0, one with P_1, and one with P_3. These four DOF define the drawing's flexibility. A drawing's flexibility is important when designing reusable drawings that may be included as components into larger drawings.
This introduction has shown some of the key concepts of Drawmetry - point variables, constraints, path generation, anchoring, and degrees of freedom - and how they may be used to create precise shapes and position the shapes precisely relatively to each other while providing desired flexibility to the drawing.