CSS 450: Programming Assignment #4

Deep dive into WC and Viewport


Due time: Please refer to our course web-site



This assignment aims at letting your practice with working with the World Coordinate (WC) and the Device (or Canvas, or Pixel) Coordinate (DC) systems. We will gain understanding of these systems by transforming positions between them. In addition, we will experience a little with direct user manipulation.


Note: The number of lines of code required for this assignment is not large, but you must understand the system we are working with, the math for transformation, and the GUI binding. Make sure you understand what you are doing!



You will build a web-site with a user interface as in Example 5.5 from our class examples. You will implement a SquareArea class to support functionality of drawing and manipulating rectangular areas in WC space. You will create two instances of the SquareArea class to show the positions of the WC‑Window and to show the bounds of the Viewport-Region of the SmallView. For example the following screenshot shows the area viewed by the SmallView WC-Window in white and bounds the Viewport-Region in blue.

The WC-Window and Viewport-Region must respect the GUI slider settings. This is to say, when the user adjust the corresponding slider bars. For example, if the adjusts the WC-Width slider bar, the white WC-Window SquareArea should update its size as the slider bar moves. As a policy, when the Viewports width/height adjusts, the WC-Window dimension must also change proportionally. This is to say,

         When viewport-width/height increases by dw%

o    WC-width/height should also increase by dw%

         When viewport-width/height decreases by dw%

o    WC-width/height should also decrease by dw%


Direct user manipulation: you will experience with direct user manipulation in the moving of the WC-Window. When user LMB-click on the center position of the WC-Window, the red square in the middle of the white WC-Window as shown in the above screen shot, she will grab the WC-Window, subsequent LMB-drag will drag the WC-Window causing the white WC-Window to follow the mouse pointer until LMB is released. In your implementation:

         You can define a successful grab as a LMB-click position that is within 5 WC-units away from the middle position of the WC-Window.

         You must bind the WC-Window position changes to the GUI slider-bar update.


NEW: Direct user manipulation of Viewport-Region. In a fashion similar to that of WC-Window, the user can click on the red square in the middle of the blue Viewport-Region and grab/move the region. As in the case of WC-Window GUI echo, the viewport sliders-bars must be updated accordingly during the drag. In your implementation:

         You can define a successful grab as a LMB-click position that is within 10 pixels away from the middle of the position of the Viewport-Region.

         Be careful: make sure you understand the math. The WC position of the drawn WC-Window and Viewport-Region are, by definition, exactly the same! Viewport-Region selection computation must be performed in canvas-pixel space and not in WC space!


The following is a screen shot of the WC-Window and Viewport-Region after some user manipulations.

Notice that:

         The aspect ratio of the WC-Window always respects and follows that of the Viewport-Region.

         The GUI WC-CX/CY slider bar is always consistent with the current WC-Window center position. Make sure you bind these GUI elements to the direct user manipulations.

         Drawing order: the SquareArea is essentially drawn last, after the drawing of the mView and mSmallView! This is to say, in the MainController, the drawing order is essentially:

o    myWorld.draw(mView)

o    myWorld.draw(mSmallView) so that the small view is drawn over the mView

o    draw the two SquareArea this can be tricky! Because you want to draw to the mView, and yet the current webgl-viewport is set to that of the mSmallView.

  Think about this!

  You must set the webgl-viewport to that of the mView before you draw the two SquareAreas.


Simple APP behavior: When LMB-click does not successfully grab the WC-Window, you must support a simple application behavior just like that of Example 5.5 (LMB-click drag to create rectangles with random color).




         My implementation is based on Example 5.6.

         I took the GUI definition (index.html and relevant MainControler.js) and merged in the ClassExample behavior from Example 5.5.

         My SquareArea is a subclass of the SceneNode class as introduced in Example 5.6.

o    I draw the bounds of the SquareArea as four narrow rectangles with initial width/height of 0.02 WC-unit.

         I defined a new class: ViewManipulator to implement the WC-Window and Viewport-Region functionality.

o    My ViewManipulator::draw() function literally reach into the mView and change the webgl-viewport using the mViews viewport setting.



Credit Distribution

Here is how the credits are distributed in this assignment:



Simple LMB-Click and drag behavior of Example 5.5



a.    Ability to draw multiple rectangles with random color



Proper display of WC-Window







a.    Position is properly controlled by the GUI slider bars

b.    Width is properly controlled by the GUI slider bar

c.     Viewport-Region properly updated when WC-Window changes


Note: only showing a white SquareArea with no connection to mSmallView WC window will receive 0 credit.




Direct User Manipulation of WC-Window Location




a.    Able to grab and move the SquareArea shape

b.    Properly update WC-Window as SquareArea moves

c.     Properly update GUI-slider bars as SquareArea moves

d.    Properly update ViewportRegion as SquareArea moves






Proper display of ViewportRegion




a.   Position is properly controlled by the GUI slider bars

b.   Width/Height is properly controlled by the GUI slider bars

c.    WC-Window width/height updates accordingly


Note: only showing a blue SquareArea with no connection to mSmallView Viewport region will receive 0 credit.






Direct User Manipulation of Viewport-Region Location






a.    Able to grab and move the SquareArea shape

b.    Properly update Viewport-Region as SquareArea moves

c.     Properly update GUI-slider bars as SquareArea moves


Proper drawing order:



a.    The two SquareArea drawn last (where the center pivot positions of both are visible)







a.        proper zip file and project name

b.        No useless files submitted




Extra Credit:


Make sure your extra efforts are related to this assignment: examples:

         20pt: SquareArea bound size. Notice my SquareArea bound line-width and the center square changes sizes as you scale the area. This looks ugly. Fix this for 20-pts.

         Support direction user manipulation scaling:

o    20pt: mouse click on WC-Window some location and change size of WC-window. Notice this is rather tricky to implement as while change size, you MUST respect the aspect ratio of the Viewport-Region

o    10pt: mouse click on Viewport-Region some location and scale the Viewport-Region. Again, WC to DC transform is necessary here.

o    Notice: receiving full credit for this requires an intuitive relationship between WC-Window and Viewport-Region during scaling. This means:

  The two areas must maintain the aspect ratio relationship (so square are always square)

  The two areas change in portion with respect to each other, that is, when one increases, the other also increases, etc.

  Subject to the above constraints, you can implement any policy that fancies you.


This programming assignment will count 16% towards your final grade for this class.