/*

Reuleaux triangle

Mathematical background:

http://mathworld.wolfram.com/ReuleauxTriangle.html

​

Written by @alawatthe

*/

​

var canvas = document.getElementById('canvas'),

    ctx = canvas.getContext('2d'),

    t = 0,

    a = 2,

    r = a / Math.sqrt(3),

    R = 2 / Math.sqrt(3) -1,

    draw;

​

​

ctx.setTransform(250, 0, 0, -250, 250, 250);

ctx.lineWidth = 0.01;

​

draw = function () {

  t += 0.04;

  ctx.clearRect(-250, -250, 500, 500);

  // The centroid

  ctx.beginPath();

  ctx.fillStyle = 'black';

  ctx.arc(0, 0, R, 0, 2*Math.PI, false);

  ctx.stroke();

​

  ctx.save();

​

  /*

  The circle in the middle shouldn't be a circle,

  but the differences are to small too see.

  */

  ctx.translate(-Math.sin(t) * R, -Math.cos(t) * R);

  ctx.rotate(t/3);

​

  // The center of the triangle

  ctx.beginPath();

  ctx.fillStyle = 'black';

  ctx.arc(0, 0, 0.02, 0, 2*Math.PI, false);

  ctx.fill();

  // The triangle

  ctx.beginPath();

  ctx.arc(-a/2, -r/2, a, 0, Math.PI/3, false);

  ctx.arc(a/2, -r/2, a, 2*Math.PI/3, Math.PI, false);

  ctx.arc(0, r, a, 4*Math.PI/3, 5*Math.PI/3, false);

  ctx.stroke();

  ctx.restore();

​

};

​

​

setInterval(draw, 33);