diff --git a/Pendulum/Pendulum.html b/Pendulum/Pendulum.html index 792909c..f03cb3d 100644 --- a/Pendulum/Pendulum.html +++ b/Pendulum/Pendulum.html @@ -17,6 +17,7 @@ + diff --git a/Pendulum/Pendulum.js b/Pendulum/Pendulum.js index f541e75..d9971df 100644 --- a/Pendulum/Pendulum.js +++ b/Pendulum/Pendulum.js @@ -1,4 +1,9 @@ // 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 = ` @@ -8,6 +13,7 @@ const vertex_shader = ` void main() { gl_Position = u_ModelMatrix * a_Position; + gl_PointSize = 5.0; } `; @@ -26,92 +32,16 @@ var PEN_LENGTH = 0.8; // Rotation angle (degrees/second) var A_VELOCITY = 45.0; -// Classes -// homo2: Stores a 2d vector or point in homog. coords -class homog2 { - constructor(x = 0, y = 0, w = 0) { - this.x = x; - this.y = y; - this.w = w; - } - // Add with modify - add_m(rhs) { - if (rhs) { - this.x += rhs.x; - this.y += rhs.y; - this.w += rhs.w; - return this; - } - else return null; - } - // scalar multiply with modify - smul_m(scalar) { - if (typeof(rhs) === "number") { - this.x *= rhs; - this.y *= rhs; - this.w *= rhs; - return this; - } - else return null; - } - // copy - copy() { - return new homog2(this.x, this.y, this.w); - } - // create vector/point from 2d polar coordinates - from_polar(r = 0, theta = 0, w = 0) { - this.x = r * Math.cos(theta); - this.y = r * Math.sin(theta); - this.w = w; - return this; - } -} - -// hexagon2 class: Holds 6 vertices and a center point. Only constructs perfect hexagons. -class hexagon2 { - // constructor: Make a new regular polygon - constructor({sides = 6, radius = 0, rotation = 0, center = { x: 0, y: 0 } } = {}) { - // lenth is center + sides - this.length = 1; - this.center = new homog2(center.x, center.y, 1); - this.v = []; - for (var i = 0; i <= sides; i++) { - this.v[i] = new homog2().from_polar(radius, rotation + (i*2*Math.PI / sides)).add_m(this.center); - this.length++; - } - } - // Convert to Float32Array [center, v0, v1, ...] - to_array() { - // allocate space for center.xy + vertices.xy - var ret = new Float32Array((1 + this.v.length) * 2); - // save the center - ret[0] = this.center.x; - ret[1] = this.center.y; - // save the vertices - for (var i = 0; i < this.v.length; i++) { - var j = 2 * (i + 1); - ret[j] = this.v[i].x; - ret[j+1] = this.v[i].y; - } - return ret; - } - draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) { - // Set the rotation matrix - modelMatrix.setRotate(currentAngle, 0, 0, 1); - // Pass the rotation matrix to the vertex shader - gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); - // Clear - gl.clear(gl.COLOR_BUFFER_BIT); - // Draw the pendulum - gl.drawArrays(gl.TRIANGLE_FAN, 0, n); - } -} - -class pendulum2 { - constructor({angle = 0, length = PEN_LENGTH, radius = BOB_RADIUS} = {}) { - this.bob = new hexagon2({radius: radius, center: {x: 0, y: -length}}); - console.log(this); +// Common functions: +// acquire_buffer: Get a vertex buffer object from gl +function acquire_buffer(gl) { + // Create a buffer object + var vertexBuffer = gl.createBuffer(); + if (!vertexBuffer) { + console.log('Failed to create the buffer object'); + return -1; } + return vertexBuffer; } function main() { @@ -132,14 +62,8 @@ function main() { } // create a pendulum object - var pendulum = new pendulum2({angle: 0, length: 0}); - - // Write the positions of vertices to a vertex shader - var n = initVertexBuffers(gl, pendulum); - if (n < 0) { - console.log('Failed to set the positions of the vertices'); - return; - } + var pendulum = new Pendulum({ angle: 0, length: PEN_LENGTH, radius: BOB_RADIUS }); + init(gl, pendulum); // Specify the color for clearing gl.clearColor(0, 0, 0, 1); @@ -151,81 +75,32 @@ function main() { return; } - // Current rotation angle - var currentAngle = 0.0; - // Model matrix var modelMatrix = new Matrix4(); + // Set it to the I matrix + modelMatrix.setIdentity(); // Start drawing var tick = function () { - currentAngle = animate(currentAngle); // Update the rotation angle - pendulum.bob.draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle - requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick + // 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 initVertexBuffers(gl, pendulum) { - // var vertices = new Float32Array([ - // 0, 0.5, -0.5, -0.5, 0.5, -0.5 - // ]); - // var n = 3; // The number of vertices - var vertices = pendulum.bob.to_array(); - var n = pendulum.bob.length; - - // 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 init(gl, pendulum) { + pendulum.init(gl); } -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); - +function draw(gl, pendulum, modelMatrix, u_ModelMatrix) { // 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 + (A_VELOCITY * elapsed) / 1000.0; - return newAngle %= 360; + // Draw the pendulum + pendulum.draw(gl, modelMatrix, u_ModelMatrix); } function up() { diff --git a/Pendulum/PendulumComponents.js b/Pendulum/PendulumComponents.js new file mode 100644 index 0000000..779373c --- /dev/null +++ b/Pendulum/PendulumComponents.js @@ -0,0 +1,210 @@ +// PendulumComponents.js +// John Breaux 2022-06-30 +// Classes and data structures for Pendulum.js + +"use strict" + +// Classes +// homo2: Stores a 2d vector or point in homog. coords +class homog2 { + constructor(x = 0, y = 0, w = 0) { + this.x = x; + this.y = y; + this.w = w; + } + // Add with modify + add_m(rhs) { + if (rhs) { + this.x += rhs.x; + this.y += rhs.y; + this.w += rhs.w; + return this; + } + else return null; + } + // scalar multiply with modify + smul_m(scalar) { + if (typeof (rhs) === "number") { + this.x *= rhs; + this.y *= rhs; + this.w *= rhs; + return this; + } + else return null; + } + // copy + copy() { + return new homog2(this.x, this.y, this.w); + } + // create vector/point from 2d polar coordinates + from_polar(r = 0, theta = 0, w = 0) { + this.x = r * Math.cos(theta); + this.y = r * Math.sin(theta); + this.w = w; + return this; + } +} + + +class Anchor { + constructor({ center = { x: 0, y: 0 } } = {}) { + this.position = new homog2(center.x, center.y, 1); + } + // Convert to Float32Array [center, v0, v1, ...] + vertex_array() { + // allocate space for center.xy + vertices.xy + var ret = new Float32Array(2); + // save the vertices + ret[0] = this.position.x, ret[1] = this.position.y; + console.log(ret); + return ret; + } + // Generate the index_array for the shape + index_array() { + var ret = new Uint8Array(1); + ret[0] = 0; + console.log(ret); + return ret; + } + + init(gl) { + // Make the buffers + this.vertexBuffer = acquire_buffer(gl); + this.indexBuffer = acquire_buffer(gl); + + // Bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + + // Acquire a reference to a_Position + 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); + + // Write date into the buffers + gl.bufferData(gl.ARRAY_BUFFER, this.vertex_array(), gl.STATIC_DRAW); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.index_array(), gl.STATIC_DRAW); + } + + draw(gl, modelMatrix, u_ModelMatrix) { + // Bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + // Pass the rotation matrix to the vertex shader + gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); + // Draw the Anchor + gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_BYTE, 0); + } +} + +// hexagon2 class: Holds vertices and a center point. Only constructs regular polygons +class Polygon { + // constructor: Make a new regular polygon + constructor({ sides = 6, radius = 1, rotation = 0, center = { x: 0, y: 0 }, color = { r: 0, g: 0, b: 1 } } = {}) { + this.length = 0; + // vertices + this.vertices = []; + this.center = new homog2(center.x, center.y, 1); + for (var i = 0; i <= sides; i++) { + this.vertices[i] = new homog2().from_polar(radius, rotation + (i * 2 * Math.PI / sides)).add_m(this.center); + this.length++; + } + } + // Convert to Float32Array [center, v0, v1, ...] + vertex_array() { + // allocate space for center.xy + vertices.xy + var ret = new Float32Array((this.vertices.length) * 2); + // save the vertices + for (var i = 0; i < this.vertices.length; i++) { + var j = 2 * i; + ret[j] = this.vertices[i].x; + ret[j + 1] = this.vertices[i].y; + } + return ret; + } + // Generate the index_array for the shape + index_array() { + var ret = new Uint8Array(this.vertices.length + 1); + for (var i = 0; i < this.vertices.length; i++) { + ret[i] = i + } + ret[this.vertices.length] = 0; + return ret; + } + + init(gl) { + // Make the buffers + this.vertexBuffer = acquire_buffer(gl); + this.indexBuffer = acquire_buffer(gl); + + // Bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + + // Acquire a reference to a_Position + 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); + + // Write date into the buffers + gl.bufferData(gl.ARRAY_BUFFER, this.vertex_array(), gl.STATIC_DRAW); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.index_array(), gl.STATIC_DRAW); + } + + draw(gl, modelMatrix, u_ModelMatrix) { + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + // Pass the rotation matrix to the vertex shader + gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); + // Draw the shape + gl.drawElements(gl.TRIANGLE_FAN, this.length, gl.UNSIGNED_BYTE, 0); + } +} + +class Pendulum { + constructor({ angle = 0, length = PEN_LENGTH, radius = BOB_RADIUS, anchor = { x: 0, y: 0 } } = {}) { + this.angle = angle; + this.components = [ + new Anchor({ center: anchor }), + new Polygon({ radius: radius, center: { x: 0, y: -length } }) + ]; + } + + // Tick the pendulum (update and perform movement) + tick() { + var now = Date.now(), elapsed = now - this.t_prev; + this.t_prev = now; + this.angle = (this.angle + (A_VELOCITY * elapsed / 1000)) % 360; + } + + // Initialize the pendulum + init(gl) { + // initialize the components + for(var component of this.components) { + component?.init(gl); + } + // start the clock + this.t_prev = Date.now(); + } + // Draw the pendulum + draw(gl, modelMatrix, u_ModelMatrix) { + // Rotate the pendulum + modelMatrix.setRotate(this.angle, 0, 0, 1); + // Draw each component + for (var component of this.components) { + component?.draw(gl, modelMatrix, u_ModelMatrix); + } + } +} \ No newline at end of file