Beginning WebGL - HTML5 Games Most Wanted - page 152

Figure 7-9. Wireframe of an octahedron with its eight faces and six vertex points
As you can see from Figure 7-9, vertices A, B, C, and D of an octahedron lie on the same plane and form
a square. Vertices E and F mirror each other. The line connecting EF intersects the middle of the square—
the intersection of AD and BC to be precise. EF and the plane ABCD are perpendicular.
Starting from the code in the previous demo (Listing 7-12), we remove the squareVerticesBuffer variable
and define several new variables, as shown in Listing 7-13. These will be explained as they are
encountered.
Listing 7-13. New Variables for Our Second Demo
octahedronVertexPositionBuffer,
octahedronVertexColorBuffer,
octahedronVertexIndexBuffer, //index buffer for our faces
canvas = null, //canvas DOM element reference
paused = false, //pause/resume animation flag
height = 1.41, //rounded square root of two
rotationRadians = 0.0, //the amount to rotate our octahedron
rotationVector = [1.0, 1.0, 1.0], //the axis to rotate our octahedron
//experiment with other values between 0
and 1
rotationIncrement = 0, //amount to increase the rotation each animation
iteration
x = 0, //translation amounts
y = 0,
z = 0,
translationAngle = 0; //angle used to calculate x,y,z translation
User input
Next, as shown In Listing 7-14, we bind the JavaScript onkeyup event to our HTML document by calling the
jQuery function keyup . We also make the canvas variable global.