jb-1980 edited this page Jul 2, 2013 · 13 revisions

In order to create geometry shapes you need to include graphie-geometry.

There are two classes you can use, Triangle and Quadrilateral.


  • Triangle( center, angles, scale, labels, points ) Normally when creating a triangle you would not specify points. If you specify points center, angles, and scale are ignored and instead of calculating a new triangle, a triangle is constructed from points already on the screen. Very useful, as you can for example create a Parallelogram, and then use the points constructor to create two opposite triangles and then label them, thereby easily labeling the diagonal and bisected angles as well.

Useful Triangle/Quadrilateral methods:

  • draw() - Renders the triangle inside graphie

  • drawLabels() - Renders the labels inside graphie

  • boxOut( pol, amount, type ) - If the triangle intersects the given polygon, it will translate by the given amount until no longer so. Useful for putting multiple shapes on screen and making sure they do not overlap. Also useful for making sure the triangle fits inside graphie bounds

  • rotate( amount ) - Rotate the triangle by the given amount in degrees

  • translate( [x, y ] ) - Translate the triangle by the given point

Various helper methods

  • lineLength( line )

  • dotProduct( a,b )

  • isPointOnLineSegment( line, point, precision )

  • findPointsOnLine( line, [ points ] ) - Returns an array of all the points that were on the given line

  • areIntersecting( polygon1, polygon2 ) - Only works for convex polygons

  • findIntersection( line1, line2 ) - Returns an intersection of two lines, and whether that point is inside both line segments¬

  • checkDuplicate( arr, el ) - Checks whether there are duplicate points in an array¬

  • pointLineDistance( p, l )

  • reflectPoint( l, p ) - Reflects a point p over line l

  • linePathIntersection( l, p ) - Returns an array of points where a path intersects a line

  • clearArray( array, indices ) - Return an array that only keeps elements with specified indices and makes all others ""

  • mergeArray( arr1, arr2 ) - Puts element from arr2 into arr1 if element in arr1 is ""


Labeling triangles and quadrilaterals is done by setting the labels property of the object and calling drawLabels(). Labels is an object with possible properties of 'name', 'angles', 'sides', 'points'. All of those except name are arrays with the values to be printed. For example sampleTriangle.labels = { 'angles' = [ 30, 60, 90 ] }

Useful functions are mergeArray and clearArray. Using clearArray we can easily randomize labels and problems. Lets say variable ANGLE denotes which angle the user should solve for. { 'angles' = clearArray( ["?", "?", "?" ], [ ANGLE ] ) }, gives us [ "?", "","" ] if ANGLE is 0, so we print the question mark only on the first angle.

Another example: mergeArray( clearArray( [ "x", "x", "x" ], [ ANGLE ] ), ["a","b","c" ] ), where ANGLE is 1, gives [ "a", "x", "c" ].