This is javascript/ WebGL.

I need to make the anchor square point green, the hexagon needs to be blue, and the string/wire needs to be red. I have the global variable set to blue right now. How do I fix this code to separate each with it's own color? I have this so far-

// RotatingTranslatedTriangle.js (c) 2012 matsuda

"use strict";

// Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Position; ' + 'uniform mat4 u_ModelMatrix; ' + 'void main() { ' + ' gl_Position = u_ModelMatrix * a_Position; ' + '} ';

// Fragment shader program var FSHADER_SOURCE = ' void main() { ' + ' gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); ' + '} ';

// Rotation angle (degrees/second) var ANGLE_STEP = 45.0;

function main() { // Retrieve element var canvas = document.getElementById('webgl');

// Get the rendering context for WebGL var gl = getWebGLContext(canvas); if (!gl) { console.log('Failed to get the rendering context for WebGL'); return; }

// Initialize shaders if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; }

// Write the positions of vertices to a vertex shader var n = initVertexBuffers(gl); if (n < 0) { console.log('Failed to set the positions of the vertices'); return; }

// Specify the color for clearing gl.clearColor(0, 0, 0, 1);

// Get storage location of u_ModelMatrix var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); if (!u_ModelMatrix) { console.log('Failed to get the storage location of u_ModelMatrix'); return; }

// Current rotation angle var currentAngle = 0.0; // Model matrix var modelMatrix = new Matrix4();

// Start drawing var tick = function() { currentAngle = animate(currentAngle); // Update the rotation angle draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick }; tick(); }

function initVertexBuffers(gl) { var vertices = new Float32Array ([ 0, 0, -0.1, 0.06, -0.1, -0.06 ]); var n = 3; // The number of vertices

// Create a buffer object var vertexBuffer = gl.createBuffer(); if (!vertexBuffer) { console.log('Failed to create the buffer object'); return -1; }

// Bind the buffer object to target gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // Write date into the buffer object gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// Assign the buffer object to a_Position variable var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); if(a_Position < 0) { console.log('Failed to get the storage location of a_Position'); return -1; } gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// Enable the assignment to a_Position variable gl.enableVertexAttribArray(a_Position);

return n; }

function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) { // Clear gl.clear(gl.COLOR_BUFFER_BIT); for(var i = 0 ; i<=12 ; i++) { if(i<=6) { // Set the rotation matrix modelMatrix.setRotate(currentAngle, 0, 0, 1); modelMatrix.translate(.8, 0, 0); modelMatrix.rotate(i*60, 0, 0, 1); } else if(i<=10) { //gl_FragColorR; modelMatrix.setRotate(i*90,0,0,1); modelMatrix.scale(.15,.25,1); } else if(i<=11) { modelMatrix.setRotate(currentAngle +180, 0, 0, 1); modelMatrix.scale(8,.15,1); } else if(i<=12) { modelMatrix.setRotate(currentAngle, 0, 0, 1); modelMatrix.scale(8,.15,1); modelMatrix.translate(0.1, 0, 0); } // Pass the rotation matrix to the vertex shader gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); // Draw the rectangle gl.drawArrays(gl.TRIANGLE_FAN, 0, n); }

}

// Last time that this function was called var g_last = Date.now(); function animate(angle) { // Calculate the elapsed time var now = Date.now(); var elapsed = now - g_last; g_last = now; // Update the current rotation angle (adjusted by the elapsed time) var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; return newAngle %= 360; }

function up() { ANGLE_STEP += 10; }

function down() { ANGLE_STEP -= 10; }

The HTML code attached is:

Please use a browser that supports "canvas"