Image loading doesn't work with for loops

[aferriss]

Nature of issue?

• Found a bug

I'm running into something odd where when I try to load my images in a for loop in the preload function, the images can't resolve. It seems like the file paths are being changed in some way so that p5 can't find the images.

If I try to load the images by typing them all out by hand, then they load just fine.

Here's a sketch showing what happens: https://editor.p5js.org/aferriss/sketches/RyE5Z91iC

I'm wondering if this is related to this issue #771

Details about the bug:

• Web browser and version: Chrome 89.0.4
• Operating System: Mac OSX
• Steps to reproduce this bug:

Try to load images dynamically during a for loop in the preload function

[da091005]

I ran into similar issues. Might be related. It seems to work if you wait ~5 minutes after uploading the file. (I didn't get any errors when I ran your sketch).
Might be related to my issue: #1738

[aferriss]

@da091005 Strange! It's working fine for me now as well. I feel that still it shouldn't take 5 minutes for you to be able to use your images, or if it does can we provide the user with some information on when their image data will be available?

[da091005]

Yea I think it’s a VERY strange bug. If you access the files directly it works immediately. But if you try to use a variable to access the files it takes like 5 minutes.

[slowizzm]

I still experience this issue a lot as well during live sessions with my classes. I too have found that waiting a bit resolves the issue initially. I kept forgetting to come back and reopen #771 but I agree it may be related somehow.

[SushantBansal-tech]

@raclim The loop is working only their is some syntax error is the code . let letters = ABC;
let imgs = [];

function preload(){
// This is broken
for(let i =0; i<letters.length; i++){
imgs.push(loadImage(letters[i] + ".png"));
}

// This works
// imgs.push(loadImage("A.png"));
// imgs.push(loadImage("B.png"));
// imgs.push(loadImage("C.png"));
}

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

function draw() {
background(220);
} my code : let letters = ABC;
let imgs = [];

function preload(){
// This is broken
for(let i =0; i<letters.length; i++){
imgs.push(loadImage(letters[i] + ".png"));
}

// This works
// imgs.push(loadImage("A.png"));
// imgs.push(loadImage("B.png"));
// imgs.push(loadImage("C.png"));
}

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

function draw() {
background(220);
}