​

points.pushV = (x, y) => points.push(createVector(x, y));

​

const colors = [

  "red",

  "yellow",

  "blue",

  "#4499ff",

  "#7ffff5",

  "#181818",

  "#696969",

  "#33ff99",

  "#dddddd",

  "#424242",

];

​

function setup() {

  createCanvas(400, 400);

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

    points.pushV(random(width), random(height));

    points[i].regionColor = colors[i % colors.length];

  }

  pixelDensity(1);

}

​

function mousePressed() {

  points.pushV(mouseX, mouseY);

  points.at(-1).regionColor = random(colors);

}

​

function mapPixels(fn) {

  loadPixels();

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

    const r = pixels[i+0];

    const g = pixels[i+1];

    const b = pixels[i+2];

    const a = pixels[i+3];

    const idx = i / 4;

    const y = floor(idx / width);

    const x = idx - y * width;

    const newC = fn(x, y, color(r, g, b, a));

    pixels[i+0] = red(newC);

    pixels[i+1] = green(newC);

    pixels[i+2] = blue(newC);

    pixels[i+3] = alpha(newC);

  }

  updatePixels();

}

​

p5.Vector.prototype.distSq = function(other) {

  return p5.Vector.sub(this, other).magSq();

}

​

function draw() {

  background("black");

  noLoop();

​

  mapPixels((x, y, c) => {

    //console.log(x, y);

    //return lerpColor(color("red"), color("green"), x / width);

    const vec = createVector(x, y);

    const closest = points.reduce((p, closest) => {

      const distSqToP = vec.distSq(p);

      const distSqToClosest = vec.distSq(closest);

      if (distSqToP < distSqToClosest) {

        return p;

      } else {

        return closest;

      }

    });

    return closest.regionColor;

  });

  for (const p of points) {

    strokeWeight(8);

    stroke("white");

    point(p.x, p.y);

  }

}

​