I'm doing an art project on sacred geometry and want to create my own flower of life pattern on p5.js. After a lot of trial and error I've managed to get 6 circles intersecting evenly while rotating around 1 inner circle. The problems come when I try to move the centre of the central circle, as all the other circles are algebraically related to that circle, it changes how much the circles overlap, which I don't want.
Also the for loop isn't working and crashes the code every time I load it!
Here is my code:
let x = 100;
let y = 115;
let r = 40;
//x and y being the origin of the middle circle
let a = 0;
let b = 0;
function setup() {
createCanvas(400, 400);
// Circle 1 parameters
x1 = (4 / 5) * x;
y1 = (16 / 23) * y;
// Circle 2 parameters
x2 = (6 / 5) * x;
y2 = (16 / 23) * y;
//3 MIDDLE
x3 = x;
y3 = y;
// circle 4 mid left
x4 = x - r;
y4 = y;
// circle 5 mid right
x5 = x + r;
y5 = y;
// Circle 6 parameters
x6 = (6 / 5) * x;
y6 = (30 / 23) * y;
// circle 7
x7 = (4 / 5) * x;
y7 = (30 / 23) * y;
}
function draw() {
background(0);
noFill(0, 0, 0, 0);
stroke(260);
//Draw circles
for (var a = -80; a < 800; c0 = c + 40) {
ellipse(x1 + a, y1 + b, r * 2, r * 2);
ellipse(x2 + a, y2 + b, r * 2, r * 2);
ellipse(x3 + a, y3 + b, r * 2, r * 2);
ellipse(x4 + a, y4 + b, r * 2, r * 2);
ellipse(x5 + a, y5 + b, r * 2, r * 2);
ellipse(x6 + a, y6 + b, r * 2, r * 2);
ellipse(x7 + a, y7 + b, r * 2, r * 2);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
I pretty new to coding so if I've done something stupid please let me know!! I was going to nest another for loop inside the first with the variable being "b" but as the first one isn't working I didn't get that far...