The parts you need modify: a. Fragment Shader in .html file

b. Controls in .html file (add more options)

c. Links in .html file

d. Variables in .js file

e. Vertices in .js file (now you have vertices for a triangle)

f. More calls on gl.getUniformLcoation function in .js file

g. Switch statements in .js file h. Render function in .js file

******************Main HTML file*************

speed 0% 100%

Toggle Rotation Direction Spin Faster Spin Slower

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

******************main javascript file******************

"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(-1, 0), vec2(1, 0), vec2(0, -1) ]; // 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; } }; 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 ); }