Golden Ratio 3

index.html

<script src="https://cdn.jsdelivr.net/npm/p5"></script>
<script src="script.js"></script>

script.js

// fibonacci circles

var x;
var y;
var diameter, radius;
var fibonacci = [1, 1, 2, 3, 5, 8];

function setup() {
  createCanvas(650, 450);
  noFill();
  stroke('white');
  x = width / 2;
  y = height / 2 - 50;
  diameter = fibonacci[5] * 100 / 3;
  radius = diameter / 2;
  var r1 = radius;
  background(0);
  circle(x, y, diameter);
  line(x - radius, y, x + radius, y);
  diameter = fibonacci[4] * 100 / 3;
  radius = diameter / 2;
  y = y + radius;
  circle(x, y, diameter);
  diameter = fibonacci[2] * 100 / 3;
  radius = diameter / 2;
  y = y + radius + 50;
  circle(x, y, diameter);
  fill(255, 0, 0, 160);
  noStroke();
  rect(width / 2, height / 2 - 50, r1, r1 + radius);
  stroke('white');
  line(x - radius, y, x + radius, y);
  line(width / 2, height / 2 - 50, x, y);
}

thumbnail.png