201211a - OpenProcessing

mySketch
xxxxxxxxxx
 
forms = [];
let colors = ["#fa4848", "#ffeb3b", "#4df78b", "#489af7", "#fa50d5"];
​
function setup() {
  createCanvas(750, 750);
  rectMode(CENTER);
  let seg = 18;
  let w = width / seg;
  for (let i = 0; i < seg; i++) {
    for (let j = 0; j < seg; j++) {
      let x = i * w + (w / 2);
      let y = j * w + (w / 2);
      forms.push(new Form(x, y, w));
    }
  }
  shuffle(forms, true);
}
​
function draw() {
  translate(width / 2, height / 2);
  scale(0.7);
  translate(-width / 2, -height / 2);
  background("#ebf4ff");
  for (let i = 0; i < forms.length; i++) {
    forms[i].run();
  }
}
​
function easeOutQuart(t) {
  return 1 - (--t) * t * t * t
}
​
class Form {
  constructor(x, y, w) {
    this.x = x;
    this.y = y;
    this.w0 = w;
    this.w = this.w0 * int(random(2) + 1);
    this.col = color(random(colors));
    this.setValues();
    this.tog = int(random(2));
    this.cor = this.tog * this.w * 0.5;
  }
​
  setValues() {
    this.t = -int(random(100) * random());
    this.tSpan = int(random(20, 100));
    this.rnd = int(random(4));
    this.w1 = this.w;
    this.w2 = this.w0 * int(random(2) + 1);
    this.px = this.x;
    this.py = this.y;
    this.dir = int(random(4));
    this.col1 = this.col;
    this.col2 = color(random(colors));
  }
​
  draw() {
    noStroke();
    fill(this.col);
    rect(this.x, this.y, this.w, this.w, this.cor);
  }
​
  move() {
    if (this.t < this.tSpan) {
      if (0 <= this.t) {
        let nor = easeOutQuart(norm(this.t, 0, this.tSpan - 1));
        if (this.rnd == 0) {
          if (this.tog == 0) {
            this.cor = lerp(0, this.w, nor);
          }
          if (this.tog == 1) {
            this.cor = lerp(this.w, 0, nor);
          }
        }
        if (this.rnd == 1) {
          if (this.dir == 0) this.x = lerp(this.px, this.px + this.w, nor);
          if (this.dir == 1) this.x = lerp(this.px, this.px - this.w, nor);
          if (this.dir == 2) this.y = lerp(this.py, this.py + this.w, nor);
          if (this.dir == 3) this.y = lerp(this.py, this.py - this.w, nor);
        }
        if (this.rnd == 2) {
          this.w = lerp(this.w1, this.w2, nor);
          if ((this.w1 < this.w2) && this.tog == 1) {
            this.cor = this.w;
          }
        }
        if (this.rnd == 3) {
          this.col = lerpColor(this.col1, this.col2, nor);
        }
      }
​
    } else {
      if (this.rnd == 0) {
        if (this.tog == 0) this.tog = 1;
        else this.tog = 0;
      }
      this.setValues();
      if (this.x < 0) this.dir = 0;
      if (this.x > width) this.dir = 1;
      if (this.y < 0) this.dir = 2;
      if (this.y > height) this.dir = 3;
    }
​
    this.t++;
  }
​
  run() {
    this.draw();
    this.move();
  }
}