Faded Pxls #genuary2531 - OpenProcessing

mySketch
pal
easing
xxxxxxxxxx
 
/*
  faded pxls #genuary31 #genuary #genuary2531
  Pixel sorting.
  https://openprocessing.org/sketch/2529099
  #generativeart #creativecoding #p5js
*/
​
const N = 20;
let SZE, NX, NY;
let pal;
let svg;
let grid1, grid2, pxls;
​
function setup() {
  SZE = ~~(min(windowWidth, windowHeight) / N)
  createCanvas(~~(windowWidth / SZE) * SZE, ~~(windowHeight / SZE) * SZE);
  describe("animation of pixels in a grid by fade, size, brigthness");
  NX = width / SZE;
  NY = height / SZE;
  frameRate(60);
  noFill();
  strokeWeight(2);
  noStroke();
  rectMode(CENTER);
  pal = [...palettes[frameCount % palettes.length]];
  shuffle(pal, true);
​
  pxls = [];
  grid1 = makeFadedArr(); // has to be first
  grid2 = makeSizeArr();
  grid3 = makeBrightnessArr(); // order is important (size before), else more unorder
  grids = [grid1, grid2, grid3]
}
​
function draw() {
  background(pal[3]);
  
  // svg = `<svg height="${width}" width="${height}" xmlns="http://www.w3.org/2000/svg">\n`;
  const state = (frameCount/90) % grids.length;
  for (let x = 0; x < NX; x++) {
    for (let y = 0; y < NY; y++) {
      const f = easeInOutBounce(fract(state));
      const pxl1 = grids[~~state][x][y]; 
      const pxl2 = grids[(~~state+1)%grids.length][x][y];
      const pxl = {
        x: lerp(pxl1.x, pxl2.x, f),
        y: lerp(pxl1.y, pxl2.y, f),
        clr: lerpColor(pxl1.clr, pxl2.clr, f),
        s: lerp(pxl1.s, pxl2.s, f)
      }
      fill(pxl.clr);
      rect(pxl.x, pxl.y, pxl.s)
​
      // svg += `<g fill="none" stroke="${pal[i]}" stroke-width="1">\n`
      // drawNoiseGrid(12.34 + i * 123.4);
      // svg += `</g>\n`
    }
  }
  // svg += `</svg>`;
​
  drawMsg("faded pixels (epi) #genuary2529 [" + (["fade", "size", "brigthness"])[~~state] + "]");
}
​
function makeFadedArr() {
  let arr = [];
  for (let x = 0; x < NX; x++) {
    let num = ~~random(3, 11);
    let currN = ~~random(num);
    arr[x] = [];
    for (let y = 0; y < NY; y++) {
      const s = random(SZE / 4, SZE * 1.1);
      const f = map(currN, 0, num - 1, 0, 1);
      const clr = lerpColor(color(pal[0]), color(pal[1]), f);
​
      const pxl = { x: x * SZE + SZE / 2, y: y * SZE + SZE / 2, s, clr };
      pxls.push(pxl);
      arr[x][y] = pxl;
​
      currN++;
      if (currN === num) {
        num = ~~random(4, 13);
        currN = 0;
      }
    }
  }
  return arr;
}
​
function makeSizeArr() {
  pxls = pxls.sort((a, b) => a.s - b.s);
  let arr = [];
  for (let x = 0; x < NX; x++) {
    arr[x] = [];
    for (let y = 0; y < NY; y++) {
      const pxl = pxls[x*NY+y];
      arr[x][y] = {x: x * SZE + SZE / 2, y: y * SZE + SZE / 2, s: pxl.s, clr: pxl.clr};
    }
  }
  return arr;
}
​
function makeBrightnessArr() {
  pxls = pxls.sort((a, b) => brightness(a.clr) - brightness(b.clr));
  let arr = [];
  for (let x = 0; x < NX; x++) {
    arr[x] = [];
    for (let y = 0; y < NY; y++) {
      const pxl = pxls[x*NY+y];
      arr[x][y] = {x: x * SZE + SZE / 2, y: y * SZE + SZE / 2, s: pxl.s, clr: pxl.clr};
    }
  }
  return arr;
}
​
​
function drawMsg(msg) {
  push();
  blendMode(BLEND);
​
  fill("black")
  noStroke();
  textAlign(LEFT, TOP)
  text(msg, 1, 1)
​
  fill("white")
  noStroke();
  textAlign(LEFT, TOP)
  text(msg, 0, 0)
​
  pop();
}
​
function keyPressed() {
  if (key === "s") {
    save(svg.split("\n"), "epi_sorted_pixels.svg.txt");
  }
}
​
function mousePressed() {
  if (mouseButton != RIGHT) setup();
}