JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="theCanvas" height="500" width="500" border="1">
<p>sorry you're browser doesn't support the HTML5 canvas - try IE9, or Chrome,
Firefox, Opera or Safari</p>
</canvas>
JavaScript
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
extendCanvas(a);
a._centerToXY(a.canvas.width / 2, a.canvas.height / 2);
var sq5 = Math.sqrt(5);
var teta = radAsDeg(Math.atan(1 / 2));
var nrIterations = 5; // n*(split+rotate+scale)
var triangleShortSide = 30; // pixels
var animationTimeout = 400; // milis
var pointAtCenter = "a";
var drawAxis = true;
var triangle = buildConwayTriang(triangleShortSide, pointAtCenter, true);
a.clear(drawAxis);
animate(a, triangle, nrIterations, animationTimeout)
// ####### classes ###########
// ####### point (cartesian point) ###########
function Point(x, y) {
this._x = x;
this._y = y;
// ### transformations
// rotation (http://en.wikipedia.org/wiki/Cartesian_coordinate_system#Rotation)
this.rotate = function (deg) {
var x = this._x * cos(deg) - this._y * sin(deg);
var y = this._x * sin(deg) + this._y * cos(deg);
this._x = x;
this._y = y;
};
// scaling (http://en.wikipedia.org/wiki/Cartesian_coordinate_system#Scaling)
this.scale = function (factor) {
this._x = factor * this._x;
this._y = factor * this._y;
};
// translation (http://en.wikipedia.org/wiki/Cartesian_coordinate_system#Translation)
this.translate = function (offset) {
this._x = this._x - offset._x;
this._y = this._y - offset._y;
};
// ### utils
// creates a copy of the object
this.clone = function () {
return new Point(this._x, this._y);
};
// return the angle of the parameter pointas if the current point was the center of cartesian coordinate sistem
// (http://forum.processing.org/topic/moving-coordinate-in-angle)
this.getAngle = function (point) {
var r = radAsDeg(Math.atan2(point._y - this._y, point._x - this._x));
var s = (r < 0 ? -1 : 1);
var ar = Math.abs(r) % 360;
if (ar > 180) r = s * -1 * (360 - ar);
return r;
};
// distance...