时间戳

首页 > 解决方案 > 加载数千张图片以在 p5.js 中使用

javascript - 加载数千张图片以在 p5.js 中使用

问题描述

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

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();
}

这样做的结果只是一张空白的画布。什么都没有加载。我尝试将图像加载到preload()中并且有效。

我希望我没有把我的问题说得不好。谢谢你。

标签： javascriptp5.js

解决方案

在您的评论中，您的想法是正确的。该loadImage()函数最多可以使用 3 个参数。如果您创建一个用于显示所需图像的函数，并将函数名称作为 的第二个参数传递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循环会等到显示一个图像来加载下一个图像，所以为了让它工作，你需要帧速率足够慢以允许一堆图像在帧之间加载。

我没有对此进行测试，所以我可能犯了错误或误解了某些东西。

推荐阅读