triangle.js
class Triangle2D {
   static vertexPositions = [
      ];
   
   static vertexColors = [
       vec3(1.0, 0.0, 0.0),
       vec3(0.0, 1.0, 0.0),
       vec3(0.0, 0.0, 1.0),
       ];
   static shaderProgram = -1;
   static positionBuffer = -1;
   static colorBuffer = -1;
   static aPositionShader = -1;
   static aColorShader = -1;
   
   static initialize() {
       Triangle2D.shaderProgram = initShaders(gl, "/vshader.glsl", "/fshader.glsl");

       // Compute vertices of the equilateral triangle
       const radius = 0.2; // Adjust the radius as needed
       const center = vec2(0.01, 0.8); // Adjust the center as needed
       const angles = [(Math.PI / 2), (7*Math.PI / 6), (11*Math.PI / 6) ];
       Triangle2D.vertexPositions = angles.map((angle) => {
           const x = radius * Math.cos(angle) + center[0];
           const y = radius * Math.sin(angle) + center[1];
           return vec2(x, y);
       });

       // Load the data into the GPU
       Triangle2D.positionBuffer = gl.createBuffer();
       gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.positionBuffer);
       gl.bufferData(gl.ARRAY_BUFFER, flatten(Triangle2D.vertexPositions), gl.STATIC_DRAW);

       Triangle2D.colorBuffer = gl.createBuffer();
       gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.colorBuffer);
       gl.bufferData(gl.ARRAY_BUFFER, flatten(Triangle2D.vertexColors), gl.STATIC_DRAW);

       // Associate our shader variables with our data buffer
       Triangle2D.aPositionShader = gl.getAttribLocation(Triangle2D.shaderProgram, "aPosition");
       Triangle2D.aColorShader = gl.getAttribLocation(Triangle2D.shaderProgram, "aColor");
   }

   constructor() {
       if (Triangle2D.shaderProgram === -1) Triangle2D.initialize();
   }

   draw() {
       gl.useProgram(Triangle2D.shaderProgram);

       gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.positionBuffer);
       gl.vertexAttribPointer(Triangle2D.aPositionShader, 2, gl.FLOAT, false, 0, 0);

       gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.colorBuffer);
       gl.vertexAttribPointer(Triangle2D.aColorShader, 3, gl.FLOAT, false, 0, 0);

       gl.enableVertexAttribArray(Triangle2D.aPositionShader);
       gl.enableVertexAttribArray(Triangle2D.aColorShader);

       gl.drawArrays(gl.TRIANGLES, 0, 3);

       gl.disableVertexAttribArray(Triangle2D.aPositionShader);
       gl.disableVertexAttribArray(Triangle2D.aColorShader);
   }
}

square.js
class Square{
   static vertexPositions = [
    vec2( -0.42, -0.42 ),
    vec2(  -0.42,  0.42 ),
    vec2(  0.42, 0.42),
    vec2( 0.42, -0.42)];
   
   static vertexColors = [
    vec3(1.0,1.0,1.0),
    vec3(1.0,1.0,1.0),
    vec3(1.0,1.0,1.0),
    vec3(1.0,1.0,1.0)];
 
   static shaderProgram = -1;
   static positionBuffer = -1;
   static colorBuffer = -1;
   
   static aPositionShader = -1;
   static aColorShader = -1;
   
   static shaderProgram2 = -1;
   static aPositionShader2 = -1;
   static uColorShader = -1;
   
   
   
   static initialize() {
    Square.shaderProgram = initShaders( gl, "/vshader.glsl", "/fshader.glsl");
     
// Load the data into the GPU
Square.positionBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, Square.positionBuffer);
gl.bufferData( gl.ARRAY_BUFFER, flatten(Square.vertexPositions), gl.STATIC_DRAW );

Square.colorBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, Square.colorBuffer);
gl.bufferData( gl.ARRAY_BUFFER, flatten(Square.vertexColors), gl.STATIC_DRAW );
 
// Associate our shader variables with our data buffer
Square.aPositionShader = gl.getAttribLocation( Square.shaderProgram, "aPosition" );
Square.aColorShader = gl.getAttribLocation( Square.shaderProgram, "aColor" );

Square.shaderProgram2 = initShaders( gl, "/vshader2.glsl", "/fshader.glsl");
// Associate our shader variables with our data buffer
Square.aPositionShader2 = gl.getAttribLocation( Square.shaderProgram2, "aPosition" );
Square.uColorShader = gl.getUniformLocation( Square.shaderProgram2, "uColor" );
   }
   
   constructor(){
       if(Square.shaderProgram == -1)
           Square.initialize()
   }

   draw() {
   
   
       gl.useProgram(Square.shaderProgram);
       
       gl.bindBuffer( gl.ARRAY_BUFFER, Square.positionBuffer);
       gl.vertexAttribPointer(Square.aPositionShader, 2, gl.FLOAT, false, 0, 0 );
       
       gl.bindBuffer( gl.ARRAY_BUFFER, Square.colorBuffer);
       gl.vertexAttribPointer(Square.aColorShader, 3, gl.FLOAT, false, 0, 0 );
       
 gl.enableVertexAttribArray(Square.aPositionShader);    
 gl.enableVertexAttribArray(Square.aColorShader);  

    gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
   
    gl.disableVertexAttribArray(Square.aPositionShader);    
    gl.disableVertexAttribArray(Square.aColorShader);
   
   
    gl.useProgram(Square.shaderProgram2);
       gl.bindBuffer( gl.ARRAY_BUFFER, Square.positionBuffer);
 gl.vertexAttribPointer(Square.aPositionShader2, 2, gl.FLOAT, false, 0, 0 );
 gl.uniform3fv(Square.uColorShader,vec3(1.0,1.0,1.0));        
 gl.enableVertexAttribArray(Square.aPositionShader2);    
 
 
 gl.drawArrays( gl.LINE_LOOP, 0, 4 );
     
    gl.disableVertexAttribArray(Square.aPositionShader2);    
   
   }
}

Transcribed Image Text:

Create the following picture: Create the following picture: