WebGL:

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.

vShader.glsl

#version 300 es // Vertex shader

in vec3 vPosition; // position of vertex (x, y, z) in vec3 vColor; // color of vertex (r, g, b)

out vec3 fColor; // output color to send to fragment shader

void main() { gl_Position = vec4(vPosition, 1); // set vertex position (x, y, z, w) gl_PointSize = 10.0; // set size of points drawn fColor = vColor; // output color to fragment shader }

fShader.glsl:

#version 300 es // Fragment shader

precision highp float;// required precision declaration

in vec3 fColor; // input color for fragment out vec4 outColor; // output color

void main() { outColor = vec4(fColor, 1.0); }

lab.js:

"use strict";

// Constructor // // @param canvasID - string containing name of canvas to render. // Buttons and sliders should be prefixed with this string. // 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

if (canvas.getContext) 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, 0.0); var User = vec3("r", "g", "b"); // 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; gl.clearColor(0.0, 0.5, 0.5, 1.0); gl.clear(gl.COLOR_BUFFER_BIT) } requestAnimationFrame(render); }); // Set up mouse tracking var mouseX = document.getElementById(this.canvasID + "-mousex"); var mouseY = document.getElementById(this.canvasID + "-mousey"); var canvasX = document.getElementById(this.canvasID + "-canvasx"); var canvasY = document.getElementById(this.canvasID + "-canvasy"); 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; var wx = (2.0 * (mouseX.textContent) / (canvas.width -1 )) - 1.0; var wy = 1.0 - (2.0 * (mouseY.textContent) / (canvas.height -1 )); canvasX.textContent = wx.toFixed(3); canvasY.textContent = wy.toFixed(3); }); canvas.addEventListener("mousemove", function (e) { t.mouseDown[e.button] = true; requestAnimationFrame(render); });

// 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); };