正在加载要在 p5.js 内使用的数千张图像

Question

我将如何在 p5.js 中加载数千张图片？实际加载图像的唯一好方法是在 preload() 函数中，但我正在制作一个需要加载 3498 张图像的程序，并加载 10.9 GB 的图像，假设进入 RAM , 使用 preload() 将不起作用。我想这样做的原因是通过合并和旋转它们然后导出它们来操纵帧。

let frameNum = 3498;
let overlapNum = 10;
let overlapAngle;

function setup() {
    createCanvas(1080, 1080);
    overlapAngle = QUARTER_PI * 0.08;
}

function draw() {
    background(0);
    push();
    translate(width / 2, width / 2);
    tint(255, 255 / overlapNum);
    let imgSize = width / sin(QUARTER_PI);
    let rotAmount = frameCount / 120.0 * TWO_PI;
    for (i = 0; i < overlapNum; i++) {
        let imgNum = ((frameCount * 10) + i + 3496) % (frameNum) + 1;
        push();
        rotate(i / float(overlapNum) * overlapAngle + rotAmount);
        let img = loadImage("Input/frame-" + str(imgNum).padStart(5, "0") + ".png");
        image(img, -imgSize / 2, -imgSize / 2, imgSize, imgSize);
        print("Input/frame-" + str(imgNum).padStart(5, "0") + ".png");
        print(imgSize);
        pop();
    }
    pop();
}

结果只是一片空白canvas。没有负载。我尝试将图像加载到 preload() 并且有效。

我希望我的问题没有措辞不当。谢谢。

Answer 1

在您的评论中，您的想法是正确的。 loadImage() 函数可以取 up to 3 parameters。如果您创建一个函数来显示您想要的图像，并将函数名称作为 loadImage() 的第二个参数传递，则该函数将在图像加载时调用（以加载的图像作为输入）。这样的事情可能会奏效：

function setup() {
  //... your setup stuff
  frameRate(0.1);
}

function draw() {
  //...
  for (...) {
    loadImage('file path', dispImage);
  }
}

function dispImage(image_to_display) {
  this.img = image_to_display;
  //... do whatever to display the image
}

我放入 frameRate() 命令是因为我不认为 for 循环会等到显示一个图像来加载下一个图像，所以为了让它工作，您需要足够慢的帧速率以允许在帧之间加载一堆图像。

我没有测试过这个，所以我可能犯了错误或误解了一些东西。

正在加载要在 p5.js 内使用的数千张图像

Loading thousands of images to use within p5.js

javascript

p5.js