HTML:

attribute vec$4$ vPosition;

attribute vec$4$ vColor;

attribute float vIndex;

uniform float theta;

uniform vec$4$ cr;

uniform vec$4$ cg;

uniform vec$4$ cb;

varying vec$4$ fColor;

void main$()$

$\{$

float x$,$ y;

float angle $=$ radians$($theta$)$;

float c $=$ cos$($angle$)$;

float s $=$ sin$($angle$)$;

$//$ determine the values of x and y based on vIndex

$//$ the following lines need to be fixed $-$ x and y

$//$ should be the x$-$ and y$-$coordinates of the

$//$ corresponding centroid based on vIndex.

x $=$ vIndex;

y $=$ vIndex;

$//$ translate to origin

mat$4$ t$1=$ mat$4(1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,$

$0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,$

$0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0,$

$-$x$,-$y$,0\mathrm{.}0,1\mathrm{.}0)$;

$//$ rotate

mat$4$ rz $=$ mat$4($c$,$ s$,0\mathrm{.}0,0\mathrm{.}0,$

$-$s$,$ c$,0\mathrm{.}0,0\mathrm{.}0,$

$0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0,$

$0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0)$;

$//$ translate back

mat$4$ t$2=$ mat$4(1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,$

$0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,$

$0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0,$

x$,$ y$,0\mathrm{.}0,1\mathrm{.}0)$;

fColor $=$ vColor;

gl$\_$PointSize $=2\mathrm{.}0$;

$//$ transform the vertex

gl$\_$Position $=$ vPosition; $//$ this line needs to be modified

$\}$

precision mediump float;

varying vec$4$ fColor;

void main$()$

$\{$

gl$\_$FragColor $=$ fColor;

$\}$

Oops $...$ your browser doesn't support the HTML$5$ canvas element

Javascript:

"use strict";

var canvas;

var gl;

var points;

var colors;

var indices;

var red $=[1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0]$;

var green $=[0\mathrm{.}0,1\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0]$;

var blue $=[0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0]$;

var black $=[0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0]$;

var white $=[1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0]$;

var redTriangle;

var greenTriangle;

var blueTriangle;

var program;

var theta $=0\mathrm{.}0$;

var thetaLoc;

var crLoc;

var cgLoc;

var cbLoc;

window.onload $=$ function init$()$

$\{$

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

gl $=$ WebGLUtils.setupWebGL$($canvas$)$;

if $(!$gl$)$

$\{$

alert$("$WebGL isn't available"$)$;

$\}$

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

gl$.$useProgram$($program$)$;

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

gl$.$clearColor$(0\mathrm{.}8,0\mathrm{.}8,0\mathrm{.}8,1\mathrm{.}0)$;

gl$.$enable$($gl$.$DEPTH$\_$TEST$)$;

redTriangle $=$ createTriangle$()$;

greenTriangle $=$ createTriangle$()$;

blueTriangle $=$ createTriangle$()$;

points $=[]$;

colors $=[]$;

indices $=[]$;

var cr $=$ computeCentroid$($redTriangle$)$;

var cg $=$ computeCentroid$($greenTriangle$)$;

var cb $=$ computeCentroid$($blueTriangle$)$;

$//$ draw filled triangles

points.push$($redTriangle$[0],$ redTriangle$[1],$ redTriangle$[2],$

greenTriangle$[0],$ greenTriangle$[1],$ greenTriangle$[2],$

blueTriangle$[0],$ blueTriangle$[1],$ blueTriangle$[2])$;

colors.push$($red$,$ red, red, green, green, green, blue, blue, blue$)$;

indices.push$(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,2\mathrm{.}0,2\mathrm{.}0,2\mathrm{.}0)$;

$//$ draw triangle outlines

points.push$($redTriangle$[0],$ redTriangle$[1],$

redTriangle$[1],$ redTriangle$[2],$

redTriangle$[2],$ redTriangle$[0],$

greenTriangle$[0],$ greenTriangle$[1],$

greenTriangle$[1],$ greenTriangle$[2],$

greenTriangle$[2],$ greenTriangle$[0],$

blueTriangle$[0],$ blueTriangle$[1],$

blueTriangle$[1],$ blueTriangle$[2],$

blueTriangle$[2],$ blueTriangle$[0])$;

colors.push$($black$,$ black, black, black, black, black,

black, black, black, black, black, black,

black, black, black, black, black, black$)$;

indices.push$(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,$

$1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,$

$2\mathrm{.}0,2\mathrm{.}0,2\mathrm{.}0,2\mathrm{.}0,2\mathrm{.}0,2\mathrm{.}0)$;

$//$ draw centers

points.push$($cr$,$ cg$,$ cb$)$;

colors.push$($white$,$ white, white$)$;

indices.push$(0\mathrm{.}0,1\mathrm{.}0,2\mathrm{.}0)$;

$//$ setup uniforms

thetaLoc $=$ gl$.$getUniformLocation$($program$,$ "thet