commit b67712207d436bf6c81563d105a3af6b327d0849 Author: John Breaux Date: Mon Jun 20 00:00:11 2022 -0500 Initial Commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2214dc3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +# Ignored files go here \ No newline at end of file diff --git a/ClickedPoints.html b/ClickedPoints.html new file mode 100644 index 0000000..863d19a --- /dev/null +++ b/ClickedPoints.html @@ -0,0 +1,18 @@ + + + + + Draw a point with a mouse click + + + + + Please use a browser that supports "canvas" + + + + + + + + diff --git a/ClickedPoints.js b/ClickedPoints.js new file mode 100644 index 0000000..da510c8 --- /dev/null +++ b/ClickedPoints.js @@ -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 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 + gl.clearColor(0.0, 1.0, 0.0, 1.0); + + // Clear + 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 + 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); + } +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..f03dcfc --- /dev/null +++ b/README.md @@ -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``` \ No newline at end of file