-
-
Save catalinmiron/48877f29364fadc29c32fb452db6ae47 to your computer and use it in GitHub Desktop.
simple canvas heartbeat monitor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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