Some Basic Animation

• This is chapter 3.
• Today's product is here
  • I want an animated Sierpinski gasket.
• I will do this by
  • Setting up 2 buffers to hold the data
    • 
    • The current generation.
      • (A, A', C', B, B', A', C, C', B')
    • An augmented version of the previous generation.
      • (A, X1, X2, B, X3, X4, C, X5, X6)
      • X will depend on what I want to Animate.
    • In the animation I will move X1->X'->X1
      • By changing the thing that maps to the points changes the results dramatically.
  • I am going to use the fragment shader to interpolate between the two sets of vertexes
    • Linear interpolation on a grand scale.
    • I will control the percent with a uniform variable.
  • Finally, I will use a timer in javascript to control the entire thing.
• The new fragment shader

  • attribute vec4 vStartPosition;
    attribute vec4 vEndPosition;
    attribute vec4 vColor;
    uniform float percent;
    
    varying vec4 f_Color;
    
    void main() {
    
        float fixedPct;
    
        fixedPct = clamp(percent, 0.0, 1.0);
        gl_Position = mix(vStartPosition, vEndPosition, fixedPct);
        f_Color = vColor;
    }
    

  • Note two attributes, vStartPosition and vEndPosition
    • These are the vertex arrays discussed earlier
  • There is also a uniform variable
    • These can be of many different types (float, vec*, mat*)
    • Are used to set the state of the machine.
  • I used two glsl built in glsl functions
    • clamp
      • Takes a value, min and max and clamps the value between the min and the max inclusive.
      • Since you can't assign to a uniform, I store this in a temporary variable.
      • GLSL is very picky, you MUST specify floats as 1.0 and 0.0
      • Ie there is no coercion.
      • Look at the page, this is generic (float, vec2, ...)
    • mix
      • Linear interpolation
      • This is generic as well (float, vec2, ... )
  • The vertex shader remains unchanged.
• HTML
  • I looked up another switch, a toggle switch.

    • Animate
      <label class="switch">
        <input type="checkbox" onclick="ChangeAnimationState(canvas)">
      </label>
      

  • Everything else is the same (more or less)
• Response to the toggle switch
• I added three variables to the canvas class
  • A bool, are we animating or not.
  • Initialize to false.
  • A float, representing the percentage of the way through the animation.
  • Initialized to 0.
  • A float representing the size of a step to take each time.
  • Initialize to 1/100.
  • Controlling these needs new functions.
    • This function increments a single animation step.

    •     AnimationStep: function() {
              this.pct += this.pctStep;
              if (this.pct >= 1.0) {
                 this.pct = 1.0;
                 this.pctStep *= -1;
              }
              if (this.pct <= 0.0) {
                 this.pct = 0.0;
                 this.pctStep *= -1;
              }
              this.gl.uniform1f(this.pctLoc, this.pct);
              this.Redisplay();
          },
      

    • Increment the step.
    • If the step is bigger than 1 or less than 0,
      • set it to the limit.
      • And reverse the direction of travel.
    • Communicate the new value to the shader.
    • And call the redisplay function.
• Controlling the animation is somewhat more complex as well.
  • setTimeout
    • Takes a function and a time in milliseconds.
    • After the given number of milliseconds the function is called.
    • Unfortunately it does not seem to be called in the context of the class where it was set.
    • And there are no additional parameters.
    • So a global variable is in order.

      • var cheatContext;
        
        function MakeCanvas(width, height, locID) {
        
        

      • Just at the top of the file.
      • The last line of my class constructor

      •     cheatContext = this;
            return this;
        }
        

  • This is used in two functions

    • function  ChangeAnimationState() {
              cheatContext.animationState = !cheatContext.animationState;
              if (cheatContext.animationState) {
                 setTimeout(NextAnimationStep, 20);
              }
      };
      
      function NextAnimationStep() {
              cheatContext.AnimationStep();
              if (cheatContext.animationState) {
                 var delay = Math.abs(cheatContext.pct-0.5);
                 setTimeout(NextAnimationStep, 20+150*delay);
              }
      };
      

    • The first function is called from the checkbox when the state changes
      • Change the animation state.
      • If we are starting animation
        • Set the timer to call the other function
    • The second is responsible for handling a single animation step.
      • Call the animation step function described above
      • And reset the timer if we are still animating.
      • Notice I had it slow down at the ends of each direction
        • start slow
        • Speed up in the middle
        • Slow down at the end.
      • Note the 20 and 150 are purely arbitrary.
  • The Uniform variable
    • In the constructor,

    •     // this is new.  Get the location to send pct
          this.pctLoc = gl.getUniformLocation(program, "percent");
          this.pct = 0;
          this.pctStep = 0.01;
      
          gl.uniform1f(this.pctLoc, this.pct);
      

    • percent is the name of the variable in the shader.
    • This must be after the program is loaded
    • The last line provides an initialization of this value.
  • There are some other minor adjustments to the code, but all in all this is most of it.