Mathologer, Thanks for the inspiration!
Times Tables, Mandelbrot and the Heart of Mathematics
(function (createjs) {
function Cardioid(options) {
this.Container_constructor();
var self = this;
self.divisions = 10;
self.magnitude = 1;
self.multiplier = 2;
self.color = "black"
self.strokeStyle = 1;
var points = [];
self.getPoints = function () {
return points;
}
self.updatePoints = function () {
for (i = Math.floor(self.divisions - 1) ; i < points.length; ++i) {
self.removeChild(points[i].line);
}
if (points.length > self.divisions) {
points = points.slice(0, self.divisions - 1);
}
var angle = 0;
var point;
for (var i = 0; i < self.divisions; ++i) {
angle = (i * 2 * Math.PI / self.divisions);
if (i >= points.length) {
point = {
line: new createjs.Shape()
}
self.addChild(point.line);
points.push(point);
}
else {
point = points[i];
}
point.x = (self.magnitude * Math.cos(angle));
point.y = (self.magnitude * Math.sin(angle));
}
}
}
var p = createjs.extend(Cardioid, createjs.Container);
p.draw = function (ctx, b) {
this.updatePoints();
var points = this.getPoints();
for (var i = 0; i < points.length; ++i) {
i2 = Math.floor( (i * this.multiplier) % this.divisions );
points[i].line.graphics.clear().beginStroke(this.color).setStrokeStyle(this.strokeStyle).moveTo(points[i].x, points[i].y).lineTo(points[i2].x, points[i2].y).endStroke();
}
return this.Container_draw(ctx, b);
}
window.Cardioid = createjs.promote(Cardioid, "Container");
})(createjs);
function Game(canvas) {
var self = this;
var stage = new createjs.Stage(canvas);
var center = { x: 400, y: 300 };
var c = new Cardioid({
});
c.x = 400;
c.y = 200;
c.magnitude = 600;
c.multiplier = 1;
c.divisions = 10;
c.color = "green";
c.updatePoints();
var text = new createjs.Text("Happy St. Patrick's Day", "bold 50px Arial", "green");
text.alpha = 0;
text.y = 200;
text.x = 400;
text.scaleX = 0;
text.scaleY = 0;
text.textAlign = "center";
stage.addChild(c);
stage.addChild(text);
createjs.Ticker.setFPS(40);
createjs.Ticker.addEventListener("tick", stage);
createjs.Tween.get(c).wait(1000).to({ multiplier: 5, rotation: -45, magnitude: 200, divisions: 1000 }, 10000, createjs.Ease.quadInOut).to({divisions: 500}, 1000, createjs.Ease.quadInOut);
createjs.Tween.get(text).wait(10000).to({ scaleX: 1, scaleY: 1, y : 500, alpha: 1 }, 3000, createjs.Ease.quadInOut);//.to({multiplier: 10}, 10000);
}