Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<body style="margin:0"></body>
<video src="http://techslides.com/demos/sample-videos/small.webm" style="display:none" autoplay loop></video>
<script>
let SCRW = document.body.clientWidth;
let SCRH = document.body.clientHeight;
let canvas = document.createElement('canvas');
canvas.width = SCRW;
canvas.height = SCRH;
document.body.appendChild(canvas);
let video = document.querySelector('video');
let ctx = canvas.getContext('2d');
let mouse = {x: 0, y: 0};
let line = [];
canvas.addEventListener('click', () => {
video.play();
});
canvas.addEventListener('mousemove', ev => {
mouse.x = ev.clientX;
mouse.y = ev.clientY;
});
function clear() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, SCRW, SCRH);
}
let ticks = 0;
let triangles = [];
function randPoint() {
return {x: SCRW * Math.random(), y: SCRH * Math.random()};
}
function draw(t) {
ctx.globalCompositeOperation = 'source-over';
clear();
line.push({x: mouse.x, y: mouse.y, w: 50 * Math.random(), h: 20 * Math.random()});
if (line.length >= 100) line.shift();
for (let rect of line) {
let x = rect.x + 5 * Math.sin(t/500);
let y = rect.y + 5 * Math.cos(t/500);
ctx.globalCompositeOperation = 'lighter';
ctx.beginPath();
ctx.arc(x, y, rect.w, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = `hsl(${(t/10) % 360}, 50%, 50%)`;
// ctx.fillRect(x, y, rect.w, rect.h);
}
// triangles.push([randPoint(), randPoint(), randPoint()]);
// if (triangles.length >= 5) triangles.shift();
for (let t of triangles) {
ctx.beginPath();
ctx.moveTo(t[0].x, t[0].y);
ctx.lineTo(t[1].x, t[1].y);
ctx.lineTo(t[2].x, t[2].y);
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = `hsl(${(t/10) % 360}, 50%, 50%)`;
ctx.fill();
}
ctx.globalCompositeOperation = 'overlay';
ctx.drawImage(video, 0, 0, SCRW, SCRH);
}
function loop(t) {
ticks += 1;
draw(t);
requestAnimationFrame(loop);
}
loop();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment