making-a-grid.js

const canvasSketch = require('canvas-sketch');
const { lerp } = require('canvas-sketch-util/math')

const settings = {
  dimensions: [2048, 2048],
  // units: 'cm',
  // pixelsPerInch: 300
};

const sketch = () => {
  const createGrid = () => {
    const points = []
    const count = 4

    for (let x = 0; x < count; x++) {
      for (let y = 0; y < count; y++) {
        const u = count <= 1 ? 0.5 : x / (count - 1)
        const v = count <= 1 ? 0.5 : y / (count - 1)

        points.push([u, v])
      }
    }

    return points
  }

  const points = createGrid()
  const margin = 300
  const getRandomInt = (min, max) => {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min) + min)
  }

  return ({ context, width, height }) => {
    // Set the canvas to white because otherwise we'll get a 
    // transparent background.
    context.fillStyle = 'white'
    context.fillRect(0, 0, width, height)
  
    points.forEach(([u,v]) => {
      const x = lerp(margin, width - margin, u)
      const y = lerp(margin, height - margin, v)

      context.fillStyle = 'white'
      context.beginPath()
      context.arc(x, y, 100, 0, 2 * Math.PI, getRandomInt(0, 2))
      context.fill()

      context.lineWidth = 50
      context.strokeStyle = 'black'
      context.stroke();
    })
  };
};

canvasSketch(sketch, settings);