1. Engineering
  2. Computer Science
  3. use the following javascript file and the html file to...

Question: use the following javascript file and the html file to...

Question details

use the following javascript file and the html file to create a graphic by adding additional shapes by:

1) creating functions drawTriangle( vec2, vec2, vec2) and drawSquare (vec2, vec2)

- square takes the upper left and lower right as the two vec2

2) call these functions with different values to draw the shapes necessary to complete your graphic

triangle.js:

var gl;
var points;
var color;

window.onload = function init()
{
var canvas = document.getElementById( "gl-canvas" );
  
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }

  
//var vertices = new Float32Array([-1, -1, 0, 1, 1, -1]);
   points = [vec2(-1,-1),vec2(0,1),vec2(1,-1)]
   color =[vec4(1,0,0,1),vec4(0,1,0,1),vec4(0,0,1,1)];
// 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 );
  
// Load the data into the GPU
  
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER,flatten(points), gl.STATIC_DRAW );

// Associate out shader variables with our data buffer
  
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
  
   // Load the color data into the GPU
  
var cbufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cbufferId );
gl.bufferData( gl.ARRAY_BUFFER,flatten(color), gl.STATIC_DRAW );

// Associate out color shader variables with our data buffer
  
var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
  
   //setting a uniform variable for color
  
   var uColor = vec4(1.0, 1.0, 0.0, 1.0);
   var colorLoc = gl.getUniformLocation( program, "uColor" );   
   gl.uniform4fv( colorLoc, flatten(uColor));


render();
};


function render() {
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLES, 0, 3 );
}

triangle.html:

<!DOCTYPE html>

<html>

<head>

<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;

attribute vec4 vColor;

varying vec4 fColor;

void

main()

{

gl_Position = vPosition;

fColor = vColor;

}

</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

uniform vec4 uColor;

void

main()

{

gl_FragColor = uColor;

}

</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>

<script type="text/javascript" src="../Common/initShaders.js"></script>

<script type="text/javascript" src="../Common/MV.js"></script>

<script type="text/javascript" src="triangle.js"></script>

</head>

<body>

<canvas id="gl-canvas" width="512" height="512">

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

</canvas>

</body>

</html>

Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution