Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created May 28, 2015 21:19
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/44e359cb5800ee2cdd71 to your computer and use it in GitHub Desktop.
Save tmcw/44e359cb5800ee2cdd71 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) {
// var slope = (Math.sin((desire - Math.floor(desire)) * Math.PI - (Math.PI/2)) + 1) / 2;
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 * 2 + (Math.sin(desire * 4 - Math.PI) / 2));
draw();
ctx.resetTransform();
}
}
}
setInterval(function() {
tick(+new Date() % (Math.PI * 2 * 1000) / 1000);
}, 1);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment