Skip to content

Instantly share code, notes, and snippets.

@paf31

paf31/tunnel.html

Created August 2, 2012 17:56
Show Gist options
  • Save paf31/3239147 to your computer and use it in GitHub Desktop.
Save paf31/3239147 to your computer and use it in GitHub Desktop.
Download ZIP
tunnel.html
Raw
tunnel.html
<!doctype html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.globalAlpha = 0.5;
context.globalCompositeOperation = 'source-over';
context.fillStyle = "rgb(255,255,255)";
var lastMillis = new Date().getTime();
var pos = 0.0;
var controlPoints = [[0.0, 0.0], [0.0, 0.0], [0.0, 0.0]];
window.setInterval(function() {
context.fillRect(0,0,200,200);
var millis = new Date().getTime();
var elapsed = millis - lastMillis;
lastMillis = millis;
pos += elapsed / 1000.0;
if (pos > 1.0) {
pos -= 1.0;
controlPoints[0] = controlPoints[1];
controlPoints[1] = controlPoints[2];
controlPoints[2] = [(Math.random() - 0.5) * 1.5, (Math.random() - 0.5) * 1.5];
}
for (var i = 0; i < 40; i++) {
var z = i / 20.0;
var radius = 0.5 / (0.2 + 10 * (z - pos));
var p;
if (z > pos && z < 1 + pos){
if (z < 1.0){
var _z = Math.cos(Math.PI - Math.PI * z) / 2.0 + 0.5;
p = [controlPoints[0][0] * (1 - _z) + controlPoints[1][0] * _z, controlPoints[0][1] * (1 - _z) + controlPoints[1][1] * _z];
} else {
var _z = Math.cos(Math.PI - Math.PI * (z - 1)) / 2.0 + 0.5;
p = [controlPoints[1][0] * (1 - _z) + controlPoints[2][0] * _z, controlPoints[1][1] * (1 - _z) + controlPoints[2][1] * _z];
}
var center = [p[0] / (0.2 + 10 * (z - pos)), p[1] / (0.2 + 10 * (z - pos))];
context.beginPath();
context.arc(center[0] * 100 + 100, center[1] * 100 + 100, radius * 100, 0, 2 * Math.PI);
context.stroke();
}
}
}, 40);
};
</script>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment