I am trying to get the menu box on this code to change color using webgl. For some reason I cannot get the color to change properly. The html, initShaders.js, and utility.js is already created.
Please see my .js below:
"use strict";
var gl;
var theta = 0.0;
var thetaLoc;
var speed = 100;
var direction = true;
var colors = [
vec4 (0.1, 0.0, 0.0, 1.0),
vec4 (0.0, 0.0, 1.0, 1.0), //blue
vec4 (0.0, 1.0, 0.0, 1.0), //green
vec4 (1.0, 1.0, 1.0, 1.0) //black
];
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(-.5, -.5),
vec2(0, .5),
vec2(.5, -.5)
];
// 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");
var colorLoc=gl.getAttribLocation(program, "fcolor");
gl.vertexAttribPointer(colorLoc, 4, gl.Float, false, 0, 0);
gl.enableVertexAttribArray(colorLoc)
colors=gl.getUniformLocation(program, "color_changer");
// 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:
colors[1][0][0][1];
break;
case 4:
colors[0][0][1][1];
break;
case 5:
colors[1][1][1][1];
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;
case '4':
colors[1][0][0][1];
break;
case '5':
colors[0][0][1][1];
break;
case '6':
colors[1][1][1][1];
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, colors
);
}
I want the color to change when clicking on the associated menu controls.
I tried changing to different return statements in the switch function, but the color is still not functioning correctly. All other menu clicks work except for color. Please advise.