computer graphics assignment. I have uploaded the HTML and javascript. I just need help with 3, 4 and 5. HTML: attribute vec4 vPosition; uniform mat4

computer graphics assignment.

I have uploaded the HTML and javascript. I just need help with 3, 4 and 5.

HTML:

void main() { gl_Position = transform * vPosition; }

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

javascript:

var gl; var points; var transform; var transformLoc;

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

gl = WebGLUtils.setupWebGL(canvas); if (!gl) { alert("WebGL isn't available"); }

// Four Vertices var vertices = [ vec2(-0.5, 0.25), vec2(-0.5, -0.25), vec2(0.5, 0.25), vec2(0.5, -0.25) ];

// // Configure WebGL // gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Load shaders and initialize attribute buffers var program = initShaders(gl, "vertex-shader", "fragment-shader"); gl.useProgram(program);

// 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 our shader variables with our data buffer var vPosition = gl.getAttribLocation(program, "vPosition"); gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition);

// Get reference to transform uniform from vertex shader transformLoc = gl.getUniformLocation(program, "transform");

// Set-up matrix initially as a rotation of 0.1 radians around z-axis var theta = 0.1; transform = mat4( Math.cos(theta), -Math.sin(theta), 0, 0, Math.sin(theta), Math.cos(theta), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 );

// Send to vertex shader gl.uniformMatrix4fv(transformLoc, false, flatten(transform));

// Start animation render();

}

function render() { gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimFrame(render); }

init();

3 Add transformations The current transformation is a rotation around the z-axis. 3.1. Create a transformation that consists of a scaling, followed by a rotation, 3.2. Your transformations should be parameterized by variables that you can 3.3. Send that transformation to the vertex shader instead of the existing one. followed by a translation change later. 4 Send transformations in rendering loop The current code sends the transformation to the vertex shader before starting the rendering loop on line 55 of the JavaScript code 4.1. Change the JavaScript code to send it inside each call to render ) 5 Update transformations in rendering loop The current code uses a fixed transformation. Modify your code so that each of the three transformations changes at each frame (i.e., each call to render )) When designing how the parameters to the transformations will change, please observe the following: The animation should not end The shape should not disappear through translating off the screen, growing beyond the size of the screen, or shrinking into invisibility. 3 Add transformations The current transformation is a rotation around the z-axis. 3.1. Create a transformation that consists of a scaling, followed by a rotation, 3.2. Your transformations should be parameterized by variables that you can 3.3. Send that transformation to the vertex shader instead of the existing one. followed by a translation change later. 4 Send transformations in rendering loop The current code sends the transformation to the vertex shader before starting the rendering loop on line 55 of the JavaScript code 4.1. Change the JavaScript code to send it inside each call to render ) 5 Update transformations in rendering loop The current code uses a fixed transformation. Modify your code so that each of the three transformations changes at each frame (i.e., each call to render )) When designing how the parameters to the transformations will change, please observe the following: The animation should not end The shape should not disappear through translating off the screen, growing beyond the size of the screen, or shrinking into invisibility