Some Additional Chapter 3 Notes.

• You can sort of think of the fragment shader being invoked as follows

  • for (i=0;i<vertexSize; i++)
       FragmentShader(vertexAttributes[i], uniformVariables);
    

  • Ie the fragment shader is called on each set of attributes.
  • But the uniform variables are constant across the calls.
• Timing
  • setTimeout is a one shot call
    • Sets an alarm, then it is over.
    • It does take parameters.
  • For the Animated Serpinski Gasket
    • Get rid of the global variable from last time.
    • Move all of the variables into the class.
      • pct: float, percent along animation
      • pctStep: float, some small constant between 0+ and 1.
      • animationState: bool, false
    • Functions

      •     ChangeAnimation: function() {
               this.animationState = !this.animationState;
               if (this.animationState) {
                  setTimeout(canvas.FakeAnimationStep,20,this);
               }
            },
        

        • Called from the toggle button push.
        • Simply changes the animation state
        • And starts animation if needed.
        • Notice a reference to the canvas is passed to the canvas (well sort of)

      •     FakeAnimationStep: function(me) {
                me.AnimationStep();
            },
        

        • I don't want to break AnimationStep so I need this function to call it.
        • Notice the input parameter, which canvas I am associated with.

      •     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;
                }
        
                if (this.animationState) {
                     setTimeout(canvas.FakeAnimationStep,20,this);
                }
        
                this.gl.uniform1f(this.pctLoc, this.pct);
                this.Redisplay();
            },
        

        • The real change iere is to set a timeout if we are still animating.
    • setInterval(function, [delay, parm, parm, ...]) registers a regular callback
      • Most version of IE do not support params
      • The default delay is 10
      • Note, this returns an intervalID which can be used to cancel
        • Apparently intervals and timeouts use the same pool of ids, so you can cancel either with either.
      • The man page specifies this as a delay between each call.
      • I am somewhat dubious of this, I suspect it is called every interval.
      • Which means we might have multiple invocations if the call takes longer than delay.
      • Can be canceled with clearInterval(id)
    • A new Demo (Heart Beat).
      • There are a bunch of cool curves you can generate using polar coordinates.
      • I am going to use a rose.
      • Most is the same, just cleaning up a bit.
      • Static data
        • Generate it and put it in a vertex buffer.

        •     MakePoints: function(){
                  var theta, r = .6;
          
                  var data = [];
                  i = 0;
                  for(theta = 0; theta & 2*Math.PI;  theta += Math.PI/100) {
                      var x = r*Math.cos(this.k*theta)*Math.cos(theta)
                      var y = r*Math.cos(this.k*theta)*Math.sin(theta);
                      vertex = [x,y];
                      data.push(vertex);
                  }
                  this.vertex = data;
          
                  return;
              },
          

      • Same animation variables as before.
      • Change in animation function
        • Use an interval

        •     ChangeAnimation: function() {
                  this.animationState = !this.animationState;
                  if (this.animationState) {
                     this.timerID = setInterval(this.AutomatedAnimationStep,1,this);
                  } else {
                     clearInterval(this.timerID);
                  }
              },
          

        • But now, I want to only go through one iteration
        • So When the pct variable hits 0, turn animation off

        •     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;
                  }
          
                  if (this.pct == 0) {
                     this.ChangeAnimation();
                  }
          
                  this.gl.uniform1f(this.pctLoc, this.pct);
                  this.Redisplay();
              },
          

    • To show it is self contained, I made two of them!
    • The fragment shader has changed again

      • attribute vec4 vPosition;
        uniform float percent;
        
        varying vec4 f_Color;
        
        void main() {
        
            float fixedPct;
            float scale = 1.0+percent;
        
            gl_Position = vec4(vPosition.x, vPosition.y,0.0,1.0/scale);
            f_Color = vec4(1.0, 0.0, 0.0, 1.0);
        }
        

      • I am using the projection trick we discussed.
        • Since the last value in gl_Position is not a 1 the pipeline will fix that
        • It will multiply each by 1/(1/scale)) to make the
        • This is to show a concept.
        • You probably want

        • gl_Position.xyz *= scale;