Initial Commit

2022-06-20 00:00:11 -05:00
commit b67712207d
4 changed files with 135 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+# Ignored files go here
--- a/ClickedPoints.html
+++ b/ClickedPoints.html
@@ -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>
--- a/ClickedPoints.js
+++ 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 <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);
+  }
+}
--- a/README.md
+++ 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```