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

Initial Commit

Browse Source
This commit is contained in:
John 2022-06-20 00:00:11 -05:00
commit b67712207d
4 changed files with 135 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
# Ignored files go here

18
ClickedPoints.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a point with a mouse click</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="ClickedPoints.js"></script>
</body>
</html>

95
ClickedPoints.js Normal file
View File

@ -0,0 +1,95 @@
// ClickedPints.js (c) 2012 matsuda, 2022 Jonathon Doran
// Note that this shader takes the position from the main
// program, rather than hard-coding it.
const vertex_shader = `
attribute vec4 a_Position; // vertex-shader attribute
void main()
{
gl_Position = a_Position;
gl_PointSize = 10.0;
} `;
const fragment_shader = `
void main()
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.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;
}
// Get the storage location of a_Position
// This is in video memory
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;
}
// Register function (event handler) to be called on a mouse press
canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); };
// Specify the color for clearing <canvas>
gl.clearColor(0.0, 1.0, 0.0, 1.0);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
}
// The array for the position of a mouse press:
// Data is pushed onto this array, which resizes dynamically
var g_points = [];
function click(ev, gl, canvas, a_Position)
{
var x = ev.clientX; // x coordinate of a mouse pointer
var y = ev.clientY; // y coordinate of a mouse pointer
var rect = ev.target.getBoundingClientRect();
// Coordinate conversion because canvas and WebGL have different
// origins.
x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
// Store the coordinates to g_points array
g_points.push(x);
g_points.push(y);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Upon each click, the canvas is cleared and all saved points
// are redrawn. Each point has two values in the array (x, y).
var len = g_points.length;
for(var i = 0; i < len; i += 2)
{
// Pass the position of a point to a_Position variable
gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);
// Draw
gl.drawArrays(gl.POINTS, 0, 1);
}
}

21
README.md Normal file
View File

@ -0,0 +1,21 @@
# CSCE 4230 Computer Graphics
## Homework 1
### Problem Statement
Modify the ClickedPoints example as follow:
1. Change the canvas size from 400x400 to 600x400.
2. Change the clearing color (background color) from black to grey level 0.3. That is, use 0.3 for for each of the RGB values.
3. Change the fragment color (point color) from red to yellow (with maximum intensity).
4. Change the point size from 10 to 25.
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.
### Solution
```TODO: Solution```