Finishing Transformation Matrices

• Rotation can be accomplished with
  • $\begin{bmatrix} \cos(\Theta) & -\sin(\Theta) & 0 \\ \sin(\Theta) & \cos(\Theta) & 0 \\ 0 & 0 & 1 \end{bmatrix} $
  • This is rotation about the origin.
• To rotate about any other point $p$
  • Translate $p$ to the origin
  • Rotate by $\Theta$
  • Translate $p$ back to it's location.
• I am recycling a demo so we need some more html/javascript
• I am allowing keydown actions.
  • So I need to first allow the canvas to receive focus
    • In the past this has been turned off.
    • To turn it on, we need to add
    • canvas.tabIndex = 0;
  • Receiving keydown actions is easy
    • canvas.addEventListener("keydown", MyHandler);
  • MyHandler
    • Receives n keydown event structure
    • This event structure is documented here
    • We can check all kinds of properties
      • metaKeys, shiftKey, altKey
    • But we are really interested in the key field.
  • MyHandler is just a big switch statement that modifies some global variables.
• This demo involves a common technique
  • Each thing that draws with an additional transformation
    • Saves the current state
    • Modifies the transformation matrix
    • Draws the part it needs to draw
      • Either local draw
      • Or a call to draw the sub parts
    • Restores the current state.
• The state in the HTML canvas
  • ctx.save()
  • Saves
    • Current transformation matrix.
    • Clipping region
    • Dash list
    • Values of many attributes.
  • It does this by pushing a "frame" on a stack.
  • It is put back with ctx.restore()
  • Take a look at DrawScene in move.js
  • Note, this is discussed in 2.4.2 The TransformStack in the book.
• What are these scale, rotate, translate calls?
  • scale
  • translate
  • rotate
• For this code, I am still working in "pixel" size coordinates.
• Continue by looking at Star in move.js
  • This draws a star centered on the origin.
  • Note the default parameters if we have not yet encountered those.
• Look at Scene
  • Note the axis is drawn in the calling function.
  • All other items are drawn here.
  • Each of the stars (other than the black star) are drawn on the unrotated world background.
  • The Black star and the word "Hello" are drawn with the "world" rotation.
  • I would ignore Greeting for now.
• Compare BlueStar and MagentaStar
  • The only difference is the order of the translate and rotate.
• We have seen how translate and scale interact
  • GreenStar and CyanStar demonstrate this.
• This entire process is done in a very function oriented process.
  • This is probably not the right way.
  • We will look at a better way soon.