Homework Sourse Homework Sourse

Write a WebGL program that displays a rotating pendulum The 

         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.

Solution

// Vertex shader program var VSHADER_SOURCE = \'attribute vec4 a_Position;\ \' + \'uniform mat4 u_ModelMatrix;\ \' + \'void main() {\ \' + \' gl_Position = u_ModelMatrix * a_Position;\ \' + \'}\ \'; // Fragment shader program var FSHADER_SOURCE = \'void main() {\ \' + \' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\ \' + \'}\ \'; // 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 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 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; }
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 canv

Get Help Now

Submit a Take Down Notice
Tutor
Tutor: Dr Jack
Most rated tutor on our site