Question

        Write a WebGL program that displays a rotating pendulum.  The
        pendulum bob is free to rotate through 360 degrees about an anchor 
        point at the center of the canvas.  The pendulum has the following 
        three components.
 
        1)  The anchor point is a green square centered at the origin 
            (0,0) with point size = 5 pixels.

        2)  The bob is a blue hexagon of radius r = 0.1.  Render this with
            a triangle fan centered at the origin (along with a ModelView
            matrix that translates and rotates).

        3)  The bob is attached to the anchor point by a rigid red wire of
            length l = 0.8.

        Use global variables for the point size of the anchor, the radius
        of the bob, the length of the wire, and the angular velocity of 
        rotation in degrees per second.  Set the initial angular velocity
        to 45 and allow an interactive user to increase or decrease the
        value in multiples of 10 degrees per second with button presses.

Below is the code template I am suppost to change to create the above pendulum (not the answer):

// Vertex shader program
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'uniform mat4 u_ModelMatrix;\n' +
  'void main() {\n' +
  '  gl_Position = u_ModelMatrix * a_Position;\n' +
  '}\n';

// Fragment shader program
var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
  '}\n';

// Rotation angle (degrees/second)
var ANGLE_STEP = 45.0;

function main() {
  // Retrieve  element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // Write the positions of vertices to a vertex shader
  var n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }

  // Specify the color for clearing 
  gl.clearColor(0, 0, 0, 1);

  // Get storage location of u_ModelMatrix
  var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
  if (!u_ModelMatrix) { 
    console.log('Failed to get the storage location of u_ModelMatrix');
    return;
  }

  // Current rotation angle
  var currentAngle = 0.0;
  // Model matrix
  var modelMatrix = new Matrix4();

  // Start drawing
  var tick = function() {
    currentAngle = animate(currentAngle);  // Update the rotation angle
    draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);   // Draw the triangle
    requestAnimationFrame(tick, canvas);   // Request that the browser ?calls tick
  };
  tick();
}

function initVertexBuffers(gl) {
  var vertices = new Float32Array ([
    0, 0.5,   -0.5, -0.5,   0.5, -0.5
  ]);
  var n = 3;   // The number of vertices

  // Create a buffer object
  var vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  // Bind the buffer object to target
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // Write date into the buffer object
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  // Assign the buffer object to a_Position variable
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if(a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

  // Enable the assignment to a_Position variable
  gl.enableVertexAttribArray(a_Position);

  return n;
}

function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
  // Set the rotation matrix
  modelMatrix.setRotate(currentAngle, 0, 0, 1);
  modelMatrix.translate(0.35, 0, 0);
 
  // Pass the rotation matrix to the vertex shader
  gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

  // Clear 
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Draw the rectangle
  gl.drawArrays(gl.TRIANGLES, 0, n);
}

// Last time that this function was called
var g_last = Date.now();
function animate(angle) {
  // Calculate the elapsed time
  var now = Date.now();
  var elapsed = now - g_last;
  g_last = now;
  // Update the current rotation angle (adjusted by the elapsed time)
  var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
  return newAngle %= 360;
}

function up() {
  ANGLE_STEP += 10; 
}

function down() {
  ANGLE_STEP -= 10; 
}

Also here is the HTML code for the javascript code above:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Continually Rotate A Triangle (Button)</title>
</head>

<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<p>
<button type="button" onclick="up()">UP</button>
<button type="button" onclick="down()">DOWN</button>
</p>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/webgl-utils.js"></script>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/webgl-debug.js"></script>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/cuon-utils.js"></script>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/cuon-matrix.js"></script>
<script src="RotatingTriangle_withButtons.js"></script>
</body>
</html>

Can someone help with this?

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Continually Rotate A Triangle (Button)</title>
</head>

<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<p>
<button type="button" onclick="up()">UP</button>
<button type="button" onclick="down()">DOWN</button>
</p>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/webgl-utils.js"></script>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/webgl-debug.js"></script>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/cuon-utils.js"></script>
<script src="http://www.cse.unt.edu/~renka/5220/matsuda/lib/cuon-matrix.js"></script>
<script src="RotatingTriangle_withButtons.js"></script>
</body>
</html>