Heart Beat
The HTML file:
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex" >
attribute vec4 vPosition;
uniform float percent;
varying vec4 f_Color;
void main() {
float scale = 1.0+percent;
//gl_Position.xyz *= scale;
gl_Position = vec4(vPosition.x, vPosition.y,0.0,1.0/scale);
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="heartBeat.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<style>
input {
text-align: right;
}
</style>
</head>
<body>
<h1>Heart Beat</h1>
<script>
var canvas1 = new Canvas(500, 500);
canvas1.Redisplay();
</script>
<button type="button" onclick="canvas1.ChangeAnimation()">Thump BIG</button>
<script>
var canvas2 = new Canvas(200, 200);
canvas2.Redisplay();
</script>
<button type="button" onclick="canvas2.ChangeAnimation()">Thump small</button>
<p>
</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')
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.gl = InitGL(canvas);
var gl = this.gl;
gl.viewport(0,0, width, height);
program = initShaders(gl, "vertex-shader","fragment-shader");
gl.useProgram(program);
// somewhat new code, two vertex buffers.
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.k = 5;
this.MakePoints();
gl.bufferData(gl.ARRAY_BUFFER,flatten(this.vertex),gl.STATIC_DRAW);
// this is new. Get the location to send pct
this.pctLoc = gl.getUniformLocation(program, "percent");
this.pct = 0;
this.pctStep = 0.05;
gl.uniform1f(this.pctLoc, this.pct);
this.animationState = false;
this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
return this;
}
Canvas.prototype = {
MakePoints: function(){
var theta, r = .6;
var data = [];
i = 0;
for(theta = 0; theta < 2*Math.PI; theta += Math.PI/100) {
var x = r*Math.cos(this.k*theta)*Math.cos(theta)
var y = r*Math.cos(this.k*theta)*Math.sin(theta);
vertex = [x,y];
data.push(vertex);
}
this.vertex = data;
return;
},
ChangeAnimation: function() {
this.animationState = !this.animationState;
if (this.animationState) {
this.timerID = setInterval(this.AutomatedAnimationStep,1,this);
} else {
clearInterval(this.timerID);
}
},
IsAnimating: function() {
return this.animationState;
},
AutomatedAnimationStep: function(me) {
me.AnimationStep();
},
AnimationStep: function() {
this.pct += this.pctStep;
if (this.pct >= 1.0) {
this.pct = 1.0;
this.pctStep *= -1;
}
if (this.pct <= 0.0) {
this.pct = 0.0;
this.pctStep *= -1;
}
if (this.pct == 0) {
this.ChangeAnimation();
}
this.gl.uniform1f(this.pctLoc, this.pct);
this.Redisplay();
},
Redisplay: function() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.gl.drawArrays(this.gl.LINE_LOOP, 0, this.vertex.length);
return;
}
};