j/4230-hw-1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Pendulum: Create a class for regular polygon

Browse Source
This commit is contained in:
John
2022-06-30 16:10:19 -05:00
parent b1936bdcb0
commit 3b4b277871
1 changed files with 128 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
Pendulum/Pendulum.js
View File

@@ -1,4 +1,5 @@
// RotatingTranslatedTriangle.js (c) 2012 matsuda
"use strict"
const vertex_shader = `
attribute vec4 a_Position;
@@ -16,11 +17,104 @@ const fragment_shader = `
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} `;
// Point size of the anchor
var POINT_SIZE = 5;
// Radius of the bob
var BOB_RADIUS = 0.1;
// length of the wire
var PEN_LENGTH = 0.8;
// Rotation angle (degrees/second)
var ANGLE_STEP = 45.0;
var A_VELOCITY = 45.0;
function main()
{
// 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 <canvas>
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);
}
}
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
@@ -32,16 +126,17 @@ function main()
}
// Initialize shaders
if (!initShaders(gl, vertex_shader, fragment_shader))
{
if (!initShaders(gl, vertex_shader, fragment_shader)) {
console.log('Failed to intialize shaders.');
return;
}
// 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);
if (n < 0)
{
var n = initVertexBuffers(gl, pendulum);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
@@ -51,8 +146,7 @@ function main()
// Get storage location of u_ModelMatrix
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
if (!u_ModelMatrix)
{
if (!u_ModelMatrix) {
console.log('Failed to get the storage location of u_ModelMatrix');
return;
}
@@ -64,26 +158,25 @@ function main()
var modelMatrix = new Matrix4();
// Start drawing
var tick = function()
{
var tick = function () {
currentAngle = animate(currentAngle); // Update the rotation angle
draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle
pendulum.bob.draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle
requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick
};
tick();
}
function initVertexBuffers(gl)
{
var vertices = new Float32Array ([
0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var n = 3; // The number of vertices
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)
{
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
@@ -96,8 +189,7 @@ function initVertexBuffers(gl)
// Assign the buffer object to a_Position variable
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if(a_Position < 0)
{
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
@@ -109,8 +201,7 @@ function initVertexBuffers(gl)
return n;
}
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix)
{
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
// Set the rotation matrix
modelMatrix.setRotate(currentAngle, 0, 0, 1);
modelMatrix.translate(0.35, 0, 0);
@@ -127,23 +218,20 @@ function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix)
// Last time that this function was called
var g_last = Date.now();
function animate(angle)
{
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 + (ANGLE_STEP * elapsed) / 1000.0;
var newAngle = angle + (A_VELOCITY * elapsed) / 1000.0;
return newAngle %= 360;
}
function up()
{
ANGLE_STEP += 10;
function up() {
A_VELOCITY += 10;
}
function down()
{
ANGLE_STEP -= 10;
function down() {
A_VELOCITY -= 10;
}