diff --git a/ClickedPoints.html b/ClickedPoints/ClickedPoints.html similarity index 89% rename from ClickedPoints.html rename to ClickedPoints/ClickedPoints.html index 863d19a..6487e43 100644 --- a/ClickedPoints.html +++ b/ClickedPoints/ClickedPoints.html @@ -6,7 +6,7 @@ - + Please use a browser that supports "canvas" diff --git a/ClickedPoints.js b/ClickedPoints/ClickedPoints.js similarity index 86% rename from ClickedPoints.js rename to ClickedPoints/ClickedPoints.js index da510c8..fd5afe2 100644 --- a/ClickedPoints.js +++ b/ClickedPoints/ClickedPoints.js @@ -4,27 +4,27 @@ // program, rather than hard-coding it. const vertex_shader = ` attribute vec4 a_Position; // vertex-shader attribute - void main() + void main() { gl_Position = a_Position; - gl_PointSize = 10.0; + gl_PointSize = 25.0; } `; 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 element var canvas = document.getElementById('webgl'); // Get the rendering context for WebGL var gl = getWebGLContext(canvas); - if (!gl) + if (!gl) { console.log('Failed to get the rendering context for WebGL'); return; @@ -40,7 +40,7 @@ function main() // 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) + if (a_Position < 0) { console.log('Failed to get the storage location of a_Position'); return; @@ -50,7 +50,7 @@ function main() 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); + gl.clearColor(0.3, 0.3, 0.3, 1.0); // Clear gl.clear(gl.COLOR_BUFFER_BIT); @@ -58,23 +58,23 @@ function main() // The array for the position of a mouse press: // 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 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(x); g_points.push(y); // Clear @@ -82,9 +82,9 @@ function click(ev, gl, canvas, a_Position) // 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) + 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);