mosh

let border, dim, sectSize, section, boxNum, boxes, isGenerating;

​

function setup() {

  frameRate(10);

  colorMode(HSL, 100, 100, 100);

  createCanvas(min(windowWidth, windowHeight), min(windowWidth, windowHeight));

  createBg();

  rectMode(CORNERS);

  section = floor(random(3, 8));

  border = floor(random(20, 80));

  dim = min(width, height) - border * 2;

  sectSize = dim / section;

  boxNum = 20;

  boxes = new Array(boxNum);

  createBoxes();

}

​

function draw() {

  if (isGenerating == 0) return;

  blendMode(DIFFERENCE);

  noStroke();

  // Update and show all boxes without clearing the canvas

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

    boxes[i].update();

    boxes[i].show();

  }

}

​

​

function ease(x) {

return 1 - Math.pow(1 - x, 5);

}

​

function mouseClicked() {

  if (isGenerating == 0) {

  blendMode(BLEND);

  background(30, 10, 94);

  blendMode(DIFFERENCE);

  createBoxes();  

  } else {

    isGenerating = 0;

  }

}

​

class Box {

  constructor(x1, x2, y1, y2, h, s, l, sS) {

    let startX = floor(random(0, section - 1) + 1) * sectSize + border;

    let startY = floor(random(0, section - 1) + 1) * sectSize + border;

    this.xf1 = x1;

    this.xf2 = x2;

    this.xc1 = startX;

    this.xc2 = startX;

    this.yf1 = y1;

    this.yf2 = y2;

    this.yc1 = startY;

    this.yc2 = startY;

    this.h = h;

    this.s = s;

    this.l = l;

    this.ease = 0;

    this.sectSize = sS;

  }

​

  show() {

    fill(this.h, this.s, this.l);

    rect(this.xc1, this.yc1, this.xc2, this.yc2, this.sectSize);

  }

​

  update() {

    let easedValue = ease(this.ease += 0.001);

    this.xc1 = lerp(this.xc1, this.xf1, easedValue);

    this.xc2 = lerp(this.xc2, this.xf2, easedValue);

    this.yc1 = lerp(this.yc1, this.yf1, easedValue);

    this.yc2 = lerp(this.yc2, this.yf2, easedValue);

  }

}

​

function createBoxes() {

  isGenerating = 1;

  createBg();

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

    // Create a new box

    let x1 = floor(random(0, section + 1)) * sectSize + border;

    let x2 = floor(random(0, section + 1)) * sectSize + border;

    let y1 = floor(random(0, section + 1)) * sectSize + border;

    let y2 = floor(random(0, section + 1)) * sectSize + border;

    let h = random(4) * 25;

    let s = random(2) * 25 + 50;

    let l = random(2) * 25 + 50;

    boxes[i] = new Box(x1, x2, y1, y2, h, s, l, sectSize);

  }

}

​

function createBg() {

  blendMode(BLEND);

  background(random(4) * 25, random(2) * 25, random(25) + floor(random(2)) * 75);

  blendMode(DIFFERENCE);

}