Real Pendulum Mode

Pendulum/Pendulum.html

@@ -16,6 +16,7 @@
     <p>
       <button type="button" onclick="up()">UP</button>
       <button type="button" onclick="down()">DOWN</button>
+      <button type="button" onclick="real()">REAL</button>
     </p>
     <script src="../lib/webgl-utils.js"></script>
     <script src="../lib/webgl-debug.js"></script>

Pendulum/Pendulum.js

@@ -89,3 +89,7 @@ function up() {
 function down() {
    A_VELOCITY -= 10;
 }
+
+function real() {
+   REAL_PENDULUM_MODE = ! REAL_PENDULUM_MODE;
+}

Pendulum/PendulumComponents.js

@@ -8,7 +8,6 @@
 // Classes
 //
 
-
 // Polygon class: Construct and display a regular polygon in 2D
 class Polygon extends ShapedObject {
    // constructor: Make a new regular polygon
@@ -58,8 +57,8 @@ class Anchor extends ShapedObject {
 class Pendulum extends ShapedObject {
    constructor({ angle = 60, length = PEN_LENGTH, radius = BOB_RADIUS } = {}) {
       super();
-      length = 0.994
       this.angle_initial = angle;
+      this.angle = angle;
       this.period = Math.sqrt(9.81 / length);
       // define where anchor and bob are
       var anchor = { x: 0, y: 0 }, bob = { x: 0, y: -length };
@@ -67,7 +66,7 @@ class Pendulum extends ShapedObject {
       this.components = [
          new Rod({ anchor: anchor, bob: bob }),
          new Anchor({ center: anchor }),
-         new Polygon({ radius: radius, center: bob })
+         new Polygon({ sides: 4, radius: radius, center: bob })
       ];
    }
 
@@ -85,7 +84,6 @@ class Pendulum extends ShapedObject {
    draw(gl, modelMatrix, u_ModelMatrix) {
       // Rotate the pendulum
       modelMatrix.setIdentity();
-      modelMatrix.translate(0, 0.5, 0, 1);
       modelMatrix.rotate(this.angle, 0, 0, 1);
       // Draw each component
       for (var component of this.components) {
@@ -93,16 +91,15 @@ class Pendulum extends ShapedObject {
       }
    }
 
-   tick_tock_clock_pendulum_simulation() {
-      var now = Date.now(), elapsed = (now - this.t_prev) / 1000 * this.period;
-      this.angle = this.angle_initial * Math.cos(elapsed);
-   }
-
    // Tick the pendulum (update and perform movement)
    tick() {
-      this.tick_tock_clock_pendulum_simulation();
+      if (REAL_PENDULUM_MODE) {
-      //var now = Date.now(), elapsed = now - this.t_prev;
+         var now = Date.now(), elapsed = (now - this.t_prev) / 1000 * this.period;
-      //this.t_prev = now;
+         this.angle = this.angle_initial * Math.cos(elapsed);
-      //this.angle = (this.angle + (A_VELOCITY * elapsed / 1000)) % 360;
+      } else {
+         var now = Date.now(), elapsed = now - this.t_prev;
+         this.t_prev = now;
+         this.angle = (this.angle + (A_VELOCITY * elapsed / 1000)) % 360;
+      }
    }
 }

Pendulum/common.js

@@ -17,6 +17,9 @@ var PEN_LENGTH = 0.8;
 // Rotation angle (degrees/second)
 var A_VELOCITY = 45.0;
 
+// Enable or disable real pendulum mode
+var REAL_PENDULUM_MODE = false;
+
 //
 // Common functions:
 //