let palette;

let y = 0;

​

function preload() {

  img = loadImage('images/horizons/horizon-7.jpg');

}

​

function setup() {

  createCanvas(600, 600);

  img.resize(width, height);

​

  // Example palette

  // palette = [

  //   color(255, 0, 0),

  //   color(0, 255, 0),

  //   color(0, 0, 255),

  //   color(0),

  //   color(255),

  //   color(255, 255, 0),

  //   color(0, 255, 255),

  //   color(255, 0, 255),

  // ];

​

  // Genuary 23 palette

  palette = ['#264653', '#2a9d8f',

   '#e9c46a', '#f4a261',

   '#e76f51'

  ];

  // NES palette

  // palette = [

  //   '#7C7C7C', '#0000FC', '#0000BC', '#4428BC',

  //   '#940084', '#A80020', '#A81000', '#881400',

  //   '#503000', '#007800', '#006800', '#005800',

  //   '#004058', '#BCBCBC', '#0078F8', '#0058F8',

  //   '#6844FC', '#D800CC', '#E40058', '#F83800',

  //   '#E45C10', '#AC7C00', '#00B800', '#00A800',

  //   '#00A844', '#008888', '#F8F8F8', '#3CBCFC',

  //   '#6888FC', '#9878F8', '#F878F8', '#F85898',

  //   '#F87858', '#FCA044', '#F8B800', '#B8F818',

  //   '#58D854', '#58F898', '#00E8D8', '#787878',

  //   '#FCFCFC', '#A4E4FC', '#B8B8F8', '#D8B8F8',

  //   '#F8B8F8', '#F8A4C0', '#F0D0B0', '#FCE0A8',

  //   '#F8D878', '#D8F878', '#B8F8B8', '#B8F8D8',

  //   '#00FCFC', '#F8D8F8', '#000000'];

​

  image(img, 0, 0);

}

​

function draw() {

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

    const imgColor = img.get(x, y);

    const paletteColor = getPaletteColor(imgColor);

    stroke(paletteColor);

    point(x, y);

  }

​

  y++;

  if (y >= height) {

    noLoop();

  }

}

​

function getPaletteColor(imgColor) {

  const imgR = red(imgColor);

  const imgG = green(imgColor);

  const imgB = blue(imgColor);

​

  let minDistance = 999999;

  let targetColor;

​

  for (const c of palette) {

    const paletteR = red(c);

    const paletteG = green(c);

    const paletteB = blue(c);

​

    const colorDistance =

      dist(imgR, imgG, imgB,

           paletteR, paletteG, paletteB);

​

    if (colorDistance < minDistance) {

      targetColor = c;

      minDistance = colorDistance;

    }

  }

​

  return targetColor;

}