Lecture 6 -- sinc viewer (lines)

Based on https://www.cs.unm.edu/~angel/WebGL/7E/05/hata.html

by asterix77

HTML

<!DOCTYPE html>
<html>

  <head>
    <script id="vertex-shader" type="x-shader/x-vertex">
attribute  vec4 vPosition;
attribute  vec4 vColor;
varying vec4 fColor;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() 
{
    gl_Position = projectionMatrix*modelViewMatrix*vPosition;
    fColor = vColor;
} 
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
   
varying vec4 fColor;

void
main()
{
    gl_FragColor = fColor;
}
    </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 />
Move: 
<button id = "Button3">Farther</button><span id="distance"></span>
<button id = "Button4">Closer</button>
<button id = "Button6">Up</button><span id="theta"></span>
<button id = "Button5">Down</button>
<button id = "Button7">Left</button><span id="phi"></span>
<button id = "Button8">Right</button>

<div>
<input type="checkbox" id="perspective" name="perspective"
         checked>
  <label for="perspective">Use perspective</label>
</div>
  </body>

</html>

JavaScript

var nRows = 30;
var nColumns = 30;


// data for radial hat function: sin(Pi*r)/(Pi*r)
var data = new Array(nRows);
for(var i =0; i<nRows; i++) {
	data[i]=new Array(nColumns);
}

for(var i=0; i<nRows; i++) {
    var x = Math.PI*(4*i/nRows-2.0);
    for(var j=0; j<nColumns; j++) {
        var y = Math.PI*(4*j/nRows-2.0);
        var r = Math.sqrt(x*x+y*y)
        
        // take care of 0/0 for r = 0
        if(r) {
        	data[i][j] = Math.sin(r)/r;
        } else {
        	data[i][j] = 1;
        }
    }
}


var gl;

var points = [];  // All vertices to be drawn (including duplicates)
var colors = [];  // Colors of all vertices to be drawn (including duplicates)

var near = 0.001;
var far = 1000.0;
var radius = 4.0;
var theta  = 60 * Math.PI/180;
var phi    = 30 * Math.PI/180;
var dr = 5.0 * Math.PI/180.0;

var  fovy = 45.0;  // Field-of-view in Y direction angle (in degrees)
var  aspect;       // 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);

var usePerspective = true;


function updateDisplays() {
  document.getElementById("distance").innerText = radius.toFixed(2);
	document.getElementById("theta").innerText = (theta * 180 / Math.PI).toFixed(2);
	document.getElementById("phi").innerText = (phi * 180 / Math.PI).toFixed(2);
}

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

  updateDisplays();
  document.getElementById("Button3").onclick = function(){ radius *= 5/4; updateDisplays(); };
  document.getElementById("Button4").onclick = function(){ radius *= 4/5; updateDisplays();};
  document.getElementById("Button5").onclick = function(){ theta += dr; updateDisplays(); };
  document.getElementById("Button6").onclick = function(){ theta -= dr; updateDisplays(); };
  document.getElementById("Button7").onclick =...