Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created May 28, 2015 20:25
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 tmcw/e2c8e15208e0cb9b2dda to your computer and use it in GitHub Desktop.
Save tmcw/e2c8e15208e0cb9b2dda to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<body><canvas id=swirl width=500 height=500></canvas></body>
<script>
var ctx = document.getElementById('swirl').getContext('2d');
var s3 = Math.sqrt(3) * 10;
ctx.strokeStyle = '#fff'; ctx.lineWidth = 4;
ctx.fillStyle = '#2a2826'; ctx.fillRect(0, 0, 500, 500);
function draw() {
ctx.beginPath();
[[0,0],[s3,10],[s3*2,0],[s3,10],[s3,10+s3]]
.map(function(pos) {
return [
pos[0] - s3,
pos[1] - 10
];
})
.forEach(function(pos) {
ctx.lineTo.apply(ctx, pos);
});
ctx.stroke();
}
function tick(desire) {
ctx.fillRect(0, 0, 500, 500);
for (var y = 0; y < 29 * 2; y += 2) {
for (var x = -1; x < 29 * 2; x += 2) {
var dist = Math.sqrt(
Math.pow(x - 28/2, 2) +
Math.pow(y - 34/2, 2)) / 29;
ctx.translate(
s3*x + ((y % 4)/2 * s3),
(s3-Math.sqrt(3)*2)*y);
ctx.rotate(desire);
draw();
ctx.resetTransform();
}
}
}
setInterval(function() {
var now = +new Date();
var desire = Math.PI * 2* (now % 10000) / 10000;
tick(desire);
}, 1);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment