4230-hw-1/ClickedPoints/ClickedPoints.js

// ClickedPints.js (c) 2012 matsuda, 2022 Jonathon Doran

// Note that this shader takes the position from the main
// program, rather than hard-coding it.
const vertex_shader = `
  attribute vec4 a_Position;		// vertex-shader attribute
  void main()
  {
    gl_Position = a_Position;
    gl_PointSize = 25.0;
  }	`;


const fragment_shader = `
  void main()
  {
    gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
  }	`;

function main()
{
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl)
  {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, vertex_shader, fragment_shader))
  {
    console.log('Failed to intialize shaders.');
    return;
  }

  // Get the storage location of a_Position
  // This is in video memory
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0)
  {
    console.log('Failed to get the storage location of a_Position');
    return;
  }

  // Register function (event handler) to be called on a mouse press
  canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); };

  // Specify the color for clearing <canvas>
  gl.clearColor(0.3, 0.3, 0.3, 1.0);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
}

// The array for the position of a mouse press:
//		Data is pushed onto this array, which resizes dynamically
var g_points = [];

function click(ev, gl, canvas, a_Position)
{
  var x = ev.clientX; 	// x coordinate of a mouse pointer
  var y = ev.clientY; 	// y coordinate of a mouse pointer

  var rect = ev.target.getBoundingClientRect();

  // Coordinate conversion because canvas and WebGL have different
  // origins.

  x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
  y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);

  // Store the coordinates to g_points array
  g_points.push(x);
  g_points.push(y);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Upon each click, the canvas is cleared and all saved points
  // are redrawn.  Each point has two values in the array (x, y).

  var len = g_points.length;
  for(var i = 0; i < len; i += 2)
  {
    // Pass the position of a point to a_Position variable
    gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);

    // Draw
    gl.drawArrays(gl.POINTS, 0, 1);
  }
}