const HEIGHT = 1080;

const SIZE_MIN = Math.min(WIDTH, HEIGHT);

const SIZE_MAX = Math.max(WIDTH, HEIGHT);

​

const BACKGROUND_COLOR = "black";

​

let canvas;

function setup() {

  canvas = createCanvas(WIDTH, HEIGHT);

  setupGraphics(window)

  noLoop();

}

​

function setupGraphics(gfx) {

  gfx.colorMode(RGB, 1);

  gfx.strokeCap(SQUARE);

  gfx.noSmooth()

  gfx.pixelDensity(1);

}

​

function draw() {

  background(BACKGROUND_COLOR)

  let mx = mouseX / width;

  let my = mouseY / height;

}

​

function generateColors(w, h, get_color) {

  const s = 0.1;

  const gfx = createGraphics(w, h);

  setupGraphics(gfx);  

  for_cols_rows(gfx.width, gfx.height, ({x, y, x_f, y_f}) => {

    gfx.set(x, y, get_color({x, y, x_f, y_f}));

  });

  gfx.updatePixels();

  return gfx;

}

​

​

function bubbleSortGraphics(gfx, x, y, w, h, rw, rh, get_dx, get_dy, compare_value, count) {

  const region_size = rw * rh;

  const region1 = new Array(region_size).fill(null).map(() => new Object());

  const region2 = new Array(region_size).fill(null).map(() => new Object());

  function sortPixels() {    

    let changed = false;

    for (let i=0; i<w; i+=rw) {

      for (let j=0; j<h; j+=rh) {

        let region_count = 0;

        for (ir=0; ir<rw; ir++) {

          for (jr=0; jr<rh; jr++) {    

            const x1 = x + i + ir;

            const y1 = y + j + jr;

​

            if (

              x1 < 0 || x1 >= gfx.width || y1 < 0 || y1 >= gfx.height 

              || x1 < x || x1 >= x + w || y1 < y || y1 >= y + h

            ) continue;

​

            const x_f = i / w;

            const y_f = j / h;

            const x2 = x1 + get_dx(x_f, y_f)

            const y2 = y1 + get_dy(x_f, y_f)

​

            if (

              x2 < 0 || x2 >= gfx.width || y2 < 0 || y2 >= gfx.height 

              || x2 < x || x2 >= x + w || y2 < y || y2 >= y + h

            ) continue;

​

            const index = ir + jr * rw;

            region1[index].x = x1; 

            region1[index].y = y1; 

            region1[index].v = getPixelColor(x1, y1, gfx.pixels, gfx.width);

            region2[index].x = x2; 

            region2[index].y = y2; 

            region2[index].v = getPixelColor(x2, y2, gfx.pixels, gfx.width);

            region_count++;

          }

        }

        const r1_value = region1.reduce((tot, r) => tot + compare_value(r.v), 0);

        const r2_value = region2.reduce((tot, r) => tot + compare_value(r.v), 0);

        if (r1_value - r2_value > 0) {

          for (let ir =0; ir<region_count; ir++) {

            const {x:x1, y:y1, v:clr1} = region1[ir];

            const {x:x2, y:y2, v:clr2} = region2[ir];

            setPixelColor(x1, y1, clr2, gfx.pixels, gfx.width);

            setPixelColor(x2, y2, clr1, gfx.pixels, gfx.width);

          }

          changed = true;

        }

      }

    }

    return changed;

  }

  gfx.loadPixels();

  if (count < 0) count = 1000;

  for (let i=0; i<count; i++) if (!sortPixels()) break;

  gfx.updatePixels();  

  return gfx;

}

​

function getPixelColor(x, y, px, w) {

  const i_red = (x + y * w) * 4;

  return px.slice(i_red, i_red + 4);

}

​

function setPixelColor(x, y, clr, px, w) {

  const i_red = (x + y * w) * 4;

  for (let i=0; i<4; i++)

    px[i_red + i] = clr[i]

}

function for_cols_rows(cols, rows, fn) {

  for (let y=0; y<rows; y++) {

    const y_f = y / rows

    const y_ff = y / (rows - 1); 

​

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

      const x_f = x / cols;

      const x_ff = x / (cols - 1);

​

      fn({x, y, x_f, y_f, x_ff, y_ff, cols, rows});

    }

  }

}

​

function for_n(count, fn) {

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

    const f = i / count;

    const ff = i / (count - 1);

    fn({i, f, ff, count});

  }

}

function ctx(fn) {

  push()

  let ret = fn()

  pop()

  return ret;

} 

​

const sign_floor_ceil = (v) => v < 0 ? floor(v) : ceil(v);

​

const mod = (v, n=1) => ((v % n) + n) % n;

const scos = v => cos(v * TAU);

const ssin = v => sin(v * TAU);

const cosn = v => scos(v) * 0.5 + 0.5;

const sinn = v => ssin(v) * 0.5 + 0.5;

const inv_cosn = v => 1 - cosn(v);

​

const get_value = clr => max(clr[0], clr[1], clr[2])

const get_luma = clr => 0.2126 * clr[0] + 0.7152 * clr[1] + 0.0722 * clr[2];

​

const get_saturation = clr => {

  maxc = Math.max(clr[0], clr[1], clr[2])

  minc = Math.min(clr[0], clr[1], clr[2])

  if (minc == maxc) return 0  

  s = (maxc-minc) / maxc  

  return s

}

​

const get_hue = clr => {

  let min = Math.min(clr[0], clr[1], clr[2]);

  let max = Math.max(clr[0], clr[1], clr[2]);

  if (min == max) return 0;

​

  let hue = 0;

  if (max == clr[0]) hue = (clr[1] - clr[2]) / (max - min);

  else if (max == clr[1]) hue = 2 + (clr[2] - clr[0]) / (max - min);

  else hue = 4 + (clr[0] - clr[1]) / (max - min);

​

  return mod(hue, 6);

  // hue = hue * 60;

  // if (hue < 0) return hue + 360;

  // return hue;

}