​

const w = 530;

const h = 200;

const cx = 267;

const cy = 99;

let bl = 40;

let fac;

​

let reveal;

​

let phase;

let frame;

let tot;

let cur;

​

function preload() {

  imgs = [

    loadImage("step1.png"),

    loadImage("step2.png"),

    loadImage("step3.png"),

  ];

}

​

function genReveal() {

  reveal = [];

  for (let y = 0; y < int(200 / bl); ++y) {

    for (let x = 0; x < int(530 / bl) + 1; ++x) {

      reveal.push([x, y]);

    }

  }

  reveal = shuffle(reveal);

}

​

function setup() {

  createCanvas(480, 480);

  background(50);

​

  fac = 0.5;

  cur = 0;

  idx = 0;

  genReveal();

​

  // frameRate(60);

​

  phase = 0;

  frame = 0;

​

  tot = (int(200 / bl) * int(530 / bl) + 30) * 3 + 30;

  cur = 0;

​

  textSize(30);

  fill(0);

}

​

function draw() {

  if (phase == 4) {

    background(50);

    push();

    translate(width / 2, height / 2);

    rotate((frame / 40) * PI);

    translate(-width / 2, -height / 2 + 5);

    tint(255, 255 * (1 - frame / 40));

  }

​

  push();

  translate(width / 2, 0.33 * height);

  scale(0.6);

  translate(-cx, -cy);

  image(imgs[2], 0, 0);

  fill(0, phase == 4 ? 255 * (1 - frame / 40) : 255);

  noStroke();

  text("Rendering...", 50, 65);

  pop();

​

  noFill();

  stroke(80, 255, 80, phase == 4 ? 255 * (1 - frame / 40) : 255);

  strokeWeight(22);

  line(125, 173, map(constrain(cur, 0, tot), 0, tot, 125, 355), 173);

​

  if (phase == 4) {

    push();

    translate(width / 2, 0.66 * height);

    rotate(PI);

    scale(0.6);

    translate(-cx, -cy);

    noStroke();

    fill(0);

    noTint();

    image(imgs[2], 0, 0);

    text("Rendering...", 50, 65);

    pop();

    pop();

  }

​

  if (phase < 3) {

    let img = imgs[phase];

    if (frame < reveal.length) {

      let [x, y] = reveal[frame];

      push();

      translate(width / 2, 0.66 * height);

      rotate(PI);

      scale(0.6);

      translate(-cx, -cy);

      copy(img, bl * x, bl * y, bl, bl, bl * x, bl * y, bl, bl);

      pop();

      ++frame;

    } else if (frame < reveal.length + 30) {

      ++frame;

    } else {

      phase = (phase + 1) % 4;

      frame = 0;

      genReveal();

    }

  } else if (phase == 3) {

    if (frame < 12) {

      push();

      translate(width / 2, 0.66 * height);

      rotate(PI);

      scale(0.6);

      translate(-cx, -cy);

      noStroke();

      fill(0);

      text("Rendering...".slice(0, frame), 50, 65);

      pop();

      ++frame;

    } else if (frame < 30) {

      ++frame;

    } else {

      phase = 4;

      frame = 0;

    }

  }

  ++cur;

​

  if (phase == 4) {

    ++frame;

    if (frame == 41) {

      phase = 0;

      frame = 0;

      cur = 0;

      //  background(50);

    }

  }

}

​

function keyPressed() {

  if (key === "s") {

    save("jan7.png");

  }

}

​