1. Install the latest version of Firefox on your computer.
2. Go to http://www.cs.miami.edu/~vjm/csc529/Common and download the
files to a directory of the same name.
Do the same with http://www.cs.miami.edu/~vjm/csc529/prog01. Common
and prog01 should be in the same directory on your computer.
3. Visit prog01/square.html in Firefox on your computer. Do you see a
white square?
4. Where is the color of the square determined? Make a change to turn
it yellow and refresh.
5. Where is the shape of the square determined? Change one of its corners.
6. Load rotatingSquare3.html instead. Look at FirefoxTools.pdf. Do
all the same things.
7. Close the console and this tab. Open the console in square.html.
If you have problems, you might need to restart the browswer.
Add a line in square.js just before the call to render():
console.log(“Hello”);
Reload. Where is the Hello?
8. Set a breakpoint on that line and restart. Single step to make the
Hello appear. Take a screen shot. Single step until the square
appears and take another screen shot.
9. Modify the fragment color in the shader editor. In the console, run
render()
so the color changes.
10. Move the square over by adding 0.25 the x-coordinate. You can’t
modify vPosition because it is input data (an attribute). You need to
copy it into another variable first. Call render() again.
Take a screen shot of the recolored and displaced square and the
editor windows.