loadImage file path acting up, loads with arbitrary folder names.

[slowizzm]

• [ x] Found a bug

When I run this locally, everything works as expected.
One of my students ran into this problem and I have been able to reproduce it, only with his sketch. I wrote a version previously as an example and it runs fine, not sure why it's the case with his. I have even started from scratch as a new sketch and ended with the same result when I use his images. ...

Something is making loadImage() point to the same file path resulting in all my image calls drawing the same image sequence. The weird thing is, I can put in a path that doesn't exist and it still draws the images. It does break if I don't have the image named correctly ...

for example ...
'images/uhh/frame_' ... defaults to the first folder inside images folder. fyi, uhh an arbitrary folder name, it is not a folder or anything that exists in this project.

sketch is provided below.

70.0.3538.77 (Official Build) (64-bit)

Revision | 0f6ce0b0cd63a12cb4eccea3637b1bc9a29148d9-refs/branch-heads/3538@{#1039}
OS | Mac OS X
Same result in firefox, sierra, both Mac and Windows

https://editor.p5js.org/slow_izzm/sketches/HJXERum0m

[catarak]

i don't quite understand what the issue is here. i'm loading the sketch you linked, and it seems to load six different images, and when i hover over the image, it cycles through the images in a loop.

[slowizzm]

Yea, it acts as though it is working, but it's not, at least on my end, and I have tried from several different computers and browsers. Are you seeing the same image sequence in all three panels?

So, in the project folder I have images, and inside that folder I have 3 folders that each contain a different set of images. We should be seeing 3 different image sequences animating on the canvas. Animations should be pulling from images/p1, images/p2, and images/p3, currently all three panels are showing the images that are inside images/p1.

On top of that, if I am to update line 9 with something like this ... const FILENAMES = ['uhh/uhh/frame_']; ... there is no error, everything still runs, even though clearly that file path does not exist.

I have no issues running this sketch on a local server, this only happens in the web editor ...

[catarak]

Okay, now I understand what's happening. When the file names are generated programmatically, rather than just a string inline, it loads the files in a different way. It seems like that algorithm is too greedy 😸

[davepagurek]

Hi! Just adding some information from the discussion in #2113: A use case that should maybe be considered when thinking about a fix would be one where a library script is the one calling loadImage. p5.play is an example of this, where one can pass in an image path prefix and then the library appends numbers to the end to load a sequence of images. It seems like the only way to support that would be not to rewrite any image strings in the script's source code.

It was suggested that maybe the p5 editor could override p5.prototype.loadImage and update the URL there rather than editing the source directly. Something like:

const oldLoadImage = p5.prototype.loadImage
p5.prototype.loadImage = function(url, ...args) {
  const newUrl = someFunctionToUpdateTheURL(url)
  return oldLoadImage.call(this, url, ...args)
}

Do you think that solution would work, or are there some issues that approach might run into?