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); }