p5js-写真からカラーパレットを生成して各種パラメータで置き換える

sample.js

import SortColors from "modules/SortColors";//https://github.com/YuzuruSano/p5-skelton/blob/master/dev/js/scripts/modules/SortColors.js
import * as gd from "generative-design-library.js";
import * as p5 from 'p5';

let s = (sk) => {
  let img;
  let colors = [];
  let sortMode = null;
  const sc = new SortColors(sk);

  sk.preload = () => {
    sk.loadImage('../../images/sample.jpg', setImage);
  }

  sk.setup = () => {
    sk.createCanvas(600, 600);
    sk.noCursor();
    sk.noStroke();
  }

  sk.draw = () => {
    const width = sk.width;
    const mouseX = sk.pmouseX;
    const tileCount = sk.floor(width / sk.max(mouseX, 5));
    const rectSize = width / tileCount;

    img.loadPixels();
    colors = [];

    for (let gridY = 0; gridY < tileCount; gridY++) {
      for (let gridX = 0; gridX < tileCount; gridX++) {
        const px = sk.int(gridX * rectSize);
        const py = sk.int(gridY * rectSize);
        const i = (py * img.width + px) * 4;
        const c = sk.color(img.pixels[i], img.pixels[i + 1], img.pixels[i + 2], img.pixels[i + 3]);
        colors.push(c);
      }
    }
    
    if (sortMode){
      colors = sc.sort(colors, sortMode);
    }

    let i = 0;
    for (let gridY = 0; gridY < tileCount; gridY++) {
      for (let gridX = 0; gridX < tileCount; gridX++) {
        sk.fill(colors[i]);
        sk.rect(gridX * rectSize, gridY * rectSize, rectSize, rectSize);
        i++;
      }
    }
  }

  sk.keyReleased = (event) => {
    if (event.key == 'c' || event.key == 'C') writeFile([gd.ase.encode(colors)], gd.timestamp(), 'ase');
    if (event.key == 's' || event.key == 'S') saveCanvas(gd.timestamp(), 'png');
    
    if (event.key == '5') sortMode = null;
    if (event.key == '6') sortMode = sc.HUE;
    if (event.key == '7') sortMode = sc.SATURATION;
    if (event.key == '8') sortMode = sc.BRIGHTNESS;
    if (event.key == '9') sortMode = sc.GRAYSCALE;
  }

  const setImage = (loadedImageFile) => {
    img = loadedImageFile;
  }
}
const P5 = new p5(s);