snowflake

fabric.js demo challenge

by Alice Wong

HTML

<canvas id="koch" width="700" height="700"></canvas>

JavaScript

/* global variables */
var canvas;
var startLength = 300;
var maxIts = 4;
var it = 0;
var dir = 1;
var readyToDraw = false;
var playFun = null;

var colors = {
    light: '#ffffff',
    dark: '#66CCFF',
    bg:'#989898'
};
var groups = {
    light: []
};
var groupz = {
    light: [],
    dark: []
};

var temp;

function dot(x, y) {
    var circle = new fabric.Circle({
        radius: 3,
        fill: 'red',
        left: x,
        top: y,
        originX: 'center',
        originY: 'center'
    });
    canvas.add(circle);
}
/* draw point for debugging */
fabric.Point.prototype.draw = function () {
    dot(this.x, this.y);
};

/* get height of equilaterial triangle */
function h(s) {
    return (Math.sqrt(3) / 2) * s;
}

/* rotate point b about point a 60 degrees */
function rot(a, b) {
    var m = (-1 * b.y - -1 * a.y) / (b.x - a.x);
    if (m == 0 && a.x > b.x) {
        return 180;
    }
    var angleRad = Math.atan(m);
    var angleDeg = (angleRad / Math.PI) * -180;
    if ((b.y > a.y && b.x < a.x) || (b.y < a.y && b.x < a.x)) {
        angleDeg = 180 + angleDeg;
    }
    return angleDeg;
}

/*draws base triangle and returns first 3 points */
function baseTriangle(sideLen) {
    var hs = h(sideLen);
    var cx = sideLen / 2;
    var cy = hs;
    var triangle = new fabric.Triangle({
        width: sideLen,
        height: hs,
        left: cx,
        top: cy,
        originX: 'center',
        originY: 'bottom',
        fill: colors.light,
        strokeWidth: 0
    });
    temp = triangle;
    var oneg = new fabric.Group();
    oneg.add(triangle);
    groups.light.push(oneg);
    canvas.add(triangle);
    var a = new fabric.Point(cx, cy - hs);
    var b = new fabric.Point(cx + sideLen / 2, cy);
    var c = new fabric.Point(cx - sideLen / 2, cy);
    return [a, b, c];
}

/* each iteration */
function bigLoop(listy, s) {
    listycopy = listy.slice(0);
    listylen = listy.length;
    var hs = h(s);
    var k = 1;
    var group;
    if (it == 0) {
       ...