Code


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

// make the canvas the same width as its parent...
canvas.width = canvas.parentElement.offsetWidth;

// ...and make it square
canvas.height = canvas.width;

var stage = new createjs.Stage(canvas);

var c = new Cardioid({}).set({
    magnitude: canvas.width / 2,
    color: "blue",
    divisions: 1000,
    multiplier: 251
});

stage.addChild(c);

// this is needed so the cardioid draws the lines the initial time
c.updatePoints();

// center the cardioid
c.y = c.x = canvas.width / 2;

// the stage will be redrawn 60 times per second
// this will make animations appear smooth
// however this may cause performance issues
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);

// Animate by changing the multiplier value over 5 seconds (5000ms)
// When done, change the multiplier back over 5 seconds
// then do it again
createjs.Tween.get(c, {loop: true})
                .to({ multiplier: 249 }, 5000, createjs.Ease.sineInOut)
                .to({ multiplier: 251 }, 5000, createjs.Ease.sineInOut);

// make is rotate 360 degrees over 10 seconds, and repeat
createjs.Tween.get(c, { loop: true })
              .to({ rotation: 360 }, 10000).call(function () {
                  c.rotation = 0;
               });