Using p5.js to try and make a repeating pattern that looks like the flower of life, bit stuck

55 Views Asked by At

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

0

There are 0 best solutions below