Square - rotating with inputs

CISC 3620 Lecture 3

by asterix77

HTML

<!DOCTYPE html>
<html>

  <head>

    <script id="vertex-shader" type="x-shader/x-vertex">
		attribute vec4 vPosition;
		uniform float theta;

		void main()
		{
   		gl_Position.x = -sin(theta) * vPosition.x + cos(theta) * vPosition.y;
   		gl_Position.y = sin(theta) * vPosition.y + cos(theta) * vPosition.x;
   		gl_Position.z = 0.0;
   		gl_Position.w = 1.0;
		}
    </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
      precision mediump float;
      void main() { 
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
      }
    </script>

    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
  </head>

  <body>
    <canvas id="gl-canvas" width="256" height="256">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<br />
<button id="DirectionButton">Change Rotation Direction
</button>

<br />
<select id="mymenu" size="3">
<option value="0">Toggle Rotation Direction</option>
<option value="1">Spin Faster</option>
<option value="2">Spin Slower</option>
</select>

<br />
<div>
speed 0 <input id="slide" type="range"
   min="0" max="100" step="1" value="50" />
100 </div>
  </body>

</html>

JavaScript

var gl;
var points;
var theta = 0;
var thetaLoc;
var direction = true;
var thetaInc = 0.01;

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.5),
    vec2(-0.5, -0.5),
    vec2(0.5, 0.5),
    vec2(0.5, -0.5)
  ];

  //
  //  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);


	thetaLoc = gl.getUniformLocation(program, "theta");

  render();
}

document.getElementById("DirectionButton").onclick =
function() { direction = !direction; };

var m = document.getElementById("mymenu");
m.addEventListener("click", function() {
   switch (m.selectedIndex) {
      case 0:
          direction = !direction;
          break;
      case 1:
          thetaInc *= 2.0;
          break;
      case 2:
          thetaInc /= 2.0;
          break;
       }
});

window.onkeydown = function(event) {
   var key = String.fromCharCode(event.keyCode);
   switch (key) {
     case '1':
       direction = !direction;
       break;
     case '2':
       thetaInc *= 2.0;
       break;
     case '3':
       thetaInc /= 2.0;
       break;
   }
};

document.getElementById("slide").onchange =
   function() { thetaInc = 0.001 * event.srcElement.value; };


function render()
{
     gl.clear(gl.COLOR_BUFFER_BIT);
     if(direction) {
  ...