Walk Don't Walk

var cfg = {

  size: 0,

  rowCols: 5,

  sqrs: [],

  sqrSize: 0,

  clrs: [],

  aux: 0,

  mX: 0,

  mY: 0

};

​

function makeRand(val) {

  return min(floor(Math.random() * min(val, 1 + frameCount/100)));

}

​

function setup() {

  cfg.size = 0.95 * min(windowWidth, windowHeight);

  createCanvas(cfg.size, cfg.size);

  cfg.clrs.push(color(0,200,50));

  cfg.clrs.push(color(200,0,50));

  cfg.clrs.push(color(0,0,200));

  cfg.clrs.push(color(200,200,0));

  cfg.clrs.push(color(220,100,0));

  cfg.clrs.push(color(180,0,180));

  cfg.clrs.push(color(0,150,200));

  cfg.clrs.push(color(250,130,130));

  cfg.clrs.push(color(220,200,180));

  cfg.sqrSize = cfg.size / cfg.rowCols;

  make();

}

​

class Sqr {

  constructor(i, j, type, showTime, moveTime, beat) {

    this.i = i;

    this.j = j;

    this.x = (i) * cfg.sqrSize;

    this.y = (j) * cfg.sqrSize;

    this.type = type;

    this.showTime = showTime;

    this.moveTime = moveTime

    this.beat = beat;

    this.newClr = [color(0,200,50), color(200,0,50)][(this.i + cfg.rowCols * this.j)%2];

    this.clr = this.newClr;

    this.transition = 0;

    this.oldFig;

    this.init();

  }

  init() {

    this.revert = false;

    this.n = 0;

    this.m = 0;

    switch(this.type) {

      case 0: 

        this.fPool = [[green1, green2]];

        break;

      case 1: 

        this.fPool = [

          [red1, red2],

          [red3, red4]

        ];

        break;

      case 2: 

        this.fPool = [[green3, green4]];

        break;

      case 3: 

        this.fPool = [

          [red4, red3],

          [red1, red2]

        ];

        break;        

      case 4: 

        this.fPool = [

          [varcol5, varcol6]

        ];

      break;

      case 5: 

        this.fPool = [

          [varcol1, varcol2]

        ];

      break;

      case 6: 

        this.fPool = [

          [varcol3, varcol4]

        ];

      break;

      case 7: 

        this.fPool = [

          [chic1, chic2]

        ];

      break;            

      case 8: 

        this.fPool = [

          [red4, red1, red3, red1, red4, red2]

        ];

      break;

      case 9: 

        this.fPool = [

          [chap1, chap2]

        ];

      break;            

      case 10: 

        this.fPool = [

          [alien1, alien2, alien3, alien2],

          [alien3, alien2, alien1, alien2]

        ];

      break;    

    }

  }

  control() {

    if (frameCount - this.showTime > cfg.rowCols ** 2 * 5 * this.fPool.length) {

      var figures = this.fPool[min(this.m, this.fPool.length-1)];

      this.oldFig = figures[0];

      this.showTime = frameCount;

      this.type = makeRand(11);

      this.init();

      if ((this.i + this.j + frameCount) % 2 == 0) {

        this.revert = true;

      }

      this.newClr = cfg.clrs[makeRand(9)];

      this.transition = 18;

    }

  }

  show() {

    var tic = frameCount - this.showTime;

    //text(this.m+""+this.type, this.x + 5, this.y + 5);

    if (frameCount > this.showTime) {

      if (tic % this.beat == 0 || tic % (8 * this.beat) == 7.5 * this.beat) {

        this.n++;

      }

      if (tic % (cfg.rowCols ** 2 * 5) == 0) {

        this.m++;

      }

      var figure;

      var figures = this.fPool[min(this.m, this.fPool.length-1)];

      if (frameCount > this.moveTime) {

        figure = figures[this.n % figures.length];

      } else {

        figure = figures[0];

      }

      noFill();

      noStroke();

      rect(this.x, this.y, cfg.sqrSize*0.9, cfg.sqrSize*0.9);

      var pixCt = figure.length;

      var wh = cfg.sqrSize * 0.9 / pixCt;

      if (this.transition > 0) {

        this.transition--;

      }

      for (var j = 0; j < pixCt; j++) {

        var lineStr;

        if (this.transition > 0) {

          if ((18 - j) > this.transition) {

            lineStr = figure[j];

            fill(this.newClr);

          } else {

            lineStr = this.oldFig[j];

            fill(this.clr);

          }

        } else {

          lineStr = figure[j];

          this.clr = this.newClr;

          fill(this.clr);

        }

        if (this.revert) {

          var auxStr = lineStr.split("").reverse().join("");

          lineStr = auxStr;

        }

        try {

          var aStr = lineStr.split("").reverse().join("");           

        }

        catch(err) {

          console.log(this.i + ""+ this.j + "" + this.m + "" + this.n + "|" + this.type + err.message);

        }

​

        var lineArr = lineStr.split(" ");

        for (var i = 0; i < pixCt; i++) {

          if (lineArr[i] == "o") {

            circle(this.x + (i+0.5) * wh, this.y + (j + 0.5) * wh, wh * 0.9);

          }

        }

      }

    } 

  }

}

​

function make() {

​

  var type;

  for (var j = 0; j < cfg.rowCols; j++) {

    for (var i = 0; i < cfg.rowCols; i++) {

      type = (i + cfg.rowCols * j) % 2;

      var t1 = (i + cfg.rowCols * j) * 2;

      var t2 = t1 + 50;

      cfg.sqrs.push(new Sqr(i, j, type, t1, t2, 4));  

    }

  }

}

​

function draw() {

  frameRate(10);

  background(0);

  for (i = 0; i < cfg.sqrs.length; i++) {

    cfg.sqrs[i].show();

    cfg.sqrs[i].control();

  }

}