Viewing in 2D systems

• Typically we work in a coordinate system called world or modeling coordinates.
• We will eventually use transformation to move objects around in these coordinate systems.
• However, we normally define a viewing window and a viewport.
• Consider this scene
• 
  • The dashed lines represent the axis.
  • Assume each grid line is 10 units.
  • So this picture is a 200x200 unit image
  • But this image points are between (-100,-0) and (200,200)
  • This is the world coordinate system.
• If we were to draw this on a canvas
  • The canvas would be a given size. (say 500x500)
  • And the coordinate system is upside down for y
  • So (-100,0) will need to map to (0,0)
  • And (100,200) will need to map to (500,500)
  • 
• We could go directly to the canvas coordinates, but
  • This is not the best if we are displaying on multiple devices.
  • And the reflection is more difficult.
• So we translate to Normalized Device Coordinates (NDC)
  • In two space this is a square (-1,-1) to (1,1)
  • In three space this will be a cube (-1,-1,-1) to (1,1,1)
• So the transformation will need to be
  • Move (-100,0) to (0,0)
  • This will produce an image between (0,0) and (200,200)
  • Scale by 2/200 each dimension
  • This will produce an image between (0,0) and (2,2)
  • Move (0,0) to (-1,-1)
  • This will produce coordinates between (-1,-1) and (1,1)
• In general, we might specify a window into the world coordinate system between (B_x,B_y) and (T_x,T_y)
  • 

    xNDC = (xworld-Bx)*2/(Tx-Bx) -1
    yNDC = (yworld-By)*2/(Ty-By) -1
    	 

  • Notice that the bottom of NDC space is (-1,-1), which get added to the coordinates in the end.
  • And the width and height of NDC space is 2, which gets multiplied by the points in the end.
• Moving from NDC to Device Coordinates (DC)
  • The first step is to multiply y_NDC by -1,
    • This will "flip" the scene
  • Then add 1 to each coordinate to move the box to (0,0)
  • Divide by the width of NDC (2)
  • Multiply each by the width of the output area (in pixels)
  • Finally add any offset to the new coordinates.
• Just like we declared a window into world coordinates, we frequently declare a viewport into the device where we wish to map the window.
  • 

    xDC = (xNDC+1)(tx-bx)/2 + bx
    yDC = (-1*yNDC+1)(ty-by)/2 + by
    	 

• This is all being done to the endpoints of the primitives
• This is just one step in a multi step process.
• Once we have the primitves in device coordinates, we can perform the rasterization we have been discussing.
• One last step.
  • We will eventually represent points in Homogeneous Coordinates
  • This will really be [x,y,z,1]
  • More on this later.
  • But we will want to represent everything as a vector matrix multiply.
  • Rmember how to do matrix vector multiply

  • 
    | a b c d| |A|
    | e f g h| |B|
    | i j k l|x|C| = [Aa+Bb+cC+Dd, Ae+Bf+Cg+Dh, Ai+Bj+Ck+Dl, Am+Bn+Co+Dp]
    | m n o p| |D|
    	 

  • So we would like to find values of (a,b,c,d) such that x_worlda + y_worldb+z_worldc+d = (x_world-B_x)*2/(T_x-B_x) -1
    • b =0 and c=0
    • So we only need to find a and d

    • (xworld-Bx)*2/(Tx-Bx) -1
      
       = 2xworld/(Tx-Bx) -2Bx/(Tx-Bx) -1
       = 2/(Tx-Bx) xworld + (-2Bx - (Tx-Bx))/(Tx-Bx)
       = 2/(Tx-Bx) xworld + (-Bx - Tx)/(Tx-Bx)
       = 2/(Tx-Bx) xworld + -(Bx + Tx)/(Tx-Bx)
      
                    2               Bx+Tx
           or a = -----      d  = - -----
                  Tx-Bx             Tx-Bx
      	     

    • By a similar computation for y we get

      
       e = 0, g = 0
      
            2           By+Ty
       f = ----   h = - -----
           Ty-By        Ty-By
      	     

    • or

      
      
           |   2              Bx+Tx |
           | -----   0   0  - ----- |
           | Tx-Bx            Tx-Bx |
           | 
           |         2        By+Ty |
       T = |   0   ----  0  - ----- |
           |       Ty-By      Ty-By |
           |
           |   0     0   1      0  |
           |   0     0   0      1  |
      	     

    • And p_NDC = Tp_world
    • We could similarly derive a transformation matrix for NDC to DC.
• There is more to come (very soon) on this subject.
  • Other transofrmations and a different way to derive this.
  • And projections and how to get a good value for z
Your daily dose of code
• Canvas.js mostly has interface changes,
• But it does do the transformations discussed in Line()
• LineTests
  • The LineTest function is between (-200,-200) and (-100,-100)
  • Circle is centered on the origin
• The clipping is very primitive. It works but is far from efficient.