101 lines
2.1 KiB
JavaScript
101 lines
2.1 KiB
JavaScript
// 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;
|
|
} `;
|
|
|
|
// Point size of the anchor
|
|
var POINT_SIZE = 5;
|
|
// Radius of the bob
|
|
var BOB_RADIUS = 0.1;
|
|
// length of the wire
|
|
var PEN_LENGTH = 0.8;
|
|
// Rotation angle (degrees/second)
|
|
var A_VELOCITY = 45.0;
|
|
|
|
|
|
|
|
function main() {
|
|
// Retrieve <canvas> 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({ angle: 0, length: PEN_LENGTH, radius: BOB_RADIUS });
|
|
pendulum.init(gl);
|
|
|
|
// Specify the color for clearing <canvas>
|
|
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 <canvas>
|
|
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;
|
|
}
|