Rotation and Further Transformations

• Our The goal for today
• Rotations
  • Rotations are done wrt the origin.
  • The entire plane is rotated by a factor of θ
  • The matrix is $R = \begin{bmatrix} cos \theta & -sin \theta & 0 \\ sin \theta & cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix}$
• In the demo
  • The axis are unchanging and drawn in the raw canvas coordinate system
    • I find this really helpful as it is nice to have a frame of reference.
  • EVERYTHING Else is drawn in modeling coordinates.
    • And the "world" is adjusted to deal with that.
• Every time we do a transformation (with the exception of setTransform)
  • Let $T$ be the current transformation matrix
  • Let $N$ be the new transformation matrix
  • $T = TN$
  • Remember initially $T =I$ the identity matrix.
  • setTransform (N)
  • $T = N$
• Let's consider the black star in the center.
  • The star is drawn at the origin. (Look at the code)
    • If nothing else happened, this would put it in the upper right hand corner of the screen, with the top "point" up.
  • In Scene a rotation is applied
    • This spins the star by -wordRotate or $R_1$
  • In DrawScene
    • Ignore user movement for now.
    • The entire scene is translated by cx, cy or $T_1$
      • This moves the origin to the center of the canvas.
      • But only if the canvas has been flipped
    • The set transform flips the y axis as we discussed last time, or sets the transformation matrix to be $F$.
  • So the transformation for the star is $FT_1R_1$
  • This is a little hard to adjust to, but essentially we add transformation matricies on the right for more local transformations.
• Look at the word
  • It has the same matrix as the star $FT_1R_1$ but
  • The text is drawn WRT to the html 5 canvas coordinate system.
    • So we need to reflect it about the Y axis.
    • We could use a ctx.tranform to do this,
    • But a scale(1,-1) will do it as well. $S_t$
    • But this will leave the text below the x axis.
  • We need to move it from the origin backward to a point so it is centered on the origin.
    • We use translate(-100,20) or $T_2$ to do this.
      • $T_2$ is just a bit strange because of the reflection we will add in a second.
      • It looks like we are moving it up, but remember, we are reflecting it about the x axis.
      • So now it is below the x axis.
      • So we need to move it "up" by about 1/2 the height of the tex.t
  • For word, the final transformation matrix is $FT_1R_1S_tT_2$
• Notice that the order of the transformations is very important
  • The blue star and the magenta star are almost the same
    • The blue start is rotated then translated.

      •     ctx.translate(w/4, h/4);
            ctx.rotate(blueStarTheta * Math.PI/180); 

      • This rotates it about the origin (so it spins)
      • Then translates it to the final position.
    • The magenta star is translated then rotated

      •     ctx.rotate(blueStarTheta * Math.PI/180);
            ctx.translate(w/4, h/4); 

      • This moves it to a position.
      • Then rotates it to the final location
  • Notice this applies to the green and cyan stars as well
    • In the html5 canvas. scale applies to line width
    • So both have the line width set after the scale

    •     ctx.translate(-w/3, -h/3);
          ctx.scale(starScale,starScale);
          ctx.lineWidth = 1/starScale;
          Star(ctx, "green", 3);
      // vs
          ctx.scale(starScale,starScale);
          ctx.translate(10, -10);
          ctx.lineWidth = 1/starScale;
          Star(ctx, "cyan", 3); 

    • I did translate different amounts, just to keep the cyan star in the picture.
• I added some navigation to the scene as well
  • Notice that navigation is somewhat strange when rotation is thrown in.
• In the end, we have
  • A model coordinate system for each model.
    • This was centered at 0,0 with the point "up" for a start.
    • This was starting at 0,0 moving left, upside down for the text.
  • We applied transformations to move the item from their location in their own coordinate system to the world coordinate system.
  • We then moved the world around so that we were looking from the prospective of the viewer or the viewing or camera coordinate system.
    • Ie, we do not move, we moved the world so we can see different things.
  • After this, we flipped things over so we were looking at them in the screen or in this case canvas coordinate system.
• Later we will add additional stages to these transformations.
  • But the basic idea will hold.
    • Model objects in their own coordinate system.
    • Move them to where they belong in a larger object system.
    • Move this to where it belongs in a larger object system.
    • Move this to where it belongs in a larger object system.
    • ...
    • Move this to where it belongs in the world.
    • Change the world to where it belongs for the camera
    • Change this to where it belongs on the screen.