let squares;

​

let start = -1;

let end = -1;

let count = -100;

​

function shape1(r) {

  push();

  translate(0.5, 0.5);

  rotate(HALF_PI * r);

  translate(-0.5, -0.5);

​

  noStroke();

  fill(cols[0]);

  rect(0, 0, 1, 1);

  fill(cols[1]);

  triangle(0, 1, 1, 0, 1, 1);

  pop();

}

​

function shape2(r) {

  push();

  translate(0.5, 0.5);

  rotate(HALF_PI * r);

  translate(-0.5, -0.5);

​

  noStroke();

  fill(cols[0]);

  rect(0, 0, 1, 1);

  fill(cols[2]);

  arc(1, 1, 2, 2, PI, 1.5 * PI);

  pop();

}

​

function shape3(r) {

  push();

  translate(0.5, 0.5);

  rotate(HALF_PI * r);

  translate(-0.5, -0.5);

​

  noStroke();

  fill(cols[0]);

  rect(0, 0, 1, 1);

  fill(cols[3]);

  arc(1, 1, 2, 2, PI, 1.5 * PI);

  fill(cols[0]);

  arc(1, 1, 1, 1, PI, 1.5 * PI);

  pop();

}

​

function shape4(r) {

  if (r == 2) {

    return;

  }

​

  noStroke();

  fill(cols[0]);

  rect(0, 0, 1, 1);

​

  fill(cols[4]);

  if (r === 0) {

    rect( 0, 0, 1, 1 );

    fill( cols[0] );

    quad( 0.5, 0, 1, 0.5, 0.5, 1, 0, 0.5 );

  } else  {

    quad( 0, 0.5, 0.5, 0, 1, 0, 0, 1 );

  }

}

​

const shapes = [shape1, shape2, shape3, shape4];

​

function palette() {

  cols = [];

  cols.push(color(255));

  cols.push(color(190,30,45));

  cols.push(color(255,222,23));

  cols.push(color(33,64,154));

  cols.push(color(0));

}

​

function startMove() {

  // Find empty square

  let eidx = 0;

  while (eidx < 16) {

    if (squares[eidx][0] === 4 && squares[eidx][1] === 2) {

      break;

    }

    ++eidx;

  }

  const ex = eidx % 4;

  const ey = int(eidx / 4);

​

  const opts = [];

  for (let [dx, dy] of [

    [1, 0],

    [-1, 0],

    [0, 1],

    [0, -1],

  ]) {

    if (ex + dx >= 0 && ex + dx < 4 && ey + dy >= 0 && ey + dy < 4) {

      const nidx = 4 * (ey + dy) + (ex + dx);

      // But don't undo your previous move.

      if (nidx != end) {

        opts.push(nidx);

      }

    }

  }

  start = opts[int(random(opts.length))];

  end = eidx;

  count = 0;

​

  //print( start, end, count );

}

​

function setup() {

  createCanvas(480, 480);

  palette();

​

  squares = [

    [1, 0],

    [1, 1],

    [2, 0],

    [2, 1],

    [1, 3],

    [1, 2],

    [2, 3],

    [2, 2],

    [3, 0],

    [3, 1],

    [4, 0],

    [4, 1],

    [3, 3],

    [3, 2],

    [4, 3],

    [4, 2],

  ];

​

//  startMove();

}

​

function ease(t) {

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

}

​

function draw() {

  background(140);

​

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

    for (let x = 0; x < 4; ++x) {

      const idx = y * 4 + x;

​

      push();

      translate((x * width) / 4, (y * height) / 4);

      if (idx === start) {

        let dx = 0;

        let dy = 0;

        switch (end - start) {

          case 1:

            dx = width / 4;

            break;

          case -1:

            dx = -width / 4;

            break;

          case 4:

            dy = height / 4;

            break;

          case -4:

            dy = -height / 4;

            break;

        }

        const t = ease( count / 30 );

        translate(t * dx, t * dy);

        ++count;

      }

      scale(width / 4, height / 4);

      const [s, r] = squares[y * 4 + x];

      shapes[s - 1](r);

      pop();

    }

  }

​

  if( count < 0 ) {

    ++count;

    if( count === 0 ) {

      startMove();

    }

  } else if (count === 30) {

    squares[end] = squares[start];

    squares[start] = [4, 2];

    startMove();

  }

}

​

function keyPressed()

{

  if( key === "s" ) {

    save( "jan18.png" );

  }

}