//Rose: a = 2nh / (n+1); b = (n-1)h / (n+1)

​

//Fiddle with a, b, and h. 

//See http://mathworld.wolfram.com/Hypotrochoid.html for more info.

//Made by Bogden

var PETALS = 4;

​

var width = window.innerWidth,

    height = window.innerHeight;

​

var x = 100,

    y = 100,

    n = PETALS,

    h = Math.min(width,height)/5,

    b = (n-1)*h/(n+1),

    a = 2*n*h/(n+1);

​

var oldX, oldY;

​

function Layer(layerName) {

  this.canvas = document.getElementById(layerName);

  this.canvas.width = width;

  this.canvas.height = height;

  this.ctx = this.canvas.getContext('2d');

  this.ctx.strokeStyle = '#fff';

  this.ctx.fillStyle = 'rgba(0,0,0,0.01)';

}

​

Layer.prototype.drawLine = function(x1, y1, x2, y2) {

  this.ctx.beginPath();

  this.ctx.moveTo(x1,y1);

  this.ctx.lineTo(x2,y2);

  this.ctx.stroke();

}

​

Layer.prototype.drawDot = function(x1, y1) {

  this.ctx.beginPath();

  this.ctx.moveTo(x1, y1);

  this.ctx.arc(x1, y1, 5, 0, 2*Math.PI);

  this.ctx.fill();

}

​

function updatePosition(t) {

  x = (a-b) * Math.cos(t) + h*Math.cos((a-b)/b*t) + width/2;

  y = (a-b) * Math.sin(t) - h*Math.sin((a-b)/b*t) + height/2;

}

​

function renderFrame(time) {

  oldX = x;

  oldY = y;

  updatePosition(time/(a/b * 1000) * 2 * Math.PI);

  layer1.drawLine(oldX, oldY, x, y);

  layer2.ctx.clearRect(0, 0, width, height);

  layer2.drawDot(x,y);

  layer1.ctx.fillRect(0,0,width,height);

  requestAnimationFrame(renderFrame);

}

​

var layer1 = new Layer('layer1');

var layer2 = new Layer('layer2');

layer2.ctx.fillStyle = '#f00';

​

updatePosition(0);

setTimeout(renderFrame, 100);

​