let swapit = false;

​

function initColours() {

  cols = [];

  for (let idx = 0; idx < 9; ++idx) {

    const r = [];

    for (let jdx = 0; jdx < 9; ++jdx) {

      r.push(color(random(255), random(255), random(255)));

     // r.push( color( 255 ) );

    }

    cols.push(r);

  }

}

​

function transpose() {

  const ncols = [];

  for (let idx = 0; idx < 9; ++idx) {

    const r = [];

    for (let jdx = 0; jdx < 9; ++jdx) {

      r.push(cols[jdx][idx]);

    }

    ncols.push(r);

  }

  cols = ncols;

}

​

function newCol(c1, c2) {

  const r1 = red(c1);

  const g1 = green(c1);

  const b1 = blue(c1);

  const d1 = dist(r1, g1, b1, 128, 128, 128);

  const r2 = red(c2);

  const g2 = green(c2);

  const b2 = blue(c2);

  const d2 = dist(r1, g1, b1, 128, 128, 128);

​

  const d = 128;

​

  const rm = 0.5 * (r1 + r2);

  const gm = 0.5 * (g1 + g2);

  const bm = 0.5 * (b1 + b2);

  const dm = dist(rm, gm, bm, 128, 128, 128);

​

  return color(

    128 + ((128 - rm) * d) / dm,

    128 + ((128 - gm) * d) / dm,

    128 + ((128 / gm) * d) / dm

  );

}

​

function openH() {

  const ncols = [];

  for (let idx = 0; idx < 9; ++idx) {

    const r = [cols[idx][2]];

    for (let jdx = 3; jdx < 7; ++jdx) {

      const c1 = cols[idx][jdx - 1];

      const c2 = cols[idx][jdx];

      r.push(newCol(c1, c2));

      r.push(c2);

    }

    ncols.push(r);

  }

  cols = ncols;

}

​

function ease(t) {

  return t * t * (3.0 - 2.0 * t);

}

​

function setup() {

  createCanvas(500, 500);

  initColours();

}

​

function draw() {

  background(255);

  const s = frameCount % 125;

  let t = (frameCount % 125) / 125.0;

  t = ease(t);

  noFill();

  stroke(0);

  colorMode( HSB, 255 );

  cols[4][4] = color( 

    (frameCount*0.0283756)%255, 

    map( sin( frameCount * 0.002497624 ), -1, 1, 150, 255 ),

    map( sin( frameCount * 0.00375634 ), -1, 1, 80, 255 ) );

  colorMode( RGB, 255 );

​

  if (s == 0) {

    transpose();

    openH();

    swapit = !swapit;

  }

​

  if (swapit) {

    push();

    rotate(QUARTER_PI);

    scale(1, -1);

    rotate(-QUARTER_PI);

  }

​

  for (let y = 0; y < 5; ++y) {

    const r = cols[y + 2];

    let my = y * 100;

    fill(r[4]);

    rect(width / 2 - 50, my, 100, 100);

    let w = t * 100;

​

    let x1 = width / 2 + 50;

    let x2 = width / 2 - 50 - w;

​

    for (let idx = 0; idx < 2; ++idx) {

      fill(r[5 + 2 * idx]);

      rect(x1, my, w, 100);

      fill(r[6 + 2 * idx]);

      rect(x1 + w, my, 100, 100);

      fill(r[3 - 2 * idx]);

      rect(x2, my, w, 100);

      fill(r[2 - 2 * idx]);

      rect(x2 - 100, my, 100, 100);

      x1 += 100 + w;

      x2 -= 100 + w;

    }

  }

​

  if (swapit) {

    pop();

  }

}

​

function keyPressed()

{

  if( key == ' ' ) {

    initColours();

  } else if( key === 's' ) {

    save( 'jan2.png' );

  }

}