Processingで複数画像をロードする

Note

Processingで複数イメージを事前にロードして使えるようにしたい。

let images = [];  // 画像を格納する配列
let imagePaths = [
	"",
	""
];  // 画像のパスを配列で管理
 
function preload() {
  for (let i = 0; i < imagePaths.length; i++) {
    images[i] = loadImage(imagePaths[i], 
      (img) => {
        console.log(`Image ${i} loaded successfully`);
        images[i] = img;  // 画像を配列に格納
      },
      () => {
        console.error(`Failed to load image at ${imagePaths[i]}`);
      }
    );
  }
}
 
function setup() {
  createCanvas(800, 600);
}
 
function draw() {
  background(220);
 
  // 各画像を表示する
  for (let i = 0; i < images.length; i++) {
    if (images[i]) {
      image(images[i], i * 100, 50);
    }
  }
}