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 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?
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 is drawn with the "world" rotation.
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.