points.html code Points attribute vec4 vPosition; attribute vec4 vColor; varying vec4 fCol; void main() { gl_Position = vPosition; gl_PointSize = 5.; fCol = vColor; }

points.html code

points.js code

// some globals var gl, program; var MaxPoints = 100, counter = 0, vertices = [], cols = [], delay = 100; var vBuffer , cBuffer; window.onload = function init() { // get the canvas handle from the document s DOM var canvas = document.getElementById( "gl-canvas" ); // initialize webgl gl = initWebGL(canvas ); gl.viewport( 0, 0, canvas.width , canvas.height ); gl.clearColor( 0.5, 0.5, 0.5, 1.0 ); // Load shaders -- all work done in init_shaders .js program = initShaders(gl, "vertex -shader", "fragment -shader"); // make this program the current shader program gl.useProgram(program ); // create a vertex buffer - to hold point data vBuffer = gl.createBuffer (); // set this buffer the active buffer , set attributes gl.bindBuffer(gl.ARRAY_BUFFER , vBuffer ); var vPosition = gl.getAttribLocation( program , "vPosition"); gl.vertexAttribPointer(vPosition , 4, gl.FLOAT , false , 0, 0); gl.enableVertexAttribArray(vPosition );

// create a color buffer - to hold vertex colors cBuffer = gl.createBuffer (); // set this buffer the active buffer , set attributes gl.bindBuffer(gl.ARRAY_BUFFER , cBuffer ); var vColor = gl.getAttribLocation( program , "vColor"); gl.vertexAttribPointer(vColor , 4, gl.FLOAT , false , 0, 0); gl.enableVertexAttribArray(vColor ); render (); };

function render () { // first clear the display with the background color gl.clear( gl.COLOR_BUFFER_BIT ); // adds a point at a random position , and assigns a random color if (counter < MaxPoints) { vertices.push(-1. + Math.random ()*2., -1. + Math.random ()*2., 0.0, 1.); cols.push(Math.random(), Math.random(), Math.random(), 1.); counter ++; // send the vertex positions to the GPU gl.bindBuffer(gl.ARRAY_BUFFER , vBuffer ); gl.bufferData (gl.ARRAY_BUFFER , flatten(vertices), gl.DYNAMIC_DRAW ); // vertices to GPU // send its color to the GPU gl.bindBuffer(gl.ARRAY_BUFFER , cBuffer ); gl.bufferData (gl.ARRAY_BUFFER , flatten(cols), gl.DYNAMIC_DRAW ); // vertex colors to GPU } gl.drawArrays(gl.POINTS , 0, counter ); // draw the points // A recursive call that continuously updates the screen setTimeout( function (){ requestAnimFrame(render );}, delay ); }

utils.js code function initWebGL (canvas) { // Initialize the WebGL context // returns the context const gl = canvas.getContext("webgl");

// Only continue if WebGL is available and working if (gl === null) { alert("Unable to initialize WebGL "+ + "Your browser or machine may not support it."); }

return gl; }

// // Provides requestAnimationFrame in a cross browser way. // // Source Angel/Shreiner book tools // window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { window.setTimeout(callback, 1000 / 60); }; })();

// // initialize vertex and fragment shaders // Source: Angel/Shreiner book tools //

// this function initializes the vertex and fragment shaders function initShaders(gl, vertexShaderId, fragmentShaderId ) { let vertShdr, fragShdr;

let vertElem = document.getElementById( vertexShaderId ); if (!vertElem) { alert( "Unable to load vertex shader " + vertexShaderId ); return -1; } else { // create the vertex shader vertShdr = gl.createShader(gl.VERTEX_SHADER);

// read it as a string gl.shaderSource(vertShdr, vertElem.text);

// compile it gl.compileShader(vertShdr);

// print error logs if compilation failed if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS) ) { let msg = "Vertex shader failed to compile. The error log is:" + "

" + gl.getShaderInfoLog( vertShdr ) + "

"; alert( msg ); return -1; } }

// get the fragment shader source (string) and then compile it let fragElem = document.getElementById( fragmentShaderId ); if (!fragElem) { alert( "Unable to load vertex shader " + fragmentShaderId ); return -1; } else { // create a fragment shader fragShdr = gl.createShader(gl.FRAGMENT_SHADER);

// read it as a string gl.shaderSource(fragShdr, fragElem.text);

// compile it gl.compileShader( fragShdr );

// print error logs if compilation failed if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) { let msg = "Fragment shader failed to compile. The error log is:" + "

" + gl.getShaderInfoLog( fragShdr ) + "

"; alert( msg ); return -1; } }

// create a shader program let program = gl.createProgram();

// attach the two shaders to the program gl.attachShader(program, vertShdr); gl.attachShader(program, fragShdr);

// link the program gl.linkProgram( program );

// if linking failed, print error log if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { let msg = "Shader program failed to link. The error log is:" + "

" + gl.getProgramInfoLog( program ) + "

"; alert( msg ); return -1; } return program; }

function flatten( v ) {

// This function takes Javascript arrays and flattens it into // a set of floating point values; this is required since Javascript // arrays, being objects, cannot be passed to GL buffers directly, // buffers expect raw float (or whatever type chose) values

// For matrices, column major is expected by it, so this function // transposes them for convenience and then flattens it

if (v.matrix === true) { v = transpose(v); }

var n = v.length; var elemsAreArrays = false;

if (Array.isArray(v[0])) { elemsAreArrays = true; n *= v[0].length; }

var float_vals = new Float32Array(n);

if (elemsAreArrays) { var idx = 0; for ( var i = 0; i < v.length; ++i ) { for ( var j = 0; j < v[i].length; ++j ) { float_vals[idx++] = v[i][j]; } } } else { for ( var i = 0; i < v.length; ++i ) { float_vals[i] = v[i]; } }

return float_vals; }

**** need to modify the points.js code to:

• Capture mouse positions and convert them to NDC coordinates
• Draw points at the the positions clicked by the user.
• Build a button to toggle the drawing (On/Off), and change its label on the UI.
• Use the keyboard key to toggle the drawing (On/Off)

Event Handler Modifications:

The mouse handler should output the mouse coordinates (device coordinates) in the text area.

The keyboard and button handlers should flip flags to control the drawing mode.

Draw points using Mouse.

Colored points should be drawing with each mouse press.

This criterion is linked to a Learning OutcomeControl drawing using button and keyboard

Boolean flags used to control (toggles) the drawing based on pressing the button or hitting the '1' key on the keyboard. When the flag is on, points are drawn, when its off, no points are drawing on mouse presses