let imgs
async function setup() {
  imgs = await loadImagesOrVideos([], 20)
  createCanvas(windowWidth, windowHeight, WEBGL)
  const diagonal = Math.hypot(width, height)
  canvasPadding(
    diagonal/2,
    diagonal/2
  )
}

// https://openprocessing.org/sketch/2676129
function easeInCubic(t) {
  return t ** 3;
}
function easeOutCubic(t) {
  return 1 - Math.abs((t - 1) ** 3);
}

function draw() {
  clear()

  const framesPerItem = 120
  const currIdx =
    floor(frameCount / framesPerItem) %
    imgs.length
  const nextIdx = (currIdx + 1) % imgs.length
  const curr = imgs[currIdx]
  const next = imgs[nextIdx]

  let progress = map(
    // Range is 0-framesPerItem
    frameCount % framesPerItem,
    80, // Transition starts at frame 80
    120,
    0,
    1,
    true
  )

  imageMode(CENTER)
  if (progress > 0.5) {
    push()
    rotateY(
      TWO_PI -
      PI/2 * (1 - easeOutCubic(
        map(progress, 0.5, 1, 0, 1)
      ))
    )
    image(
      next,
      0, 0, width, height,
      0, 0, next.width, next.height,
      COVER
    )
    pop()
  } else {
    push()
    rotateY(PI / 2 * easeInCubic(
      map(progress, 0, 0.5, 0, 1)
    ))
    image(
      curr,
      0, 0, width, height,
      0, 0, curr.width, curr.height,
      COVER
    )
    pop()
  }
}