Garciat/videogram.html

## videogram.html
<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>
	<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>