CPSC 314   Sept 2014    Assignment 0:   Introduction to Javascript and WebGL

3% of final grade
Due: Monday September 15

The goal of this lab is for you to familiarize yourself with basic Javascript
as well as having a high-level understanding of how a transformation matrix
is used in order to transform vertices before they are drawn on screen.

Copy the zip file to:
  ~/cs314/a0.zip
Then expand it 
  cd ~/cs314
  unzip a0.zip
  cd a0

View your local version of a0.html to ensure that your web browser is properly enabled
to run Javascript and WebGL.  It should be an up-to-date HTML5 browser.
Chrome, Firefox, and Safari all support WebGL.

Now make the following changes. Use your favorite search engine to search
for relevant documenation or ask your TA for help.  After each edit to 
a0.html or a0.js, you will want to reload house.html in order to see the
changed result. All the javascript changes can be done by making changes to
the main() function or the global variable definitions.
When introducting errors, note whether the program stops or continues running.
Then fix the error before moving on to the next step.  All other changes
can be made in a cumulative fashion.

(a) Change the window size to be 600x600 pixels. See the HTML file.
(b) Open the console window so that you can see the Console output.
    You should be able to see the basic "hello world" message.
(c) Change the console message to be "FOO's world", where FOO is your name.
(d) Try to print the result of a division by zero. What happens?
(e) Try to print the result of a variable that does not exist yet. What happens?
(f) Add a new variable using "var foo;" and then try to print the value of foo without first initializing it. 
    What happens?
(g) Change the background colour to be yellow. Hint: it is a combination of red and green.
(h) Change the colour of the drawn vertices to be blue and the house outline to be in green.
(i) Move the peak vertex of the house so that the roof is taller.
(j) Make the house twice as large by changing the initialization of xformMatrix.
(k) Similarly, translate the house 0.5 units to the left and 0.2 units up.
(l) Draw a second copy of the house, in red, located 0.5 units to the right of the first.
    The transformation can be set up by adding 0.5 to the current value of the x-location 
    that is achieved by the matrix, i.e., xformMatrix[12] in the column-major order that 
    is used by WebGL and OpenGL.
(m) Add a vertical "spire", i.e., vertical line segment, to the drawn houses by adding an extra vertex 
    above the current peak of the house.
(n) What happens when you change LINE_LOOP to LINE_STRIP for the red triangle? Why?
(o) What happens when you change LINE_LOOP to LINES for the red triangle? Why?
(p) What happens when you change LINE_LOOP to TRIANGLES for the red triangle? Why?
(q) What happens when you change LINE_LOOP to TRIANGLE_FAN for the red triangle? Why?
(r) Write a loop that uses Math.random() to draw 10 copies
    of the house at random (x,y) locations in random colours on the screen.

Show your demo to a TA (either this week or next week) and submit your assignment by the deadline using:

handin cs314 a0