fleur2vie/fleur2vie.js

var rayon = 50;
var directions_dict = {
    "Origin": 0,
    "N": 1,
    "NE": 2,
    "SE": 3,
    "S": 4,
    "SW": 5,
    "NW": 6
    };
var directions = ["Origin","N","NE","SE","S", "SW", "NW"];

var calculus = [
    [0, 0],
    [0                              , - rayon],
    [rayon * Math.cos(Math.PI / 6)  , - rayon * Math.cos(Math.PI / 3)],
    [rayon * Math.cos(Math.PI / 6)  , rayon * Math.cos(Math.PI / 3)],
    [0                              , rayon],
    [- rayon * Math.cos(Math.PI / 6), rayon * Math.cos(Math.PI / 3)],
    [- rayon * Math.cos(Math.PI / 6), - rayon * Math.cos(Math.PI / 3)],
]

function get1depthArc(direction) {

    var isEdge = true;
    for (i=1;isEdge && i< direction.length;i++) {
        isEdge = isEdge && direction[i-1] == direction[i];
    }
    if (isEdge) {
        switch(direction[direction.length - 1]) {
            case directions_dict.N:
                return [Math.PI/6, (5*Math.PI)/6];
                break;
            case directions_dict.NE:
                return [Math.PI/2, (7*Math.PI)/6];
                break;
            case directions_dict.SE:
                return [(5*Math.PI)/6, (3*Math.PI)/2];
                break;
            case directions_dict.S:
                return [(7*Math.PI)/6, (11*Math.PI)/6];
                break;
            case directions_dict.SW:
                return [(3*Math.PI)/2, Math.PI/6];
                break;
            case directions_dict.NW:
                return [(11*Math.PI)/6, Math.PI/2];
                break;
        }
    }
    switch(direction[direction.length - 1]) {
        case directions_dict.N:
                return [Math.PI/6, (7*Math.PI)/6];
            break;
        case directions_dict.NE:
                return [Math.PI/2, (3*Math.PI)/2];
            break;
        case directions_dict.SE:
                return [(5*Math.PI)/6 ,(11*Math.PI)/6];
            break;
        case directions_dict.S:
                return [(7*Math.PI)/6,Math.PI/6];
            break;
        case directions_dict.SW:
                return [(3*Math.PI)/2,Math.PI/2];
            break;
        case directions_dict.NW:
                return [(11*Math.PI)/6,(5*Math.PI)/6];
            break;
    }

    return [0,2*Math.PI];
}

function get0depthArc(direction) {
    var isEdge = true;
    for (i=1;isEdge && i< direction.length;i++) {
        isEdge = isEdge && direction[i-1] == direction[i];
    }
    if (isEdge) {
        return [];
    }

    switch(direction[direction.length - 1]) {
        case directions_dict.N:
            return [Math.PI/2, (5*Math.PI)/6];
            break;
        case directions_dict.NE:
            return [(5*Math.PI)/6, (7*Math.PI)/6];
            break;
        case directions_dict.SE:
            return [(7*Math.PI)/6, (3*Math.PI)/2];
            break;
        case directions_dict.S:
            return [(3*Math.PI)/2, (11*Math.PI)/6];
            break;
        case directions_dict.SW:
            return [(11*Math.PI)/6, Math.PI/6];
            break;
        case directions_dict.NW:
            return [Math.PI/6, Math.PI/2];
            break;
    }
}

function drawCricle(position, depth, arc=[0,2*Math.PI]) {
    var c=document.getElementById("f2v_calvas");
    var ctx=c.getContext("2d");
    ctx.lineWidth=5;
    ctx.beginPath();
    ctx.arc(position[0], position[1], rayon, arc[0], arc[1]);
    ctx.stroke();
}

function drawPetal(starting_position, depth, direction = []) {
    if (depth == 0) {
        var arc = get0depthArc(direction);
    } else if (depth == 1) {
        var arc = get1depthArc(direction);
    } else {
        var arc = [0,2*Math.PI];
    }

    if (arc.length > 0 ) {
        drawCricle(starting_position, depth, arc);
    }

    if (depth == 0) {
        return (depth == 0);
    }

    if (direction.length == 0) {
        for (var i=1; i <= 6; i++) {
            drawPetal([
                starting_position[0] + calculus[i][0],
                starting_position[1] + calculus[i][1]
            ], depth - 1, direction.concat([i]));
        }
    } else {
        var isEdge = true;
        for (i=1;isEdge && i< direction.length;i++) {
            isEdge = isEdge && direction[i-1] == direction[i];
        }
        if (isEdge) {
            for(var i = 0;i < 2;i ++) {
                var new_direction = direction[0] + i;
                if (new_direction > 6) {
                    new_direction = new_direction - 6;
                }
                drawPetal([
                    starting_position[0] + calculus[new_direction][0],
                    starting_position[1] + calculus[new_direction][1]
                ], depth - 1, [new_direction].concat(direction));
                ;
            }
        } else {
        console.log(direction);
                drawPetal([
                    starting_position[0] + calculus[direction[0]][0],
                    starting_position[1] + calculus[direction[0]][1]
                ], depth - 1, [direction[0]].concat(direction));
        }
    }
}

function drawGradient(starting_position, power) {
    var c=document.getElementById("f2v_calvas");
    var ctx=c.getContext("2d");
    ctx.globalCompositeOperation = "source-in";
    var grd=ctx.createRadialGradient(starting_position[0], starting_position[1],0,starting_position[0],starting_position[1],(power-1)*rayon);
    grd.addColorStop(0,"red");
    grd.addColorStop(1/6,"orange");
    grd.addColorStop(2/6,"yellow");
    grd.addColorStop(3/6,"green");
    grd.addColorStop(4/6,"cyan");
    grd.addColorStop(5/6,"blue");
    grd.addColorStop(1,"purple");
    ctx.arc(starting_position[0], starting_position[1], (power-1)*rayon + 5, 0,2*Math.PI);
    // Fill with gradient
    ctx.fillStyle=grd;

    ctx.fill();

}

function main() {
    var power = 4;
    var starting_position = [power * rayon + 5, power * rayon + 5];
    var c=document.getElementById("f2v_calvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(starting_position[0], starting_position[1], (power-1)*rayon, 0,2*Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(starting_position[0], starting_position[1], (power-1)*rayon + 5, 0,2*Math.PI);
    ctx.stroke();
    drawPetal(starting_position, power);
    ctx.closePath();
    drawGradient(starting_position, power);
}