Skip to content

Instantly share code, notes, and snippets.

@thoughtleader
Forked from andrewvc/heartbeats.js
Created March 3, 2012 15:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thoughtleader/1966616 to your computer and use it in GitHub Desktop.
Save thoughtleader/1966616 to your computer and use it in GitHub Desktop.
simple canvas heartbeat monitor
function Heartbeat(context,width,height) {
var h = this;
h.context = context;
h.width = width;
h.height = height;
h.baseline = Math.round(h.height / 2);
h.context.moveTo(h.x, h.y);
h.context.strokeStyle = "#668CFF";
var grad = context.createLinearGradient(0, 0, 0, 225);
grad.addColorStop(0, "#000");
grad.addColorStop(0.09, "#2F3545");
grad.addColorStop(0.18, "#3C4B6E");
grad.addColorStop(0.19, "#6C4B6E");
grad.addColorStop(0.2, "#2F3545");
grad.addColorStop(0.3, "#000");
h.context.fillStyle = grad;
h.context.fillRect(0,0,h.width,h.height);
h.x = 0;
h.y = h.baseline;
h.pumpOffset = Math.round(h.baseline * 0.75);
// Move Horizontally at a constant rate
// clearing the area in front of the beat
setInterval(function() {
if (h.x < width) {
h.x += 1;
// Draw line
h.context.lineTo(h.x, h.y);
// Clear space in front
h.context.fillRect(h.x,0,30,h.height);
// Embellish the 'point'
h.context.fillStyle = "rgba(255,255,255,0.8)";
h.context.fillRect(h.x + 1,h.y-1, 2,2);
h.context.fillStyle = grad;
} else {
h.x = 0;
h.context.beginPath();
h.context.moveTo(h.x, h.y);
}
h.context.stroke();
}, 12);
setInterval(function() {
h.pump();
}, 500);
h.pump = function() {
h.y = h.baseline + h.pumpOffset;
setTimeout(function() {
h.y = h.baseline - h.pumpOffset;
setTimeout(function() {
h.y = h.baseline;
}, 25)
}, 25);
}
}
function main() {
var canvas = $('#scene')[0];
var context = canvas.getContext('2d');
var beat = new Heartbeat(context, canvas.width, canvas.height);
}
$(function() {
main();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment