//All figures are drawn with a black, 3-pixel-thick stroke and a white fill.

//There are seven circles, which are each 40 pixels in diameter. They should be rendered iteratively, using a structure such as a for loop. You can find out more about for loops in this reference; this tutorial; and this Coding Train video (14m).

//If you are already familiar with for loops, then use a while or do/while loop, as discussed in this tutorial or this Coding Train video.

//The centers of the circles are positioned (vertically) at half the height of the canvas. This should always remain true, even if the dimensions of the canvas are changed.

//The centers of the circles are spaced (horizontally) every 50 pixels, starting at 50 pixels across. There should not be any circle overlapping the edge of the canvas.

//In your blog post, embed a screen capture of your sketch, and embed a link to your Editor code.

​

function setup() {

  createCanvas(400, 200);

}

​

function draw() {

  background(color('lightgray'));

  fill(color('white'));

  strokeWeight(3);

  for (i = 0; i < 7; i++) {

    var spacing = 50;

    var offset = 50;

    var cx = offset + i * spacing;

    var cy = height/2;

    var cd = 40;

​

    circle(cx, cy, cd);

  }

}