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">
<head>
<meta charset="utf-8" />
<title>Continually Rotate A Triangle (Button)</title>
<title>Rotating pendulum in frictionless vacuum</title>
</head>
<body onload="main()">

View File

@ -18,8 +18,7 @@ class Polygon extends ShapedObject {
this.vertices = [];
for (var i = 0; i <= sides; i++) {
// 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)
.add_m(new Homogeneous2D(center.x, center.y, 1));
this.vertices[i] = new Homogeneous2D().from_polar(radius, 2 * Math.PI * i / sides, 0).add_m(new Homogeneous2D(center.x, center.y, 1));
}
}
// 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
class Pendulum extends ShapedObject {
constructor({ angle = 0, length = PEN_LENGTH, radius = BOB_RADIUS} = {}) {
constructor({ angle = 60, length = PEN_LENGTH, radius = BOB_RADIUS } = {}) {
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 };
// create the components
this.components = [
new Rod({ anchor: anchor, bob: bob }),
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) {
// 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) {
@ -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() {
var now = Date.now(), elapsed = now - this.t_prev;
this.t_prev = now;
this.angle = (this.angle + (A_VELOCITY * elapsed / 1000)) % 360;
this.tick_tock_clock_pendulum_simulation();
//var now = Date.now(), elapsed = now - this.t_prev;
//this.t_prev = now;
//this.angle = (this.angle + (A_VELOCITY * elapsed / 1000)) % 360;
}
}