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

Add Program 3: Pendulum and problem statement for Program 2

Browse Source
This commit is contained in:
John 2022-06-21 20:49:01 -05:00
parent 19dbbd84f6
commit f251b3df76
3 changed files with 209 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Pendulum/Pendulum.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Continually Rotate A Triangle (Button)</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<p>
<button type="button" onclick="up()">UP</button>
<button type="button" onclick="down()">DOWN</button>
</p>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script src="Pendulum.js"></script>
</body>
</html>

149
Pendulum/Pendulum.js Normal file
View File

@ -0,0 +1,149 @@
// RotatingTranslatedTriangle.js (c) 2012 matsuda
const vertex_shader = `
attribute vec4 a_Position;
uniform mat4 u_ModelMatrix;
void main()
{
gl_Position = u_ModelMatrix * a_Position;
} `;
const fragment_shader = `
void main()
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} `;
// Rotation angle (degrees/second)
var ANGLE_STEP = 45.0;
function main()
{
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, vertex_shader, fragment_shader))
{
console.log('Failed to intialize shaders.');
return;
}
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl);
if (n < 0)
{
console.log('Failed to set the positions of the vertices');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0, 0, 0, 1);
// Get storage location of u_ModelMatrix
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
if (!u_ModelMatrix)
{
console.log('Failed to get the storage location of u_ModelMatrix');
return;
}
// Current rotation angle
var currentAngle = 0.0;
// Model matrix
var modelMatrix = new Matrix4();
// Start drawing
var tick = function()
{
currentAngle = animate(currentAngle); // Update the rotation angle
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
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer)
{
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Assign the buffer object to a_Position variable
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if(a_Position < 0)
{
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
return n;
}
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix)
{
// Set the rotation matrix
modelMatrix.setRotate(currentAngle, 0, 0, 1);
modelMatrix.translate(0.35, 0, 0);
// 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 rectangle
gl.drawArrays(gl.TRIANGLES, 0, n);
}
// Last time that this function was called
var g_last = Date.now();
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;
return newAngle %= 360;
}
function up()
{
ANGLE_STEP += 10;
}
function down()
{
ANGLE_STEP -= 10;
}

40
README.md
View File

@ -1,7 +1,12 @@
# CSCE 4230 Computer Graphics # CSCE 4230 Computer Graphics
## Homework 1
### Problem Statement Dr. Doran's in-person hour long commute.
# Program 1
Warm Up
## Problem Statement
Modify the ClickedPoints example as follow: Modify the ClickedPoints example as follow:
1. Change the canvas size from 400x400 to 600x400. 1. Change the canvas size from 400x400 to 600x400.
@ -15,3 +20,34 @@ Modify the ClickedPoints example as follow:
Submit both your HTML and JS on Canvas. Please do NOT put them in Zip archives or similar. Submit both your HTML and JS on Canvas. Please do NOT put them in Zip archives or similar.
This shouldn't take very long at all to do, and is really mainly a warm-up exercise. This shouldn't take very long at all to do, and is really mainly a warm-up exercise.
# Program 2
Play the Chaos Game
### Problem Statement:
Write a WebGL program that implements Michael Barnsley's 'chaos game'. See this link (Links to an external site.) for more information.
Submit your HTML and js files on Canvas
# Program 3
Make a rotating Pendulum
### Problem Statement:
Write a WebGL program that displays a rotating pendulum.
The pendulum bob is free to rotate through 360 degrees about an anchor point at the center of the canvas. The pendulum has the following three components:
1) The anchor point is a green square centered at the origin (0,0), with point size = 5 pixels.
2) The bob is a blue hexagon of radius r=0.1. Render this with a triangle fan centered at the origin (along with a ModelView matrix that translates and rotates).
3) The bob is attached to the anchor point by a rigid red wire of length l=0.8.
Use global variables for the point size of the anchor, the radius of the bob, the length of the wire, and the angular velocity of rotation in degrees per second. Set the initial angular velocity to 45 (degrees per second) and allow an interactive user to increase or decrease the value in multiples of 10 degrees per second with button presses.
Submit your HTML and JS files on Canvas