• Our goal for the day.
    • A star can grow and shrink (boing)
    • A star can spin (whir)
      • But must return to 0 when whir is turned off.
    • A star can go between a star and a pentagon (phase)
    • The entire canvas can spin (Whir)
    • Animation can be toggled.
  • The main workhorse today is setTimout()
    • Takes a function to execute.
    • And a delay before that function is executed.
      • Is a time in milliseconds.
      • This is a best effort call
        • It may not be able to call as soon as you request.
    • It returns a timeoutID
    • This can be used for clearTimeout(timeoutID)
  • Timeouts are a standard part of most event driven systems.
    • GUI/Graphics
    • Operating Systems.
  • For our purposes
    • We will use a boolean flag animation to control the animation.
    • This is initially set to false.
    • When the animation is turned on
      • The variable is set to true
      • setTimeout is called with the animation function.
    • The animation function
      • Performs any scene level animation.
      • Draws the scene.
      • Recalls setTimeout, but only if animation is still true.
  • Notice the order for the global rotation 
    • ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(rotation*Math.PI/180);
ctx.translate(-canvas.width/2, -canvas.height/2);
    • The rotate is clear
    • But why the two translates?
    • Is this the right place, do I want to do this first?
    • What does this accomplish?
  • Scaling a star
    • I want to
      • scale up from MIN_SCALE to MAX_SCALE
      • Then down to MIN_SCALE
      • And repeat
    • I need THREE variables to do this.
      • scale is the current scale for the object.
      • scaling is used to control if we are performing a scale or not.
      • scaleDir is the direction we are moving
      • Note the use of scaleDir to control the scale.
    • Notice, I don't want to scale everything, just the position of the points.
    • So I have to apply this myself to the points of the star.
    • Is the order ok?
      • save the state
      • translate
      • rotate
      • scale
      • draw points
      • restore the state
      • The star is centered at 0.
  • Drawing a star
    • This one is sort of complex
    • The star can exist in two phases.
      • Phase A is a star
      • Phase B is a pentagon
    • I generate the points pragmatically (MakePoints)
      • Just divide circle into 5 parts.
      • These are the points of the pentagon when drawn in order.
    • If I draw in a different order, I get a star.
    • I have
      • The array of points on a star/pentagram
      • An array for the order of the points for each phase (phaseA, phaseB)
      • A function that interpolates between the two points based on a phase parameter. (TruePoint)
  • Rotating the Star
    • I use three variables again
      • rotation : the angle of rotation
      • spinning : bool, am I spinning?
      • spinDown : Should I spin back to 0 and stop?
  • Note several other functions
    • Reset - reset the star to the original state.
      • This is nice as sometimes I get lost and want to reset everything.
    • Display - draw the object.
    • Next - take me to the next animation state