const BASE_S = 10;

const BASE_B = 100;

​

let verts;

let paused = false;

let gfx;

let numVerts;

let windowScale;

function drawSplotch(x, y, iterations, radius, h) {

  let r2 = radius / 2;

  for (let _ = 0; _ < iterations; _++) {

    strokeWeight(windowScale);

    stroke(h, 100, 100, 1);

    ellipse(

      x + random(-radius, radius),

      y + random(-radius, radius),

      radius + random(-r2, r2),

      radius + random(-r2, r2)

    );

  }

}

​

function setup() {

  createCanvas(1000, 1000);

  windowScale = width / 1000;

  colorMode(HSB, 100);

  background(BASE_H, BASE_S, BASE_B);

  // setGradient(0,0,width,height, color(random(255)), color(random(255)), 1);

  gfx = createGraphics(width, height);

  // g.colorMode(HSB, 100);

  texturize(null, 50000);

​

  numVerts = int(random(10,100));

  verts = [];

  for (let _ = 0; _ < numVerts; _++) {

    verts.push(addVert());

  }

  noFill();

  frameRate(60);

}

​

let moveActive = false;

function draw() {

  if (!paused) {

    // if (frameCount % 12 == 0)

    // background(BASE_H, BASE_S, BASE_B, 10);

​

    beginShape();

​

    for (let v of verts) {

      vertex(v.x, v.y);

      drawSplotch(

        v.x,

        v.y,

        v.iterations,

        v.radius + (frameCount % v.iterations),

        v.hue

      );

​

      if (moveActive && !v.done) {

        let dx = v.nx - v.x;

        let dy = v.ny - v.y;

        if (dist(v.x, v.y, v.nx, v.ny) < 2) {

          v.done = true;

        } else {

          v.x += dx * v.easing;

          v.y += dy * v.easing;

        }

      }

    }

    noFill();

    // drawShadow(-2,-2,10,0);

    stroke(10, 10, 10, 100);

    endShape(CLOSE);

    // drawShadow(0,0,0,0);

​

    if (moveActive) {

      const numDone = verts.filter((v) => v.done).length;

      if (numDone == verts.length) {

        moveActive = false;

        for (let v of verts) {

          v.nx = random(width);

          v.ny = random(height);

          v.done = false;

        }

      }

    }

​

    if (!moveActive || random() > 0.4) {

    // if (frameCount % 10 == 0 && !moveActive) {

      //verts = [];

      //for (let _ = 0; _ < 50; _++) verts.push(addVert());

      moveActive = true;

    }

  }

  if (frameCount > 200) {

    generatePixelSort();

    noLoop();

  }

}

​

function keyPressed() {

  if (key === " ") paused = !paused;

  if (key === "d") dither(null);

  if (key === "s") save("splotch.png");

}

​

function addVert() {

  let r = width*0.1;

  return {

    x: random(width),

    y: random(height),

    nx: random(width),

    ny: random(height),

    iterations: random(5, 50),

    radius: random(1, r),

    hue: random(100),

    easing: random(0.01, 0.25),

    done: false,

  };

}

​

function drawShadow(x, y, b, c) {

  drawingContext.shadowOffsetX = x;

  drawingContext.shadowOffsetY = y;

  drawingContext.shadowBlur = b;

  drawingContext.shadowColor = color(c);

}

​

function texturize(g, density) {

  for (let _ = 0; _ < density; _++) {

    if (g == null) {

      stroke(

        BASE_H,

        BASE_S - random(0, 5),

        BASE_B - random(0, 8),

        random(10, 75)

      );

    } else {

      g.stroke(

        BASE_H,

        BASE_S - random(0, 5),

        BASE_B - random(0, 8),

        random(10, 75)

      );

    }

    x1 = random(0, width);

    y1 = random(0, height);

    theta = random(0, TWO_PI);

    segmentLength = random(2, 5);

    x2 = cos(theta) * segmentLength + x1;

    y2 = sin(theta) * segmentLength + y1;

​

    if (g == null) line(x1, y1, x2, y2);

    else g.line(x1, y1, x2, y2);

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

​

  if (axis === 1) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === 2) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​

const referenceSize = 1000;

function index(g, x, y) {

  if (g == null)

    return (x + y * width) * 4;

  else

    return (x + y * g.width) * 4;

}

function DivideBy255(value) {

  return (value + 1 + (value >> 8)) >> 8;

}

function dither(g) {

  if (g == null) {

    let _scale = Math.ceil(1, map(width, 0, referenceSize, 0, 1, false));

    loadPixels();

    for (let y = 0; y < height - _scale; y++) {

      for (let x = _scale; x < width - _scale; x++) {

        let oldr = pixels[index(g, x, y)];

        let oldg = pixels[index(g, x, y) + 1];

        let oldb = pixels[index(g, x, y) + 2];

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

        pixels[index(g, x, y)] = newr;

        pixels[index(g, x, y) + 1] = newg;

        pixels[index(g, x, y) + 2] = newb;

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            pixels[index(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            pixels[index(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            pixels[index(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            pixels[index(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            pixels[index(g, x - _x, y + _y) + 1] += ((oldr - newr) * 3) >> 4;

            pixels[index(g, x - _x, y + _y) + 2] += ((oldr - newr) * 3) >> 4;

​

            pixels[index(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            pixels[index(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            pixels[index(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            pixels[index(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            pixels[index(g, x + _x, y + _y) + 1] += ((oldr - newr) * 1) >> 4;

            pixels[index(g, x + _x, y + _y) + 2] += ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    updatePixels();

  } else {

    let _scale = Math.ceil(1, map(g.width, 0, referenceSize, 0, 1, false));

    g.loadPixels();

    for (let y = 0; y < g.height - _scale; y++) {

      for (let x = _scale; x < g.width - _scale; x++) {

        let oldr = g.pixels[index(g, x, y)];

        let oldg = g.pixels[index(g, x, y) + 1];

        let oldb = g.pixels[index(g, x, y) + 2];

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

        g.pixels[index(g, x, y)] = newr;

        g.pixels[index(g, x, y) + 1] = newg;

        g.pixels[index(g, x, y) + 2] = newb;

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            g.pixels[index(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            g.pixels[index(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            g.pixels[index(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            g.pixels[index(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            g.pixels[index(g, x - _x, y + _y) + 1] += ((oldr - newr) * 3) >> 4;

            g.pixels[index(g, x - _x, y + _y) + 2] += ((oldr - newr) * 3) >> 4;

​

            g.pixels[index(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            g.pixels[index(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            g.pixels[index(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            g.pixels[index(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            g.pixels[index(g, x + _x, y + _y) + 1] += ((oldr - newr) * 1) >> 4;

            g.pixels[index(g, x + _x, y + _y) + 2] += ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    g.updatePixels();

  }

}

​

// https://openprocessing.org/sketch/1239015 - c/o estienne

function generatePixelSort() {

    changes = detectPixelChanges(img, threshold, pixelDistance, direction, false);

    for (let i = 0; i < changes.length; i++) {

        if (i < changes.length - 1) {

            pixelSortTo(

                img,

                changes[i].x,

                changes[i].y,

                changes[i + 1].x,

                changes[i + 1].y,

                direction

            );

        } else {

            pixelSort(img, changes[i].x, changes[i].y, direction);

        }

    }

    img.updatePixels();

}

​

function detectPixelChanges(

    img,

    threshold,

    distance = 1,

    direction = "vertical",

    onlyFirst = true

) {

    let results = [];

    direction =

        direction == "horizontal" ? createVector(1, 0) : createVector(0, 1);

    let pos = createVector();

​

    for (let j = 0, lim = direction.x ? img.height : img.width; j < lim; j++) {

        for (let i = 0, lim = direction.x ? img.width : img.height; i < lim; i++) {

            let colBefore = getPixelValue(

                img,

                direction.x ? i - distance : j,

                direction.x ? j : i - distance

            );

            if (colBefore) {

                let col = getPixelValue(img, direction.x ? i : j, direction.x ? j : i);

                let d = dist(

                    colBefore[0],

                    colBefore[1],

                    colBefore[2],

                    col[0],

                    col[1],

                    col[2]

                );

                if (d > threshold) {

                    //point(direction.x ? i : j, direction.x ? j : i);

                    results.push(createVector(direction.x ? i : j, direction.x ? j : i));

                    if (onlyFirst) break;

                }

            }

        }

    }

    return results;

}

​

function getPixelValue(img, x, y) {

    if (x < 0 || x > img.width - 1 || y < 0 || y > img.height - 1) return null;

    if (!img.pixels.length) img.loadPixels();

    let i = 4 * (x + y * img.width);

    let r = img.pixels[i];

    let g = img.pixels[i + 1];

    let b = img.pixels[i + 2];

    let a = img.pixels[i + 3];

    return [r, g, b, a];

}

​

function setPixelValue(img, x, y, colR, colG, colB, colA = 255) {

    if (x < 0 || x > img.width - 1 || y < 0 || y > img.height - 1) return null;

    if (!img.pixels.length) img.loadPixels();

    let i = 4 * (x + y * img.width);

    img.pixels[i] = colR;

    img.pixels[i + 1] = colG;

    img.pixels[i + 2] = colB;

    img.pixels[i + 3] = colA;

}

​

function pixelSort(img, x, y, direction = "vertical") {

    direction =

        direction == "horizontal" ? createVector(1, 0) : createVector(0, 1);

    let pix = [];

    let start = direction.x ? x : y;

    let end = direction.x ? img.width : img.height;

    for (let i = start; i < end; i++) {

        let val = getPixelValue(img, direction.x ? i : x, direction.x ? y : i);

        pix.push(val);

    }

​

    pix.sort(sortFunction);

    let i = 0;

    for (let p of pix) {

        setPixelValue(

            img,

            x + direction.x * i,

            y + direction.y * i,

            p[0],

            p[1],

            p[2]

        );

        i++;

    }

}

​

function pixelSortTo(img, x1, y1, x2, y2, direction = "vertical") {

    direction =

        direction == "horizontal" ? createVector(1, 0) : createVector(0, 1);

    let pix = [];

    let start = direction.x ? x1 : y1;

    let end = direction.x ? img.width : img.height;

    for (let i = start; i < end; i++) {

        let x = direction.x ? i : x1;

        let y = direction.x ? y1 : i;

        if (x == x2 && y == y2) break;

        let val = getPixelValue(img, x, y);

        pix.push(val);

    }

​

    pix.sort(sortFunction);

    let i = 0;

    for (let p of pix) {

        setPixelValue(

            img,

            x1 + direction.x * i,

            y1 + direction.y * i,

            p[0],

            p[1],

            p[2]

        );

        i++;

    }

}

​

function sortFunction(a, b) {

    //return brightness(color(b[0], b[1], b[2])) - brightness(color(a[0], a[1], a[2]));

    //return b[0] * b[1] * b[2] - a[0] * a[1] * a[2];

    return -(b[0] - a[0] + b[1] - a[1] + b[2] - a[2]);

}

​