Animation Documentation

Canvas

    
        <PrairieDrawCanvas id="<canvasId>" width="xxx" height="yyy">
                    
                    </PrairieDrawCanvas>
    

Method 1: Script

On this website, JavaScript files are used to create and control animations. These files are stored in the public directory and are linked to indiviudal pages using script tags. To populate a PrairieDraw canvas with items and drawings, you'll need to create a .js file in the public folder and reference it in your corresponding .astro file. This JavaScript file should contain the function calls that define and animate your PrairieDraw elements. Use this method if you plan on having a lot of functions for one page.

    
        public
            |--> <course_abbreviation>
                 |--> <page_1>
                      |--> <script_name>.js
            src
            |--> components
            |--> layouts
            |--> pages
                 |--> <course_abbreviation>
                      |--> <page_1>.astro
    

Wrapper: This block is required and should be the first thing in your .js script. It ensures that your JavaScript only runs after the page has fully loaded. All your PrairieDraw functions must go inside this block:

    
        $(document).ready(function(){
                       
                       })
    

Script Tag: To link to the JavaScript file. (Place this at the very bottom of your .astro file)

    
        <script src="/about/testing/canvases.js" is:inline></script>
    

    
        <variableName> = new PrairieDrawAnim("<canvasId>", function() {
                        // Logic goes here
                        });
    

Method 2: Javascript in Astro

Once your define a canvas within the template, you can embed the corresponding Javascript code for interacting with that canvas directly within the same component using a script tag. Use this method for a short and quick method to access the animations.

    
        <script type="application/javascript" is:inline>
                           <variableName> = new PrairieDraw("canvasid>", function () {
                            
                            });
                    </script>
    

Creating a canvas and assigning a variable to it allows   to redraw the canvas for resizing later.

Arrows

Arrows show vectors with arrow(start, end, type), where start and end are vectors and type is an optional string indicating the meaning of the arrow, which determines its color (e.g., "position", "velocity", etc.). If type is not given then the arrow is drawn in black.

Circle arrows show angles with circleArrow(center, radius, startAngle, endAngle, type). The specified radius of a circle arrow is the radius at the center of the arrow, and the actual radius increases along the arrow. This means that even if the angle is greater than a full circle, the arrow can still represent the angle accurately.

    
        circleArrow = new PrairieDraw("circleArrow", function() {
           this.setUnits(6, 6);
           var O = $V([0, 0]);
        
           this.arrow(O, this.vector2DAtAngle(0).x(2.7), "position");
           this.arrow(O, this.vector2DAtAngle(3/4 * Math.PI).x(2.7));
           this.circleArrow(O, 2, 0, 3/4 * Math.PI, "angMom");
           this.circleArrow(O, 1, 0, 11/4 * Math.PI);
        });
    

Points

Add a point with point(position), where position should be a vector.

    
        points = new PrairieDraw("point", function () {
           this.setUnits(6, 6);
           var O = $V([0, 0]);
    
           for(let i=0; i<5; i++){
              this.point(O.add($V([i-2, 2-i])));
           }

        });
    

Text

Text can be drawn using this.text(position, anchor, textString, boxed, angle, height, width), which provides the position in 2D to draw the text, and the anchor point relative to the text. IftextString starts with TEX: then the rest of the string is interpreted as LaTeX. boxed is a boolean refering to whether a box should be drawn around it, angle is the angle of rotation of the text in radians, and height and width represent the dimensions of the text.

Note: Only the most restrictive dimension of the two will be applied. In the example below, even though width is set at 500, height being 30 means the text is 30 pixels tall, and the width is adjusted accordingly.

    
        Text = new PrairieDraw("text", function() {
               this.setUnits(6, 6);
               var O = $V([0, 0]);
               var P = $V([2, 2]);
               this.arrow(O, P);
               this.text(O, $V([0, 1]), "TEX:O");
               this.text(P, $V([0, -1]), "TEX:P", false, Math.PI/2, 30, 500);
            });
    

The anchor point coordinates are in the range -1 to 1 and specify the anchor point on the text bounding-box. This point is located at the given position. Some common anchor points are:

    
        anchors = new PrairieDraw("anchors", function() {
           this.setUnits(6, 6);

           var xnn = $V([-1, -1]);
           var xn0 = $V([-1, 0]);
           var xnp = $V([-1, 1]);
           var x0n = $V([0, -1]);
           var x0p = $V([0, 1]);
           var xpn = $V([1, -1]);
           var xp0 = $V([1, 0]);
           var xpp = $V([1, 1]);
        
           this.point(xnn);
           this.text(xnn, xpp, "TEX:(-1,-1)");
           this.point(xn0);
           this.text(xn0, xp0, "TEX:(-1, 0)");
           this.point(xnp);
           this.text(xnp, xpn, "TEX:(-1, 1)");
           this.point(x0n);
           this.text(x0n, x0p, "TEX:( 0,-1)");
           this.point(x0p);
           this.text(x0p, x0n, "TEX:( 0, 1)");
           this.point(xpn);
           this.text(xpn, xnp, "TEX:( 1,-1)");
           this.point(xp0);
           this.text(xp0, xn0, "TEX:( 1, 0)");
           this.point(xpp);
           this.text(xpp, xnn, "TEX:( 1, 1)");
            });
    

Lines

Lines can be drawn with line(start, end). start and end should be vectors. Use setProp("shapeStrokePattern", type); to change the type of line. For example, setProp("shapeStrokePattern", "dashed"); will make subsequent lines dashed, and use setProp("shapeStrokePattern", "solid"); to revert them to solid lines.

    
        line = new PrairieDraw("line", function () {
           this.setUnits(6, 6);
           var O = $V([0, 0]);

           const points = {
                  0: [-1.5, -2],
                  1: [1.5, -2],
                  ...
                  12: [-1.5, -2],
           };

           const keys = Object.keys(points);
           for (let i = 0; i < keys.length - 1; i++) {
                  if(i % 2){
                         this.setProp("shapeStrokePattern", "dashed");
                         this.line(O.add($V(points[i])),  O.add($V(points[i+1])))
                  }else{
                         this.setProp("shapeStrokePattern", "solid");
                         this.line(O.add($V(points[i])),  O.add($V(points[i+1])))
               }}
        });
    

Circles

Circles can be drawn with circle(center, radius, filled?). center should be a vector, radius a float, and filled? is a boolean representing whether the inside of the circle should be opaque or transparent. In the example below, points are added at the center of each circle, but note how the circle with filled?=true obfuscates the point beneath it.

    
        circle = new PrairieDraw("circle", function () {
           this.setUnits(6, 6);
           var O = $V([0, 0]);

           this.point(O.add($V([-1.25, 0])));
           this.circle(O.add($V([-1.25, 0])), 1, false);
            
           this.point(O.add($V([-1.25, 0])));
           this.circle(O.add($V([1.25, 0])), 1, true);
        });
    

Rectangles

Rectangles can be drawn with rectangle(width, height, center, angle, filled?). width and height should be floats, center a vector, angle a float, and filled? a boolean. angle represents the angle (in radians, counter-clockwise is positive) at which the rectangle should be rotated, while filled? represents whether the inside of the rectangle should be opaque or transparent. More information on the filled option can be found in the circles section.

    
        rectangle = new PrairieDraw("rectangle", function () {
           this.setUnits(12, 6);
           var O = $V([0, 0]);

           this.rectangle(3, 4, O.add($V([-2.5, 0])), Math.PI/4, false);
           this.rectangle(4, 2, O.add($V([2.5, 0])), 0, true);
        });
    

Properties

In addition to color, there are other properties that control the style and thickness of lines, arrows, and other objects. These can be set with setProp("lineWidth", 3) and the current value can be retrieved with getProp("lineWidth"). The available properties include arrowLineWidth, arrowheadLength, arrowheadWidthRatio, arrowheadOffsetRatio, and circleArrowWrapOffsetRatio.

    
        properties = new PrairieDraw("props", function() {
           this.setUnits(6, 6);
           var O = $V([0, 0]);
        
           this.setProp("arrowLineWidthPx", 5);
           this.arrow(O, $V([2,2]));
           this.setProp("arrowLineWidthPx", 10);
           this.arrow(O, $V([2,-2]));
        });
    

Transformations

The action of future drawing commands can be transformed by translate(pos), rotate(ang), or scale(factor), where both pos and factor are vectors.

    
        transformation = new PrairieDraw("trans", function() {
           this.setUnits(6, 6);
           var O = $V([0, 0]);
           var P = $V([2, 2]);

           this.arrow(O, P);
           this.translate($V([1, 1]));
           this.rotate(Math.PI/2);
           this.arrow(O, P);
           this.translate($V([1, 1]));
           this.rotate(Math.PI/2);
           this.arrow(O, P);
        });
    

Transformations are accumulated, so translate(p1); translate(p2) is equivalent to translate(p1.add(p2)), for example.

The mechanism for transformation accumulation is multiplication of a current transformation matrix T on the right by the applied transformation A, to give M' = TA. This transforms subsequent drawing positions x by M'x = TAx, so the most recently applied transformation acts on the position first. That is, the transformations are applied in the reverse order that they were specified. The alternative way to think about transformations is that they transform the drawing canvas, in which case we can think of them being applied in forward order.

Saving and restoring graphics state

To avoid having to remember and undo property changes and transformations, the graphics state (properties and transformations) can be saved and restored with save() and restore(). This uses a stack model, so many levels of save/restore can be nested.

    
        save = new PrairieDraw("save", function() {
           this.setUnits(6, 6);
           var O = $V([0, 0]);
           var P = $V([2, 2]);
           this.save();
           this.setProp("arrowLineWidthPx", 5);
           this.translate($V([1, 1]));
           this.rotate(Math.PI/2);
           this.arrow(O, P);
           this.restore();

           this.arrow(O, P);
        });
    

Sequenced animations

If you want animations that goes through several motions in order you can use state = this.sequence(states, transTimes, holdTimes, t). The states is a list of "snapshots" of your animations. Each snapshot is a dictionary that says what all the variables should be at that point. transTimes is a list of how long it takes to move from one state to the next. holdTimes is a list of how long to stay in each stay before moving on. transTimes and holdTimes should have the same number of items as states. For example, transTimes[i] is how long it takes to get from state i to state i+1, and holdTimes[i] is how long you stay in state i before starting that move.

Toggle animation

    
        seqPD = new PrairieDrawAnim("seq", function(t) {
           this.setUnits(9, 7);

           var sStart =  {th1:  0.5, th2:   -2, th3:   -Math.PI, d: 1};
           var sGround = {th1:  0.7, th2:    2, th3:    Math.PI, d: 0};
           var sShelf =  {th1: -0.2, th2: -1.1, th3: -Math.PI/2, d: 0};
           var sRest =   {th1:    1, th2:   -1, th3: -Math.PI/2, d: -1};
           var states = [sStart, sGround, sShelf, sRest, sShelf, sGround];
           var transTimes = [5, 5, 2, 2, 5, 5];
           var holdTimes = [2, 2, 2, 2, 2, 2];
           var state = this.sequence(states, transTimes, holdTimes, t);

           // draw with variables state.th1, state.th2, state.th3, etc.
        });
    

There is also an externally controllable variant of sequence animation, accessed by state = this.controlSequence(name, states, transTimes, t). This requires a name (a string) but does not have holdTimes. Instead of holding for a given time when it reaches a new state, a controlled sequence holds indefinitely until this.stepSequence(name) is called to begin the transition to the next state. Controlled sequences require a name so that the correct sequence can be stepped.

Numerical differentiation

The function data = this.numDiff(fcn, t) is used to calculate derivatives at a specific time. Here t is the time at which the derivative is desired, and fcn is a function that takes time t and returns an object dataNow with properties (like dataNow.O, dataNow.P) that are numbers or vectors at time t. Then data.P will access the current value of P, while data.diff.P and data.ddiff.P will be the first and second derivatives.

Moving Vectors

Derivatives

Sliders

More Sliders