function range(start, stop, step=1) {

  let rng = [];

  if (stop===undefined) [start, stop] = [0, start];

  for (let i=start; step>0 ? i<stop : i>stop; i+=step) rng.push(i);

  return rng;

}

​

function flipped(cell){

  return {row:cell.col, col:cell.row}

}

​

function grid(i, numColumns){

  return {row:Math.floor(i/numColumns), col:i%numColumns}

}

​

function setup() {

  createCanvas(520, 940)

}

​

function draw() {

  background('white')

  rectMode(CENTER) 

  noFill()

​

  var now = clock()

​

  // draw as many circles as the current `now.hours` value using a

  // `for … of` loop and `range()`. The first circle's y position should be

  // at 100 and each circle below it should be `spacing` pixels below it

  var spacing = 15

  stroke(0)

  circle(50, 50, 10)

​

  // draw as many concentric squares as the current `now.sec` value. Each

  // square should have its center at x=300, y=300 and the first square's 

  // diameter should be 10. Each subsequent squares's size should be `growth` 

  // larger than the previous one's

  var growth = 7

  stroke(100)

  square(300, 300, 10)

}

​

// phase 2:

// set the stroke color before drawing each circle such that the first circle

// is pure black (i.e. 0) and the last is pure white (255). Hint: Try using map() 

// with your loop variable to convert it from the range of now.sec values to the 

// 0–255 greyscale range

​

// phase 3:

// convert the single vertical column of 60 circles into 3 columns of 20 circles

// each. Start by drawing only as many circles as the current `now.sec`. Once this 

// is working, modify your code to draw 60 circles at all times but draw `now.sec`

// of them filled black and leave the remaining `60 - now.sec` of them with no fill