// RotatingTranslatedTriangle.js (c) 2012 matsuda // Pendulum.js // John Breaux 2022-06-30 // Simulates a pendulum in a frictionless vacuum with no gravity "use strict"; const vertex_shader = ` attribute vec4 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * a_Position; gl_PointSize = 5.0; } `; const fragment_shader = ` precision mediump float; uniform vec4 u_Color; void main() { gl_FragColor = u_Color; } `; 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, vertex_shader, fragment_shader)) { console.log('Failed to intialize shaders.'); return; } // create a pendulum object var pendulum = new Pendulum({ length: PEN_LENGTH, radius: BOB_RADIUS }); pendulum.init(gl); // 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; } // Model matrix var modelMatrix = new Matrix4(); // Set it to the I matrix modelMatrix.setIdentity(); // Start drawing var tick = function () { // Tick the pendulum pendulum.tick(); // Draw the pendulum draw(gl, pendulum, modelMatrix, u_ModelMatrix); // Request that the browser ?calls tick requestAnimationFrame(tick, canvas); }; tick(); } function draw(gl, pendulum, modelMatrix, u_ModelMatrix) { // Clear gl.clear(gl.COLOR_BUFFER_BIT); // Draw the pendulum pendulum.draw(gl, modelMatrix, u_ModelMatrix); } function up() { A_VELOCITY += 10; } function down() { A_VELOCITY -= 10; } function real() { REAL_PENDULUM_MODE = ! REAL_PENDULUM_MODE; }