const fw = 480 - (28 + 23);

const fh = 360;

​

function preload() {

  for (let idx = 6; idx <= 58; idx += 2) {

    const s = "frames/0" + nf(idx, 2) + "m.png";

    imgs.push(loadImage(s));

  }

}

​

function setup() {

  createCanvas(480, 360);

  frameRate(12);

}

​

function drawRow(lev) {

  const frm = (frameCount /*+ 1234567 * lev*/) % imgs.length;

  //  const t = (frameCount / imgs.length) % 1;

​

  push();

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

    translate(28+fw/2, height / 2 - 10);

    scale(0.7);

    translate(-(28+fw/2), -height / 2);

  }

  translate( lerp( 0, fw, (frameCount / imgs.length) % 1 ), 0 );

  const iw = fw * pow(0.7, lev);

  for( let idx = -10; idx <= width/iw; ++idx ) {

    copy(imgs[frm], 28, 0, 429, 360, int(idx*fw) + 28, 0, fw, fh);

  }

  pop();

}

​

function draw() {

 // background(0, 255, 0);

  background( 128 );

  const t = (frameCount / imgs.length) % 1;

  push();

  translate( 28+fw/2, height/2 + lerp( 0, 10/0.7, t ) );

  scale( pow( 1.0 / 0.7, t ) );

  translate( -(28+fw/2), -height/2 );

  for (let idx = 10; idx >= 1; --idx) {

    drawRow(idx);

  }

  pop();

  push();

  translate( 248, 130 );

  scale( pow( 5.0, t ) );

  translate( -248, -130 );

  image(imgs[frameCount % imgs.length], 0, 0);

  pop();

​

  fill( 0 );

  noStroke();

  rect( 0, 0, 28, height );

  rect( width-23, 0, 23, height );

  /*

  noFill();

  stroke( 255, 0, 0 );

  rect( 125, 95, 247, 70 );

  */

}

​

function keyPressed()

{

  if( key == 'g' ) {

    saveGif( 'out.gif', imgs.length / 12.0 );

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

    save( 'jan3.png' );

  }

}