Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Example: ** Eased Movements - This example is primarily a demo of the available easing equations. The animation itself is handled in only a single line, whereas most of the code is devoted to user input, particularly the selection of primary and secondary easing via hyperlinks. The example does however illustrate the use of a number of features that are rarely demoed and which may be of interest to those interested in animation, including mouse input and hyperlink input.

    There is only a single animation track, the movement track. We initialize both its primary and secondary easing to "linear easing" (i.e., default movement, no real easing to speak of).

        "Eased Movements"
        
        Include Glimmr Graphic Hyperlinks by Erik Temple.
        Include Glimmr Canvas Animation by Erik Temple.
        
        Use no status line.
        
        The graphics-window is a graphics g-window spawned by the main-window. The position of the graphics-window is g-placeright. The measurement of the graphics-window is 80. The back-colour of the graphics-window is g-black. The graphics-window is g-graphlinked.
        
        The graphics-canvas is a g-canvas. The canvas-width is 200. The canvas-height is 200. The associated canvas of the graphics-window is the graphics-canvas.
        
        The secondary-window is a text-buffer g-window spawned by the graphics-window. The measurement is 25. The position is g-placeright. The back-colour is g-white. The back-colour of the main-window is g-white.
        
        The movement track is an animation track. The secondary easing is the linear easing rule.
        
        When play begins:
            try requesting the story file version;
            say run paragraph on;
            say "[i]The equation illustrations are borrowed from http://jqueryui.com/demos/effect/easing.html[/i][line break]";
            say "[paragraph break][instruction text]";
            wait for any key in the main-window;
            open up the graphics-window;
            open up the secondary-window;
            now the column-break is the number of rows in the Table of Glulx Hyperlink Replacement Commands;
            say "Break: [column-break].";
            now selected secondary easing is (column-break + 1);
            follow the hyperlink listing rule;
            while 1 is 1:
                wait for any key in the main-window.
        
        Figure of Ball is the file "Ball.png".
        
        Figure of BackEaseIn is the file "BackEaseIn.png".
        Figure of BackEaseInOut is the file "BackEaseInOut.png".
        Figure of BackEaseOut is the file "BackEaseOut.png".
        Figure of BounceEaseIn is the file "BounceEaseIn.png".
        Figure of BounceEaseInOut is the file "BounceEaseInOut.png".
        Figure of BounceEaseOut is the file "BounceEaseOut.png".
        Figure of CircularEaseIn is the file "CircularEaseIn.png".
        Figure of CircularEaseInOut is the file "CircularEaseInOut.png".
        Figure of CircularEaseOut is the file "CircularEaseOut.png".
        Figure of CubicEaseIn is the file "CubicEaseIn.png".
        Figure of CubicEaseInOut is the file "CubicEaseInOut.png".
        Figure of CubicEaseOut is the file "CubicEaseOut.png".
        Figure of LinearEasing is the file "LinearEasing.png".
        Figure of QuadEaseIn is the file "QuadEaseIn.png".
        Figure of QuadEaseOut is the file "QuadEaseInOut.png".
        Figure of QuadEaseInOut is the file "QuadEaseOut.png".
        
        The associated canvas of a g-element is usually the graphics-canvas.
        
        The Ball is a sprite. It is center-aligned. The image-ID is Figure of Ball. The origin is { 100, 100 }.
        
        The column-break is a number variable.
        Selected easing is a number variable. Selected easing is 1.
        Selected secondary easing is a number variable.
        
        This is the hyperlink listing rule:
            clear main-window;
            say "[italic type]Easing (x-axis)[roman type][paragraph break]";
            repeat with x running from 1 to 32:
                if x is (column-break + 1):
                    move focus to secondary-window, clearing the window;
                    say "[italic type]Secondary easing (y-axis)[roman type][paragraph break]";
                if x < (column-break + 1):
                    if x is selected easing or x is selected secondary easing:
                        say "[bold type][replacement corresponding to a link ID of x in the Table of Glulx Hyperlink Replacement Commands][roman type][line break]";
                    otherwise:
                        say "[link x][replacement corresponding to a link ID of x in the Table of Glulx Hyperlink Replacement Commands][end link] [line break]";
                if x > column-break:
                    if x is selected easing or x is selected secondary easing:
                        say "[bold type][replacement corresponding to a link ID of (x - column-break) in the Table of Glulx Hyperlink Replacement Commands][roman type][line break]";
                    otherwise:
                        say "[link x][replacement corresponding to a link ID of (x - column-break) in the Table of Glulx Hyperlink Replacement Commands][end link] [line break]";
                if x is column-break:
                    display the image corresponding to a link ID of selected easing in the Table of Glulx Hyperlink Replacement Commands;
            display (the image corresponding to a link ID of (selected secondary easing - column-break) in the Table of Glulx Hyperlink Replacement Commands) in the secondary-window;
            return to main screen.
        
        There is a room.
        
        The story headline is "An interactive demonstration"
        
        To say instruction text:
            say "On the next screen, you will be able to assign easing equations to the movement of a ball.[line break]Click on one of the links in the left column to assign the easing for the x-axis of movement, and on the right to assign the easing for the y-axis.[line break]Then just click somewhere in the black part of the screen to move the ball to that point.[paragraph break]Depending on the way in which you have paired the easing equations, different effects will be generated:[paragraph break][b]1. [/b]If the easing of the two axes is the same, the ball will move in a straight line, but its acceleration will change to reflect the non-linear easing used.[line break][b]2. [/b]If linear easing on one axis is paired with nonlinear easing on the other, then requesting the ball to move diagonally will produce a motion similar to the graph shown for the nonlinear easing.[line break][b]3. [/b]If you have nonlinear easing on both axes, there will be plenty of potential for unpredictable movement, especially on the diagonal.[paragraph break]Typically, you will see more variation in the path of the ball if you request a destination diagonal from the ball's current position. Horizontally or vertically, most of the variation will tend to be in ball's acceleration patterns.[paragraph break]Maximize your window now, then [b]press any key to start experimenting![/b][paragraph break]"
        
        To display (F - a figure name) in (win - a g-window), one time only:
            (- DisplayFigureWin({win}, ResourceIDsOfFigures-->{F}); -) .
        
        Include (-
            [ DisplayFigureWin win resource_ID one_time;
                if ((one_time) && (ResourceUsageFlags->resource_ID)) return;
                ResourceUsageFlags->resource_ID = true; print "^"; glk_image_draw(win.ref_number, resource_ID, imagealign_InlineCenter, 0); print "^";
            ];
            -) .
        
        Section - Hyperlink control (in place of Section - Selecting the replacement command in Flexible Windows by Jon Ingold)
        
        Table of Glulx Hyperlink Replacement Commands
      link ID  easement  replacement  image  
      1  linear easing rule  "linear easing"  Figure of LinearEasing  
      2  quadratic easing in rule  "quadratic easing in"  Figure of QuadEaseIn  
      3  quadratic easing out rule  "quadratic easing out"  Figure of QuadEaseOut  
      4  quadratic easing in-out rule  "quadratic easing in-out"  Figure of QuadEaseInOut  
      5  cubic easing in rule  "cubic easing in"  Figure of CubicEaseIn  
      6  cubic easing out rule  "cubic easing out"  Figure of CubicEaseOut  
      7  cubic easing in-out rule  "cubic easing in-out"  Figure of CubicEaseInOut  
      8  circular easing in rule  "circular easing in"  Figure of CircularEaseIn  
      9  circular easing out rule  "circular easing out"  Figure of CircularEaseOut  
      10  circular easing in-out rule  "circular easing in-out"  Figure of CircularEaseInOut  
      11  cubic back easing in rule  "back easing in"  Figure of BackEaseIn  
      12  cubic back easing out rule  "back easing out"  Figure of BackEaseOut  
      13  cubic back easing in-out rule  "back easing in-out"  Figure of BackEaseInOut  
      14  bounce easing in rule  "bounce easing in"  Figure of BounceEaseIn  
      15  bounce easing out rule  "bounce easing out"  Figure of BounceEaseOut  
      16  bounce easing in-out rule  "bounce easing in-out"  Figure of BounceEaseInOut  


    The following are the routines that actually implement animation. We first define some values that we can pass into the animation phrase: the initial target for the animation, the desired frame-rate, and the velocity of the ball. This isn't strictly necessary, but it can be good for flexibility.

    Next is a hyperlink processing rule, which reads any click to the text hyperlinks, translating the player's selection to an easing equation and assigning that equation as either the easing or secondary easing of the movement track.

    Finally, the "clicking graphlink" rule fires when the player clicks on the graphics window. It grabs the coordinates clicked and converts them to canvas coordinates; these coordinates then become the ending point for the motion animation. The motion animation itself is invoked simply by plugging this end point into the "animate" phrase along with the global variables describing frame rate and velocity.

        The motion target is a list of numbers variable. The motion target is { 100, 100 }.
        Frame-rate is a number variable. Frame-rate is 24.
        Ball-speed is a number variable. Ball-speed is 20.
        
        Hyperlink processing rule:
            let selection be the linear easing rule;
            if the current hyperlink ID is a link ID listed in the Table of Glulx Hyperlink Replacement Commands:
                let selection be easement entry;
            otherwise if (the current hyperlink ID - column-break) is a link ID listed in the Table of Glulx Hyperlink Replacement Commands:
                let selection be easement entry;
            if the current hyperlink ID < (column-break + 1):
                now the easing of the movement track is the selection;
                now the selected easing is current hyperlink ID;
            otherwise:
                now the secondary easing of the movement track is the selection;
                now the selected secondary easing is current hyperlink ID;
            follow the hyperlink listing rule;
            say run paragraph on;
            rule succeeds.
        
        First clicking graphlink rule:
            let graph-x be current graphlink x as a fixed point number;
            let graph-y be current graphlink y as a fixed point number;
            now entry 1 of the motion target is ((graph-x real minus the x-offset of the current graphlink window) real divided by the scaling factor of the current graphlink window) as an integer;
            now entry 2 of the motion target is ((graph-y real minus the y-offset of the current graphlink window) real divided by the scaling factor of the current graphlink window) as an integer;
            animate the movement track as a motion animation targeting the Ball and ending at the motion target at frame-rate fps with velocity of ball-speed;
            rule succeeds.