0003-JS-P5E-Function

 

function setup() {

  createCanvas(720, 400);

  background(51);

  noStroke();

  noLoop();

}

function draw() {

  // ellipse(x, y, w, [h])

  /*

    Parameters

    x Number: x-coordinate of the center of ellipse.

    y Number: y-coordinate of the center of ellipse.

    w Number: width of the ellipse.

    h Number: height of the ellipse. (Optional)

  */

  drawTarget(width * 0.25, height * 0.4, 200, 4); // Draw 4 Ellipses,width 50

  drawTarget(width * 0.5, height * 0.5, 300, 10); // Draw 10 Ellipses,width 30

  drawTarget(width * 0.75, height * 0.3, 120, 6); // Draw 6 Ellipses,width 20

}

function drawTarget(xloc, yloc, size, num) {

  const grayvalues = 255 / num;

  const steps = size / num; //200/4

  for (let i = 0; i < num; i++) {

    fill(i * grayvalues);

    ellipse(xloc, yloc, size - i * steps, size - i * steps); // 200,200-1*50,200-2*50

  }

}