4230-hw-1/Pendulum/PendulumComponents.js

// PendulumComponents.js
// John Breaux  2022-06-30
// Classes, functions, and data structures for Pendulum.js

"use strict"

// 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 acquire_attribute(gl, name, size, type) {
   // Acquire a reference to named attr
   var ret = gl.getAttribLocation(gl.program, name);
   if (ret < 0) {
      console.log(`Failed to get the storage location of ${name}`);
      return -1;
   }
   gl.vertexAttribPointer(ret, size, type, false, 0, 0);
   return ret;
}
function acquire_uniform(gl, name) {
   // Acquire a reference to named attr
   var ret = gl.getUniformLocation(gl.program, name);
   if (!ret) {
      console.log(`Failed to get the storage location of ${name}`);
      return -1;
   }
   return ret;
}

// Classes
//   homo2: Stores a 2d vector or point in homog. coords
class Homogeneous2D {
   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 Homogeneous2D(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 Rod {
   constructor({ anchor = { x: 0, y: 0 }, bob = { x: 0, y: 0 }, color = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 } } = {}) {
      // Set the object's vertices
      this.vertices = [ new Homogeneous2D(anchor.x, anchor.y, 1),
      new Homogeneous2D(bob.x, bob.y, 1)]
      // Set object's color
      this.color = [color.r, color.g, color.b, color.a];
   }
   // Convert to Float32Array [x, y]
   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;
   }
   // Initialize the object's drawing parameters
   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);

      // 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 the object
   draw(gl, modelMatrix, u_ModelMatrix) {
      // Bind the buffers
      gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

      // Set the object's color
      var u_Color = acquire_uniform(gl, 'u_Color');
      gl.uniform4fv(u_Color, this.color);

      // get a_Position
      var a_Position = acquire_attribute(gl, 'a_Position', 2, gl.FLOAT);
      // Enable the assignment to a_Position variable
      gl.enableVertexAttribArray(a_Position);

      // Pass the rotation matrix to the vertex shader
      gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
      // Draw the Anchor
      gl.drawElements(gl.LINES, 2, gl.UNSIGNED_BYTE, 0);
   }
}

class Anchor {
   constructor({ center = { x: 0, y: 0 }, color = { r: 0.0, g: 1.0, b: 0.0, a: 1.0 } } = {}) {
      this.position = new Homogeneous2D(center.x, center.y, 1);
      // Set object color
      this.color = [color.r, color.g, color.b, color.a];
   }
   // Convert to Float32Array [x, y]
   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;
   }
   // Initialize the object's drawing parameters
   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);

      // 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 the object
   draw(gl, modelMatrix, u_ModelMatrix) {
      // Bind the buffers
      gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

      // Set the object's color
      var u_Color = acquire_uniform(gl, 'u_Color');
      gl.uniform4fv(u_Color, this.color);

      // get a_Position
      var a_Position = acquire_attribute(gl, 'a_Position', 2, gl.FLOAT);
      // Enable the assignment to a_Position variable
      gl.enableVertexAttribArray(a_Position);

      // 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);
   }
}

// Polygon 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, a: 1 } } = {}) {
      this.length = 0;
      // Mark center point
      this.center = new Homogeneous2D(center.x, center.y, 1);
      // Create vertices
      this.vertices = [];
      for (var i = 0; i <= sides; i++) {
         this.vertices[i] = new Homogeneous2D().from_polar(radius, rotation + (i * 2 * Math.PI / sides)).add_m(this.center);
         this.length++;
      }
      // Set object color
      this.color = [color.r, color.g, color.b, color.a];
   }
   // 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;
   }
   // Initialize the object's drawing parameters
   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);

      // 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 the object
   draw(gl, modelMatrix, u_ModelMatrix) {
      // Bind the buffers
      gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

      // Set the object's color
      var u_Color = acquire_uniform(gl, 'u_Color');
      gl.uniform4fv(u_Color, this.color);

      // get a_Position
      var a_Position = acquire_attribute(gl, 'a_Position', 2, gl.FLOAT);
      // Enable the assignment to a_Position variable
      gl.enableVertexAttribArray(a_Position);

      // 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;
      var bob = {x: 0, y: -length};
      this.components = [
         new Rod({ anchor: anchor, bob: bob}),
         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);
      }
   }
}