Things need to be done: modify the code to have this three things done.

1. The template program just draws 5 points on the screen. Modify it so that whenever the mouse is clicked ("click" mouse event), an additional point is drawn at the cursor location in the color specified by the sliders (start with an empty canvas).
2. Add code so that the "Reset" button clears all the points on the display.
3. After your have step 2 working, modify the program so that if the mouse is moved with the right button held down, a point is drawn at every location that the mouse passes over, using the color specified by the sliders.

function Lab2(canvasID /* name of canvas to render */) { this.canvasID = canvasID; this.canvas = document.getElementById(canvasID); if (!this.canvas) { alert("Canvas ID '" + canvasID + "' not found."); return; } this.gl = WebGLUtils.setupWebGL(this.canvas); if (!this.gl) { alert("WebGL isn't available in this browser"); return; }

this.init(); }

// Define prototype values common to all Lab2 objects Lab2.prototype.gl = null;

Lab2.prototype.toString = function () { return JSON.stringify(this); };

Lab2.prototype.init = function () { var canvas = this.canvas; var gl = this.gl; var t = this; // make available to event handlers

//testing var ctx = canvas.getContext('2d'); // WebGL setup gl.viewport(0, 0, canvas.width, canvas.height);

// Compile and link shaders this.shaderProgram = initShaders(gl, "vShader.glsl", "fShader.glsl"); if (this.shaderProgram === null) return; gl.useProgram(this.shaderProgram); // Define names for colors var white = vec3(1.0, 1.0, 1.0); var red = vec3(1.0, 0.0, 0.0); var green = vec3(0.0, 1.0, 0.0); var blue = vec3(0.0, 0.0, 1.0); var yellow = vec3(1.0, 1.0, 1.0); // Array of alternating initial vertex coordinates and colors for each vertex this.vertexData = flatten([ vec3(0.0, 0.0, 0.0), white, vec3(0.5, 0.5, 0.0), red, vec3(-0.5, 0.5, 0.0), green, vec3(-0.5, -0.5, 0.0), blue, vec3(0.5, -0.5, 0.0), yellow ]); // Count of points in vertexData this.pointCount = 5; var floatSize = 4; // size of gl.FLOAT in bytes // // Load vertex data into WebGL buffer this.vertexCoordBuffer = gl.createBuffer(); // get unique buffer ID gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexCoordBuffer); // make this the active buffer gl.bufferData(gl.ARRAY_BUFFER, this.vertexData, gl.STATIC_DRAW); // write data to buffer

// Define data layout in buffer for position. Postions are 3 floats, // interleaved with 3 floats for colors, starting at beginning of buffer. this.vPosition = gl.getAttribLocation(this.shaderProgram, "vPosition"); gl.vertexAttribPointer(this.vPosition, 3, gl.FLOAT, false, 6 * floatSize, 0); gl.enableVertexAttribArray(this.vPosition);

// Define data layout in buffer for colors. Colors are 3 floats, // interleaved with 3 floats for positions, starting after first position in buffer. this.vColor = gl.getAttribLocation(this.shaderProgram, "vColor"); gl.vertexAttribPointer(this.vColor, 3, gl.FLOAT, false, 6 * floatSize, 3 * floatSize); gl.enableVertexAttribArray(this.vColor);

// Define callback for change of slider value var sliderCallback = function (e) { // Update text display for slider var color = e.target.value; e.target.valueDisplay.textContent = color;

// Re-render canvas requestAnimationFrame(render); };

// Set up HTML user interface this.colors = ["r", "g", "b"]; var rgbSliders = []; // array of slider HTML elements var rgbSliderValues = []; // array of slider value HTML elements

// Set up an object with sliders for the three colors. The sliders are // accessed using "indices" of "r", "g", and "b". for (var i in this.colors) { var color = this.colors[i]; var sliderID = this.canvasID + "-" + color + "-slider"; rgbSliders[color] = document.getElementById(sliderID); if (rgbSliders[color] === null) { alert("Slider ID not found: " + sliderID); return; } var valueID = this.canvasID + "-" + color + "-value"; rgbSliderValues[color] = document.getElementById(valueID); if (rgbSliders[color] === null) { alert("Slider value ID not found: " + sliderID); return; } rgbSliders[color].valueDisplay = rgbSliderValues[color]; // attach to slider // Set callback on slider input rgbSliders[color].addEventListener("input", sliderCallback); } this.rgbSliders = rgbSliders;

var resetButton = document.getElementById(this.canvasID + "-reset-button"); if (resetButton === null) { alert("Reset button ID not found: " + this.canvasID + "-reset-button"); return; }

// Set up callback to render a frame var render = function () { t.Render(); };

// Set up the callback for the reset button resetButton.addEventListener("click", function () { for (var i in rgbSliders) { rgbSliders[i].value = rgbSliders[i].max / 2.0; rgbSliders[i].valueDisplay.textContent = rgbSliders[i].valueAsNumber / rgbSliders[i].max; } requestAnimationFrame(render); });

// Set up mouse tracking var mouseX = document.getElementById(this.canvasID + "-mousex"); var mouseY = document.getElementById(this.canvasID + "-mousey"); var CTX = document.getElementById(this.canvasID + "-CTx"); var CTY = document.getElementById(this.canvasID + "-CTy"); var mouseButton = document.getElementById(this.canvasID + "-mousebutton"); this.mouseDown = [ false, false, false ]; // track mouse button state mouseButton.textContent = this.mouseDown; if (mouseX === null || mouseY === null || mouseButton === null) { alert("Mouse output HTML IDs not found"); return; }

// Add mouse event handlers canvas.addEventListener("mousedown", function (e) { t.mouseDown[e.button] = true; mouseButton.textContent = t.mouseDown; }); canvas.addEventListener("mouseup", function (e) { t.mouseDown[e.button] = false; mouseButton.textContent = t.mouseDown; }); canvas.addEventListener("mousemove", function (e) { mouseX.textContent = e.pageX - e.target.offsetLeft; mouseY.textContent = e.pageY - e.target.offsetTop; }); canvas.addEventListener("mousemove", function (e) { var ct = (2.0 * (mouseX.textContent) / (canvas.width -1 )) - 1.0; var wy = 1.0 - (2.0 * (mouseY.textContent) / (canvas.height -1 )); CTX.textContent = wx.toFixed(7); CTY.textContent = wy.toFixed(7); });

// Kick things off with an initial rendering requestAnimationFrame(render);

};

/** * GetSliderColors - get the current RGB color represented by the sliders * as a vec3. * * @returns {vec3} current slider color */ Lab2.prototype.getSliderColor = function () { // Build an array of color values based on the current slider colors var colorValues = []; for (var i in this.colors) { var color = this.colors[i]; var colorValue = this.rgbSliders[color].valueAsNumber; colorValues[i] = colorValue; }

return vec3(colorValues); };

/** * Render - draw the frame * */ Lab2.prototype.Render = function () { var gl = this.gl; gl.clearColor(0.0, 0.0, 0.25, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, this.pointCount); };

------------------

Lab 2 - Basic WebGL

Mouse x: ? y: ? button: ?

WebGL x: ? WebGL y: ?

This browser doesn't support the HTML5 canvas element

min="0.0" max="1.0" value="0.5" step="0.01" style="width:200px" />	Red	0.5
min="0.0" max="1.0" value="0.5" step="0.01" style="width:200px" />	Green	0.5
min="0.0" max="1.0" value="0.5" step="0.01" style="width:200px" />	Blue	0.5

Reset