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

Complete the assignment

Browse Source
This commit is contained in:
John 2022-06-20 00:11:49 -05:00
parent a360ca4816
commit f6d9bbadb9
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ClickedPoints.html → ClickedPoints/ClickedPoints.html
View File

@ -6,7 +6,7 @@
</head> </head>
<body onload="main()"> <body onload="main()">
<canvas id="webgl" width="400" height="400"> <canvas id="webgl" width="600" height="400">
Please use a browser that supports "canvas" Please use a browser that supports "canvas"
</canvas> </canvas>

32
ClickedPoints.js → ClickedPoints/ClickedPoints.js
View File

@ -4,27 +4,27 @@
// program, rather than hard-coding it. // program, rather than hard-coding it.
const vertex_shader = ` const vertex_shader = `
attribute vec4 a_Position; // vertex-shader attribute attribute vec4 a_Position; // vertex-shader attribute
void main() void main()
{ {
gl_Position = a_Position; gl_Position = a_Position;
gl_PointSize = 10.0; gl_PointSize = 25.0;
} `; } `;
const fragment_shader = ` const fragment_shader = `
void main() void main()
{ {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
} `; } `;
function main() function main()
{ {
// Retrieve <canvas> element // Retrieve <canvas> element
var canvas = document.getElementById('webgl'); var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL // Get the rendering context for WebGL
var gl = getWebGLContext(canvas); var gl = getWebGLContext(canvas);
if (!gl) if (!gl)
{ {
console.log('Failed to get the rendering context for WebGL'); console.log('Failed to get the rendering context for WebGL');
return; return;
@ -40,7 +40,7 @@ function main()
// Get the storage location of a_Position // Get the storage location of a_Position
// This is in video memory // This is in video memory
var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 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'); console.log('Failed to get the storage location of a_Position');
return; return;
@ -50,7 +50,7 @@ function main()
canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); }; canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); };
// Specify the color for clearing <canvas> // Specify the color for clearing <canvas>
gl.clearColor(0.0, 1.0, 0.0, 1.0); gl.clearColor(0.3, 0.3, 0.3, 1.0);
// Clear <canvas> // Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
@ -58,23 +58,23 @@ function main()
// The array for the position of a mouse press: // The array for the position of a mouse press:
// Data is pushed onto this array, which resizes dynamically // Data is pushed onto this array, which resizes dynamically
var g_points = []; var g_points = [];
function click(ev, gl, canvas, a_Position) function click(ev, gl, canvas, a_Position)
{ {
var x = ev.clientX; // x coordinate of a mouse pointer var x = ev.clientX; // x coordinate of a mouse pointer
var y = ev.clientY; // y coordinate of a mouse pointer var y = ev.clientY; // y coordinate of a mouse pointer
var rect = ev.target.getBoundingClientRect(); var rect = ev.target.getBoundingClientRect();
// Coordinate conversion because canvas and WebGL have different // Coordinate conversion because canvas and WebGL have different
// origins. // origins.
x = ((x - rect.left) - canvas.width/2)/(canvas.width/2); x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
y = (canvas.height/2 - (y - rect.top))/(canvas.height/2); y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
// Store the coordinates to g_points array // Store the coordinates to g_points array
g_points.push(x); g_points.push(x);
g_points.push(y); g_points.push(y);
// Clear <canvas> // Clear <canvas>
@ -82,9 +82,9 @@ function click(ev, gl, canvas, a_Position)
// Upon each click, the canvas is cleared and all saved points // Upon each click, the canvas is cleared and all saved points
// are redrawn. Each point has two values in the array (x, y). // are redrawn. Each point has two values in the array (x, y).
var len = g_points.length; var len = g_points.length;
for(var i = 0; i < len; i += 2) for(var i = 0; i < len; i += 2)
{ {
// Pass the position of a point to a_Position variable // Pass the position of a point to a_Position variable
gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0); gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);