Shimmering Mosaics

/*

 * Submitted to "Show Your Work" (Improve some of your earliest creative coding) 👀 #WCCChallenge

 * A rehash of "Bauhaus Spoof" using shaders

 */

​

let myShader;

let paletteJudge = ["Y","Y","Y","Y","N","Y","Y","Y","Y","N","N","Y","N","Y","N","N","Y","N","Y","Y","N","N","Y","N","Y","Y","Y","Y","Y","N","N","N","Y","Y","N","N","Y","Y","Y","N"]

let judgeIndex = 0;

let setIntervalId;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  background(100);

  myShader = createShader(vert, frag);

  generate();

  setIntervalId = setInterval (generate,5000)

 // print (JSON.stringify (palettes.filter((p,i)=>paletteJudge[i]=="Y")))

}

​

function mousePressed() {

  generate();

  if (setIntervalId) {

    clearInterval(setIntervalId);

    setIntervalId = null

  }

}

​

function keyPressed() {

  if (key == "n" || key == "N") paletteJudge[judgeIndex] = "N";

  else paletteJudge[judgeIndex] = "Y";

  print(JSON.stringify(paletteJudge));

}

​

let grid, bkgColor;

​

function generate() {

  grid = new FlexGrid(min(width, height) / 8);

  let n = grid.cellCount;

  let pal;

  let tries = 0;

  do {

    judgeIndex = (judgeIndex + 1) % palettes.length;

    pal = palettes[judgeIndex]; //random(palettes);

    if (paletteJudge[judgeIndex] != "N") break;

  } while (tries++ < 40);

  let pa = pal.slice(0, int(pal.length / 2));

  let pb = pal.slice(int(pal.length / 2));

  if (random() < 0.5)[pa, pb] = [pb, pa];

  bkgColor = random(pb);

  let de = random([

    [1, 2],

    [3],

    [2,3],

    [4],

    [5],

    [6]

  ]).map(i => drawElement[i]);

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

    grid.placeElement(

      i < n / 2 ? random([1, 2]) : 1, {

        angle: random([0, 1, 2, 3]) * PI / 2,

        drawFunc: random(de),

        fill: random(pa),

        bkg: random(pb),

        shaderSettingFill: random(shaderSettings),

        shaderSettingBkg: random(shaderSettings),

      }

    );

  }

}

​

function glColor(c) {

  return [red(c) / 255, green(c) / 255, blue(c) / 255];

}

​

function draw() {

  noStroke();

  shader(myShader);

  let t = millis() * 0.001;

  // let lightDir = createVector((noise(t/3,1)-0.5)*1.4,

  //                            (noise(t/3,10)-0.5)*1.4,

  //                            0.2).normalize();

  let lightDir = createVector(0.5, 0.5, 0.5).rotate(t).normalize();

  myShader.setUniform('u_light_dir', lightDir.array());

  myShader.setUniform('u_resolution', [width, height]);

  let u_cell_bkg, u_cell_fill;

  for (let [variable, value] of shaderSettingBkg) {

    myShader.setUniform(variable, value);

    if (variable == 'u_cell') u_cell_bkg = value;

  }

  myShader.setUniform('u_color', glColor(bkgColor));

  rect(-width / 2, -height / 2, width, height);

  for (let el of grid.elements) {

    push();

    grid.elementTransform(el);

    rotate(el.data.angle);

    for (let [variable, value] of el.data.shaderSettingBkg) {

      myShader.setUniform(variable, value);

      if (variable == 'u_cell') u_cell_fill = value;

    }

    myShader.setUniform('u_color', glColor(el.data.bkg));

    if (el.sz > 1) myShader.setUniform('u_cell', u_cell_bkg*1.2);

    drawElement[0](); // Square

    for (let [variable, value] of el.data.shaderSettingFill) {

      myShader.setUniform(variable, value);

    }

    myShader.setUniform('u_color', glColor(el.data.fill));

    if (el.sz > 1) myShader.setUniform('u_cell',u_cell_fill*1.2);

    el.data.drawFunc();

    pop();

  }

}

​

class FlexGrid {

  constructor(cellSize) {

    let ncols = floor(width / cellSize);

    let nrows = floor(height / cellSize);

    let dx = floor((width - ncols * cellSize) / 2);

    let dy = floor((height - nrows * cellSize) / 2);

    let grid = [];

    let free = new Set();

    for (let i = 0; i < ncols * nrows; i++) free.add(i);

    let elements = [];

    Object.assign(this, {

      nrows,

      ncols,

      dx,

      dy,

      grid,

      free,

      elements,

      cellSize

    })

  }

  get cellCount() {

    return this.ncols * this.nrows;

  }

  elementTransform(el) {

    translate(-width / 2 + this.dx + (el.col + el.sz / 2) * this.cellSize,

      -height / 2 + this.dy + (el.row + el.sz / 2) * this.cellSize);

    scale(this.cellSize * el.sz);

  }

  placeElement(sz, data) {

    let {

      grid,

      nrows,

      ncols,

      elements,

      free

    } = this;

    let freeIndices = shuffle([...free], true);

    for (let cellIndex of freeIndices) {

      let row = int(cellIndex / ncols);

      if (row + sz > nrows) continue;

      let col = cellIndex % ncols;

      if (col + sz > ncols) continue;

      let ok = true;

      for (let i = 0; i < sz && ok; i++) {

        for (let j = 0; j < sz && ok; j++) {

          let index = (row + i) * ncols + col + j;

          if (grid[index]) ok = false;

        }

      }

      if (ok) {

        elements.push({

          row,

          col,

          sz,

          data

        });

        for (let i = 0; i < sz && ok; i++) {

          for (let j = 0; j < sz && ok; j++) {

            let index = (row + i) * ncols + col + j;

            grid[index] = true;

            free.delete(index);

          }

        }

        return true;

      }

    }

    return false

  }

}