rows,

    curvesGrid,

    cellWidth,

    cellHeight,

    curveSizeAmount,

    time;

​

function setup() {

  createCanvas(400, 400);

  columns = 4;

  rows = 4;

  curvesGrid = [];

  for (let x = 1; x <= columns; x++) {

    curvesGrid.push([]);

    for (let y = 1; y <= rows; y++)

      curvesGrid[x - 1].push(new Curve());

  }

  cellWidth = width / (columns + 1);

  cellHeight = height / (rows + 1);

  curveSizeAmount = 0.8;

  time = 0;

}

​

function draw() {

  let x,

      y,

      penX,

      penY;

  background(22);

  noFill();

  strokeWeight(2);

  stroke(122);

  for (x = 0; x <= columns; x++) {

    if (x)

      line(x * cellWidth, 0, x * cellWidth, height);

    ellipse((x + 0.5) * cellWidth, cellHeight / 2, curveSizeAmount * cellWidth, curveSizeAmount * cellHeight);

  }

  for (y = 0; y <= rows; y++) {

    if (y)

      line(0, y * cellHeight, width, y * cellHeight);

    ellipse(cellWidth / 2, (y + 0.5) * cellHeight, curveSizeAmount * cellWidth, curveSizeAmount * cellHeight);

  }

  for (x = 1; x <= columns; x++) {

    penX = ((x + 0.5) + curveSizeAmount / 2 * cos(x * time)) * cellWidth;

    for (y = 1; y <= rows; y++) {

      penY = ((y + 0.5) + curveSizeAmount / 2 * sin(y * time)) * cellHeight;

      curvesGrid[x - 1][y - 1].addPoint(penX, penY);

      curvesGrid[x - 1][y - 1].show();

    }

  }

  time += 0.05;

}