const cellSize = 40;

const jitter = 3/4;

​

const colours = [

  "#999988",

  "#998899",

  "#889999",

  // "#ffff00",

  // "#ff00ff",

  // "#00ffff",

];

​

function setup() {

  createCanvas(400, 400);

  noLoop();

}

​

function draw() {

  randomPoints();

  loadPixels();

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

    for(let j = 0; j < height; j ++) {

      const c = color(closestPointColour(i, j));

      set(i, j, c);

    }

  }

  updatePixels();

  stroke(31);

  strokeWeight(100);

  noFill();

  circle(width/2, height/2, width + 100);

}

​

function mouseReleased() {

  draw();

}

​

function closestPointColour(x, y) {

  let colour = -1;

  let d = Infinity;

  const pos = createVector(x, y);

  points.forEach(point => {

    const diff = p5.Vector.sub(pos, point);

    if(diff.magSq() < d) {

      colour = colours[int(point.z)];

      d = diff.magSq();

    }

  });

  return colour;

}

​

function randomPoints() {

  points = [];

  for(let i = 0; i < width/cellSize; i++) {

    for(let j = 0; j < width/cellSize; j++) {

      const x = i * cellSize + random(cellSize * jitter);

      const y = j * cellSize + random(cellSize * jitter);

      const c = round(random(colours.length-1));

      points.push(createVector(x, y, c));

    }

  }

}

​

​