text: var perspectiveExample2 = function() {
  
  "use strict";
  
  var canvas;
  var gl;
  
  var numPositions = 36;
  
  var positionsArray = [];
  var colorsArray = [];
  
  var vertices = [
      vec4(-0.5, -0.5,  1.5, 1.0),
      vec4(-0.5,  0.5,  1.5, 1.0),
      vec4(0.5,  0.5,  1.5, 1.0),
      vec4(0.5, -0.5,  1.5, 1.0),
      vec4(-0.5, -0.5, 0.5, 1.0),
      vec4(-0.5,  0.5, 0.5, 1.0),
      vec4(0.5,  0.5, 0.5, 1.0),
      vec4( 0.5, -0.5, 0.5, 1.0)
  ];
  
  var vertexColors = [
      vec4(0.0, 0.0, 0.0, 1.0),  // black
      vec4(1.0, 0.0, 0.0, 1.0),  // red
      vec4(1.0, 1.0, 0.0, 1.0),  // yellow
      vec4(0.0, 1.0, 0.0, 1.0),  // green
      vec4(0.0, 0.0, 1.0, 1.0),  // blue
      vec4(1.0, 0.0, 1.0, 1.0),  // magenta
      vec4(0.0, 1.0, 1.0, 1.0),  // cyan
      vec4(1.0, 1.0, 1.0, 1.0),  // white
  ];
  
  
  var near = 0.3;
  var far = 3.0;
  var z = 4.0;
  var x = 0.0;
  var y = 0.0;
  var dr = 5.0 * Math.PI/180.0;
  
  var  fovy = 45.0;  // Field-of-view in Y direction angle (in degrees)
  var  aspect = 1.0;       // Viewport aspect ratio
  
  var modelViewMatrix, projectionMatrix;
  var modelViewMatrixLoc, projectionMatrixLoc;
  var eye;
  const at = vec3(0.0, 0.0, 0.0);
  const up = vec3(0.0, 1.0, 0.0);
  
  
  
  function quad(a, b, c, d) {
       positionsArray.push(vertices[a]);
       colorsArray.push(vertexColors[a]);
       positionsArray.push(vertices[b]);
       colorsArray.push(vertexColors[a]);
       positionsArray.push(vertices[c]);
       colorsArray.push(vertexColors[a]);
       positionsArray.push(vertices[a]);
       colorsArray.push(vertexColors[a]);
       positionsArray.push(vertices[c]);
       colorsArray.push(vertexColors[a]);
       positionsArray.push(vertices[d]);
       colorsArray.push(vertexColors[a]);
  }
  
  function colorCube()
  {
      quad(1, 0, 3, 2);
      quad(2, 3, 7, 6);
      quad(3, 0, 4, 7);
      quad(6, 5, 1, 2);
      quad(4, 5, 6, 7);
      quad(5, 4, 0, 1);
  }
  
  
  window.onload = function init() {
      canvas = document.getElementById("gl-canvas");
  
      gl = canvas.getContext('webgl2');
      if (!gl) alert("WebGL 2.0 isn't available");
  
      gl.viewport(0, 0, canvas.width, canvas.height);
  
      aspect =  canvas.width/canvas.height;
  
      gl.clearColor(1.0, 1.0, 1.0, 1.0);
  
      gl.enable(gl.DEPTH_TEST);
  
      //
      //  Load shaders and initialize attribute buffers
      //
      var program = initShaders(gl, "vertex-shader", "fragment-shader");
      gl.useProgram(program);
  
      colorCube();
  
      var cBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW);
  
      var colorLoc = gl.getAttribLocation(program, "aColor");
      gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(colorLoc);
  
      var vBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, flatten(positionsArray), gl.STATIC_DRAW);
  
      var positionLoc = gl.getAttribLocation( program, "aPosition");
      gl.vertexAttribPointer(positionLoc, 4, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(positionLoc);
  
      modelViewMatrixLoc = gl.getUniformLocation(program, "uModelViewMatrix");
      projectionMatrixLoc = gl.getUniformLocation(program, "uProjectionMatrix");
  
  // sliders for viewing parameters
  
      document.getElementById("zFarSlider").onchange = function(event) {
          far = event.target.value;
      };
      document.getElementById("zNearSlider").onchange = function(event) {
          near = event.target.value;
      };
      document.getElementById("xSlider").onchange = function(event) {
         x = event.target.value;
      };
      document.getElementById("ySlider").onchange = function(event) {
          y = event.target.value;
      };
      document.getElementById("zSlider").onchange = function(event) {
          z = event.target.value;
      };
      document.getElementById("aspectSlider").onchange = function(event) {
          aspect = event.target.value;
      };
      document.getElementById("fovSlider").onchange = function(event) {
          fovy = event.target.value;
      };
  
      render();
  }
  
  
  var render = function(){
  
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
      eye = vec3(x,y,z);
      modelViewMatrix = lookAt(eye, at, up);
      projectionMatrix = perspective(fovy, aspect, near, far);
  
      gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix));
      gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix));
  
      gl.drawArrays(gl.TRIANGLES, 0, numPositions);
      requestAnimationFrame(render);
  }
  
  }
  perspectiveExample2();
  