Modify the code to add the options of changing the color of the rotating triangle. ----HTML------ !DOCTYPE html> Rotating Square #version 300 es in vec4

Modify the code to add the options of changing the color of the rotating triangle.

----HTML------

!DOCTYPE html>

speed 0%

min="0" max="100" step="10" value="50" />

100%

Toggle Rotation Direction

Spin Faster

Spin Slower

Red

Green

Blue

Black

Oops ... your browser doesn't support the HTML5 canvas element

----Javascript----

"use strict";

var gl;

var theta = 0.0;

var thetaLoc;

var speed = 100;

var direction = true;

window.onload = function init()

{

var canvas = document.getElementById("gl-canvas");

gl = canvas.getContext('webgl2');

if (!gl) alert("WebGL 2.0 isn't available");

//

// Configure WebGL

//

gl.viewport(0, 0, canvas.width, canvas.height);

gl.clearColor(1.0, 1.0, 1.0, 1.0);

// Load shaders and initialize attribute buffers

var program = initShaders(gl, "vertex-shader", "fragment-shader");

gl.useProgram( program );

var vertices = [

//vec2(0, 1),

vec2(0, 1),

vec2(1, 0),

vec2(-1, 0)

];

// Load the data into the GPU

var bufferId = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);

gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);

// Associate out shader variables with our data buffer

var positionLoc = gl.getAttribLocation( program, "aPosition" );

gl.vertexAttribPointer( positionLoc, 2, gl.FLOAT, false, 0, 0 );

gl.enableVertexAttribArray(positionLoc);

thetaLoc = gl.getUniformLocation(program, "uTheta");

// Initialize event handlers

document.getElementById("slider").onchange = function(event) {

speed = 100 - event.target.value;

};

document.getElementById("Direction").onclick = function (event) {

direction = !direction;

};

document.getElementById("Controls").onclick = function( event) {

switch(event.target.index) {

case 0:

direction = !direction;

break;

case 1:

speed /= 2.0;

break;

case 2:

speed *= 2.0;

break;

case 3:

break;

case 4:

break;

case 5:

break;

case 6:

break;

}

};

window.onkeydown = function(event) {

var key = String.fromCharCode(event.keyCode);

switch( key ) {

case '1':

direction = !direction;

break;

case '2':

speed /= 2.0;

break;

case '3':

speed *= 2.0;

break;

}

};

render();

};

function render()

{

gl.clear( gl.COLOR_BUFFER_BIT );

theta += (direction ? 0.1 : -0.1);

gl.uniform1f(thetaLoc, theta);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

setTimeout(

function () {requestAnimationFrame(render);},

speed

);

}