Circle Follows Click
The HTML file:
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex" >
attribute vec4 vPosition;
uniform float xoff;
uniform float yoff;
varying vec4 f_Color;
void main() {
gl_Position = vPosition + vec4(xoff,yoff, 0.0, 0.0);
f_Color = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 f_Color;
void main() {
gl_FragColor = f_Color;
}
</script>
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="trans.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<style>
canvas{
display:block;
border:2px solid #0094ff;
}
</style>
</head>
<body>
<h1>Circle Follows Click</h1>
<script>
var canvas = new Canvas(500, 500);
canvas.Redisplay();
</script>
</body>
The Javascript file:
function MakeCanvas(width, height, locID) {
if (width == undefined || width < 0) {
width = 300;
}
if (height == undefined || height < 0) {
height = 300;
}
var canvas = document.createElement('canvas')
// allow the canvas to take a focus.
canvas.tabIndex = 0;
canvas.height = height;
canvas.width = width;
if(locID == undefined) {
document.body.appendChild(canvas);
} else {
div = document.getElementById(locID);
if (null == div) {
document.body.appendChild(canvas);
} else {
div.appendChild(canvas);
}
}
document.body.appendChild(canvas);
return canvas;
}
function InitGL(canvas) {
var gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
alert ("WebGL isn't available");
}
return gl;
}
function Canvas(width, height, locID) {
var canvas = MakeCanvas(width, height, locID);
this.canvas = canvas;
this.gl = InitGL(canvas);
var gl = this.gl;
var tmpCanvas = this;
// even more imprtant in this program.
// A supposedly more generic browser solution
var rect = canvas.getBoundingClientRect();
this.x = rect.left;
this.y = rect.top;
/*
this.x = canvas.offsetLeft;
this.y = canvas.offsetTop;
*/
canvas.addEventListener("click",
function(evnt) {
tmpCanvas.ClickFunc(tmpCanvas, evnt);
}
);
gl.viewport(0,0, width, height);
program = initShaders(gl, "vertex-shader","fragment-shader");
gl.useProgram(program);
this.vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vBuffer);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition,2,gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(vPosition);
this.MakePoints();
gl.bufferData(gl.ARRAY_BUFFER,flatten(this.vertex),gl.STATIC_DRAW);
// these should be replaced with a uniform2fv, but that can wait.
this.xoff = gl.getUniformLocation(program, "xoff");
this.yoff = gl.getUniformLocation(program, "yoff");
gl.uniform1f(this.xoff, 0);
gl.uniform1f(this.yoff, 0);
this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
return this;
}
Canvas.prototype = {
MakePoints: function(){
var theta, r = .1;
var data = [];
i = 0;
// create the points on a circle.
for(theta = 0; theta < 2*Math.PI; theta += Math.PI/100) {
var x = r*Math.cos(theta);
var y = r*Math.sin(theta);
vertex = [x,y];
data.push(vertex);
}
this.vertex = data;
return;
},
Redisplay: function() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.gl.drawArrays(this.gl.LINE_LOOP, 0, this.vertex.length);
return;
},
// callbacks
ClickFunc: function (me, evnt) {
// the actual location of the click
var x = evnt.clientX;
var y = evnt.clientY;
console.log("(x,y)", x,y);
var Ax = me.x;
var Ay = me.y;
var Bx = this.canvas.width+me.x;
var By = this.canvas.height+me.y;
console.log("Canvas:", Ax, Ay, Bx, By);
var Lx = -1;
var Ly = -1;
var Ux = 1;
var Uy = 1;
var xp, yp;
// do the transformation we discussed.
xp = Lx + (x-Ax)*(Ux-Lx)/(Bx-Ax);
yp = Ly + (By-y)*(Uy-Ly)/(By-Ay);
this.gl.uniform1f(this.xoff, xp);
this.gl.uniform1f(this.yoff, yp);
this.Redisplay();
},
};