如何创建带有key函数的平滑过渡p5.js？

let img1, img2;
let transitionPercent = 0;

function preload() {
  img1 = loadImage('image1.jpg');
  img2 = loadImage('image2.jpg');
}

function setup() {
  createCanvas(400, 400);
  background(0);
}

function draw() {
  // 清除画布
  background(0);

  // 计算过渡的当前值
  let currentImg = lerpImage(img1, img2, transitionPercent);

  // 绘制当前过渡的图像
  image(currentImg, 0, 0, width, height);

  // 更新过渡的百分比
  transitionPercent += 0.01;

  // 如果过渡完成，重置过渡的百分比
  if (transitionPercent >= 1) {
    transitionPercent = 0;
  }
}

// 自定义关键函数，实现图像过渡
function lerpImage(img1, img2, percent) {
  let newImg = createImage(img1.width, img1.height);
  newImg.loadPixels();
  for (let i = 0; i < img1.width * img1.height * 4; i += 4) {
    newImg.pixels[i] = lerp(img1.pixels[i], img2.pixels[i], percent);
    newImg.pixels[i + 1] = lerp(img1.pixels[i + 1], img2.pixels[i + 1], percent);
    newImg.pixels[i + 2] = lerp(img1.pixels[i + 2], img2.pixels[i + 2], percent);
    newImg.pixels[i + 3] = lerp(img1.pixels[i + 3], img2.pixels[i + 3], percent);
  }
  newImg.updatePixels();
  return newImg;
}