The PrairieDraw library (
PrairieDraw.js) is a figure-drawing library which allows dynamic figures to be rendered through the
pl-prairiedraw-figure element (see here).
Any parameters passed to the script from the
params-names option in the
pl-prairiedraw-figure element can be accessed with
Sylvester.js library and selected methods
PrairieDraw uses the
Sylvester.Vector class to specify positions and directions for drawing; any Vector-type arguments listed below are of this type.
Below is an incomplete selection of useful operations on Vector; the complete documentation is found here.
Creates and returns a new Vector from the array
elements. It is often useful to alias this command in your script as
var $V = Sylvester.Vector.create so you can write
$V([x,y]) later on.
Returns a new Vector which is the sum of the receiver and the argument.
Returns a new Vector which is the difference between the receiver and argument; i.e.,
a.subtract(b) returns the vector difference
Returns a new Vector which is the receiver scaled by the argument.
a.x(k) are equivalent.
Returns the scalar product of the receiver and argument.
Returns a new Vector which is the cross product in left-to-right order; i.e.,
A x B.
Returns the (2)-norm of the vector.
Returns a new Vector which is the receiver scaled to have modulus one.
Returns a new Vector formed by rotating the receiver counterclockwise through
angle (in radians), using the Vector
axis as a center point. E.g.,
a = $V([10,5]); b = $V([5,5]); c = a.rotate(Math.PI / 2, b) // c = [5, 10]
The script provided by
script_name may access the PrairieDraw figure via
this.pd. The operations below allow for changing the orientation or scaling of the figure, as well as adding drawing elements to it.
In general, drawing objects are opaque, so the order in which items are added affects the final appearance of the figure.
Below is an incomplete list of operations available from PrairieDraw; the library source code can be found here.
Constants provided by PrairieDraw
Returns the golden ratio; useful for creating pleasantly-proportioned figures in the arguments to
Returns a conversion factor of 0.621371
Setting and changing the coordinate system
setUnits(xSize, ySize [, canvasWidth, preserveCanvasSize])
Sets the size of the canvas in drawing units, with the origin at the center of the drawing. The optional
canvasWidth argument specifies (in pixels) the width of the figure, while
preserveCanvasSize prevents reshaping the canvas to match the coordinate ratio.
Scale drawing coordinates by the given factor (i.e., the relationship between coordinates and pixels).
Translate the origin of the coordinate system by the Vector
Rotate the coordinate system counterclockwise by
transformByPoints(old1, old2, new1, new2)
Perform a combination of
rotate such that Vector points
old2 are mapped to
Drawing object options
Some drawing objects below have the optional
type argument to specify a physical meaning for the line/arrow. When specified, a corresponding color is chosen for the object based on the TAM 2XX style guide here.
filled argument (default is false) is a boolean to specify if the shape should be shaded.
Drawing points and lines
Draw a point at the coordinates given by
line(start, end [, type])
Draw a line segment from Vector position
polyline(points [, closed, filled])
Draw a series of line segments connecting the array of
points. The optional arguments (defaulting to false) determine if the polyLine should be closed by a line connecting the first and last elements of
arc(center, radius, startAngle, endAngle [, filled, aspect])
Draw an arc of a circle centered at
center, with radius
radius, from angle
endAngle (in radians). When
aspect is provided, the arc is drawn for an ellipse with major axis
radius and minor axis
radius / aspect (i.e.,
aspect is major / minor).
circle(center, radius [, filled])
Draws a circle centered at
center with radius
rectangle(width, height [, center, angle, filled])
Draw a rectangle (aligned to the axes) of the given width and height. When not specified,
center is assumed to be the origin. An
angle to rotate can also be given.
rectangleGeneric(bottomLeft, bottomRight, height)
Draw a rectangle with one side connecting
bottomRight of the given
height. The rectangle extends perpendicular (counter-clockwise) to this line.
Drawing vector arrows
arrow(start, end [, type])
Draw an arrow from
stop (with arrowhead at
arrowFrom(start, offset [, type])
Draw an arrow from
arrowTo(end, offset [, type])
Draw an arrow from
arrowOutOfPage(vector [, type])
Draw an arrow out of the screen (circle with center dot) at
arrowIntoPage(vector [, type])
Draw an arrow into the screen (circle with center x) at
circleArrow(center, radius, startAngle, endAngle [, type, fixedRad, idealSegmentSize])
Draw an arrow arc centerd at
center, with radius
endAngle (in radians). The
fixedRad option (default false) specifies if a constant radius should be used (as opposed to curling in the beginning/end).
circleArrowCentered(center, radius, centerAngle, extentAngle [, type, fixedRad])
Draw an arrow arc centered at
center, with radius
radius, centerd at
centerAngle and spanning
extentAngle (in radians).
triangularDistributedLoad(start, end, startSize, endSize, startLabel, endLabel, arrowToLine, arrowDown)
This creates a (trapezoidal) distributed load acting on the line between
end, with height
startSize at one side and
endSize at the other and corresponding labels
arrowToLine is true if the arrowheads point towards the line between
end, and false otherwise.
arrowDown is true if the arrowheads point down (negative y direction) and false otherwise. These last two options determine whether arrows appear above or below the line.
This function assumes the line from
end is horizontal, and has unexpected behaviors when it does not.
Drawing mechanical shapes
rod(start, end, width)
Draws a rod with endpoint pins at
end. The rounded ends of the rod will extend slightly beyond these points.
LshapeRod(start, middle, end, width)
Draws an L-shaped rod with endpoints
end and corner at
TshapeRod(start, center, end, centerEnd, width)
Draws a T-shaped rod with hinges at the four points listed. To draw a well-formed rod with three arms, let
center be the intersection of the arms and the order
centerEnd represent the clockwise ordering of the three endpoints.
pivot(baseCenter, center, width)
Creates a pivot base with hinge point at
center and other end at
baseCenter. When combined with
baseCenter is usually the midpoint of the ground element.
ground(baseCenter, normal, width)
Draws a (shaded) ground element centered at
baseCenter and width
width. The direction of
normal is perpendicular to and away from the ground.
arcGround(center, radius, startAngle, endAngle, outside)
Draws a curved ground element with arguments similar to the
arc command above.
true if the shading goes on the outside of the curve, and
Drawing text and/or LaTex labels
See below for instructions on formatting the
text argument in these commands.
text(position, anchor, text [, boxed, angle])
Draws text at the given
anchor is a Vector with components from (-1,0,1) specifying alignment; i.e.,
$V([-1,-1]) corresponds to "left" and "bottom" alignment for the text;
$V([1,1]) corresponds to "right" and "above". Optional
boxed frames the text, and
angle rotates it in place.
labelLine(start, end, pos, text [, anchor])
Places text along the line between
pos takes values in local coordinates from (-1,1) specifying the position along and above/below the line. The optional
anchor uses the same pattern as above.
labelCircleLine(center, radius, startAngle, endAngle, pos, text)
Places text along the arc specified by
pos takes values in local coordinates from (-1,1) along and above/below the curve.
Generating LaTeX labels on figures
PrairieDraw.js to draw figures in questions, figure labels can be included using either plain text, like
pd.text(..., "label"), or with LaTeX, like
pd.text(..., "TEX:$x$"). If you are using LaTeX labels then they have to be rendered into image files before they can be displayed. This is done by running the command:
docker run -it --rm -v PATH_TO_MY_COURSE:/course prairielearn/prairielearn /PrairieLearn/tools/generate_text.py
PATH_TO_MY_COURSE above with your local course path directory, such as
LaTeX labels are searched for by looking for strings of the form
'TEX:...' (note the different quote types). Use the
"" form if you want to have
' characters in the string itself, and vice versa.
The above command needs to be repeated after any LaTeX labels are added or changed in questions.
The LaTeX label images will be filenames that look like:
pl-tam212/questions/QID/text/186b41e2a92b8b22694dda1305699937df032555.png pl-tam212/questions/QID/text/186b41e2a92b8b22694dda1305699937df032555_hi.png pl-tam212/questions/QID/text/d68de4af4e4de5858554f8a90c5a519d9d435589.png pl-tam212/questions/QID/text/d68de4af4e4de5858554f8a90c5a519d9d435589_hi.png
These files should be committed to the
git repository and pushed to the live server so that they are available along with the question.
Advanced: Running without Docker
cd <FULL-PATH>/PrairieLearn python tools/generate_text.py --subdir /path/to/course