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.
• This demoinvolves 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.
• Think "we are multiplying right to left"
• And new matricies are added to the right
  • So our transform for the blue star is:
  • Tr_flipT_w/2S_worldR_worldT_wx,wyR_blueStarT_1/4 [x,y,1]
  • The last matrix mulitplied is the first applied to the object.