From ba71a36b94a45458f4733349839b4b2deffc11ff Mon Sep 17 00:00:00 2001 From: ewandor Date: Wed, 27 Mar 2024 10:02:47 +0100 Subject: [PATCH] first commit --- README.md | 3 + fleur2vie.html | 15 ++++ fleur2vie.js | 201 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 219 insertions(+) create mode 100644 README.md create mode 100644 fleur2vie.html create mode 100644 fleur2vie.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..ab83467 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# fleur2vie + +Simple JS script that draws an hexafoil (aka "Fleur de Vie" in the french New Age community) on an HTML canvas. diff --git a/fleur2vie.html b/fleur2vie.html new file mode 100644 index 0000000..bc714e0 --- /dev/null +++ b/fleur2vie.html @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/fleur2vie.js b/fleur2vie.js new file mode 100644 index 0000000..1b90ad6 --- /dev/null +++ b/fleur2vie.js @@ -0,0 +1,201 @@ +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); +} +