Rotating array of circles around a circle

Consider this:

function setup() {
  createCanvas(600,400);
}

function draw() {
  background( 0 );
  translate(width/2, height/2);
  noStroke();
  fill(128);
  ellipse(0, 0, 150, 150);
  for(var i = 0; i < 9; i++) {
    fill(128);
    var x = 150 * cos(i * TWO_PI/9.0);
    var y = 150 * sin(i * TWO_PI/9.0);
    ellipse(x, y, 50, 50);
    fill(0);
    text("A", x, y);
    stroke(196);
    line(0, 0, x, y);
    noStroke();
  }
}

Notice that it no longer uses rotate()! Instead it does some simple trig to find the centers of each surrounding circle.

2 Likes