ewandor/fleur2vie
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ewandor
2024-03-27 10:02:47 +01:00
commit ba71a36b94
3 changed files with 219 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md Normal file
View File

@@ -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.

15
fleur2vie.html Normal file
View File

@@ -0,0 +1,15 @@
<html>
<head>
<script type="text/javascript" src="fleur2vie.js"></script>
</head>
<body>
<canvas id="f2v_calvas" width="1000px" height="1000px"></canvas>
<script type="text/javascript">
window.onload = function() {
setTimeout(function(){
main();
}, 1000);
}
</script>
</body>
</html>

201
fleur2vie.js Normal file
View File

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