HTML: Rename

This commit is contained in:
John 2022-07-01 05:50:27 -05:00
parent 4ef962dc35
commit 4fcef54b3b
2 changed files with 19 additions and 10 deletions

View File

@ -6,7 +6,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Continually Rotate A Triangle (Button)</title> <title>Rotating pendulum in frictionless vacuum</title>
</head> </head>
<body onload="main()"> <body onload="main()">

View File

@ -18,8 +18,7 @@ class Polygon extends ShapedObject {
this.vertices = []; this.vertices = [];
for (var i = 0; i <= sides; i++) { for (var i = 0; i <= sides; i++) {
// Create vertices by adding center-point in Homogeneous coordinates to an offset vector generated from polar coordinates. // Create vertices by adding center-point in Homogeneous coordinates to an offset vector generated from polar coordinates.
this.vertices[i] = new Homogeneous2D().from_polar(radius, 2 * Math.PI * i / sides) this.vertices[i] = new Homogeneous2D().from_polar(radius, 2 * Math.PI * i / sides, 0).add_m(new Homogeneous2D(center.x, center.y, 1));
.add_m(new Homogeneous2D(center.x, center.y, 1));
} }
} }
// Wrap the init function to set the draw_primitive type to TRIANGLE_FAN // Wrap the init function to set the draw_primitive type to TRIANGLE_FAN
@ -55,17 +54,20 @@ class Anchor extends ShapedObject {
} }
} }
// This doesn't need to extend ShapedObject, but I love the symmetry // This doesn't need to extend ShapedObject, but I love the symmetry
class Pendulum extends ShapedObject { class Pendulum extends ShapedObject {
constructor({ angle = 0, length = PEN_LENGTH, radius = BOB_RADIUS} = {}) { constructor({ angle = 60, length = PEN_LENGTH, radius = BOB_RADIUS } = {}) {
super(); super();
this.angle = angle; length = 0.994
this.angle_initial = 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 }; var anchor = { x: 0, y: 0 }, bob = { x: 0, y: -length };
// create the components
this.components = [ this.components = [
new Rod({ anchor: anchor, bob: bob }), new Rod({ anchor: anchor, bob: bob }),
new Anchor({ center: anchor }), new Anchor({ center: anchor }),
new Polygon({ sides: 6, radius: radius, center: bob }) new Polygon({ radius: radius, center: bob })
]; ];
} }
@ -83,6 +85,7 @@ class Pendulum extends ShapedObject {
draw(gl, modelMatrix, u_ModelMatrix) { draw(gl, modelMatrix, u_ModelMatrix) {
// Rotate the pendulum // Rotate the pendulum
modelMatrix.setIdentity(); modelMatrix.setIdentity();
modelMatrix.translate(0, 0.5, 0, 1);
modelMatrix.rotate(this.angle, 0, 0, 1); modelMatrix.rotate(this.angle, 0, 0, 1);
// Draw each component // Draw each component
for (var component of this.components) { for (var component of this.components) {
@ -90,10 +93,16 @@ 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 the pendulum (update and perform movement)
tick() { tick() {
var now = Date.now(), elapsed = now - this.t_prev; this.tick_tock_clock_pendulum_simulation();
this.t_prev = now; //var now = Date.now(), elapsed = now - this.t_prev;
this.angle = (this.angle + (A_VELOCITY * elapsed / 1000)) % 360; //this.t_prev = now;
//this.angle = (this.angle + (A_VELOCITY * elapsed / 1000)) % 360;
} }
} }