const parts = 6;

const piece = 1/parts;

​

const state = 0;

​

function setup() {

  createCanvas(40, 40);

  //saveGif("test", tt / 60);

}

​

function draw() {

  let c = frameCount % tt;

  let t = c/tt;

  let p = fract(t * parts)

  background(233, 233, 225);

  let s = Math.sin(p * Math.PI * 4) * 3;

  p = Math.pow(p, 0.7);

  if (state == 1) {

    noStroke();

    fill(220, 220, 190);

    //fill(0, 0, 0);

    if (t < piece * 1) {

      circle(10 + lerp(0, 20, p), 10 + s, 3);

    } else if (t < piece * 2) {

      circle(30 - s, 10 + lerp(0, 20, p), 3);

    } else if (t < piece * 3) {

      circle(30 - s, (30 + lerp(0, 20, p)) % 40, 3);

    } else if (t < piece * 4) {

      circle(30 - lerp(0, 20, p), 10 + s, 3);

    } else if (t < piece * 5) {

      circle(10 + s, (10 + lerp(0, 20, p)) % 40, 3);

    } else {

      circle(10 + s, (30 + lerp(0, 20, p)) % 40, 3);

    }

  } else if (state == 2) {

    stroke(220, 220, 190);

    if (t < piece * 1) {

      line(10, 10, 10 + lerp(0, 10, p), 10 + lerp(0, 10, p));

      line(30, 30, 30 - lerp(0, 10, p), 30 - lerp(0, 10, p));

    } else if (t < piece * 2) {

      line(10, 30, 10 + lerp(0, 10, p), 30 - lerp(0, 10, p));

      line(30, 10, 30 - lerp(0, 10, p), 10 + lerp(0, 10, p));

    } else if (t < piece * 3) {

      line(10, 10, 10 + lerp(0, 10, p), 10 + lerp(0, 10, p));

      line(30, 30, 30 - lerp(0, 10, p), 30 - lerp(0, 10, p));

    } else if (t < piece * 4) {

      line(10, 30, 10 + lerp(0, 10, p), 30 - lerp(0, 10, p));

      line(30, 10, 30 - lerp(0, 10, p), 10 + lerp(0, 10, p));

    } else if (t < piece * 5) {

      line(10, 10, 10 + lerp(0, 10, p), 10 + lerp(0, 10, p));

      line(30, 30, 30 - lerp(0, 10, p), 30 - lerp(0, 10, p));

    } else {

      line(10, 30, 10 + lerp(0, 10, p), 30 - lerp(0, 10, p));

      line(30, 10, 30 - lerp(0, 10, p), 10 + lerp(0, 10, p));

    }

  } else if (state == 3) {

    let ss = (Math.sin(t * Math.PI * 4) + 1.0) * 3;

    background(233 + ss, 233 + ss, 225 + ss);

    stroke(220, 220, 190);

    if (t < piece * 1) {

      line(10, 10, 10 + lerp(0, 10, p), 10 + lerp(0, 10, p));

      line(30, 30, 30 - lerp(0, 10, p), 30 - lerp(0, 10, p));

      line(10, 30, 10 + lerp(0, 10, p), 30 - lerp(0, 10, p));

      line(30, 10, 30 - lerp(0, 10, p), 10 + lerp(0, 10, p));

    } else if (t < piece * 5) {

      line(10, 10, 30, 30);

      line(30, 10, 10, 30);

      line(10, 10, 10 + lerp(0, 10, p), 10 + lerp(0, 10, p));

    } else {

      line(10, 10, 10 + lerp(0, 10, (1-p)), 10 + lerp(0, 10, (1-p)));

      line(30, 30, 30 - lerp(0, 10, (1-p)), 30 - lerp(0, 10, (1-p)));

      line(10, 30, 10 + lerp(0, 10, (1-p)), 30 - lerp(0, 10, (1-p)));

      line(30, 10, 30 - lerp(0, 10, (1-p)), 10 + lerp(0, 10, (1-p)));

    }

  }

  noStroke();

  fill(208, 207, 207);

  circle(10, 10, 3);

  circle(30, 30, 3);

  circle(10, 30, 3);

  circle(30, 10, 3);

}