load image URLs do not work with interpolation ticks

[tansanDOTeth]

p5.js version

1.6.0

What is your operating system?

Mac OS

Web browser and version

114.0.5735.106

Actual Behavior

Load image function fails when using string interpolation

Expected Behavior

It should evaluate the string before loading the image

Steps to reproduce

https://editor.p5js.org/tansan/sketches/yg1JrIb8b

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[lindapaiste]

Thanks for raising this issue. I know we've had a similar issue before regarding dynamic image URLs (with sprites for p5play?) but I can't find it at the moment.

At the very least, it will be easy to make it so that a static URL with backticks works. That is, img = loadImage(`2010.png`).
Right now, the code for replacing file paths only looks for ' or ".

Supporting dynamic interpolations is a lot trickier and I have to think about whether it's even possible. Right now we modify the text of your sketch.js file to replace a relative file path like loadImage("2010.png") with the absolute URL of where the image is stored on the p5 servers: loadImage("https://assets.editor.p5js.org/648fe047bbe363001a1b0609/0af03b30-1be1-42dc-97a5-5c0d137bb8fe.png"). This happens before the code is run.

With an interpolation like loadImage(`${name}.png`) we would not know which file is being loading until the code is executed. It could be loading many different files from the same line (if name variable changes) so it's not something that can be handled by modifying the code before running it. We would have to change how the code runs. It might be possible if we can create a p5 plugin that modifies the behavior of loadImage (and related functions) to handle resolving the URL at runtime. Then we would run your code with that plugin.

[tansanDOTeth]

This happens before the code is run.

Why not do that on run time? your loadImage function can support that type of logic and you could just let JS evaluate the string and just modify the arguments passed in.

[davepagurek]

Btw should this issue be reopened? I noticed the PR that closed it got reverted

[raclim]

Yes! Sorry that was one me! Just reopened it!

[davepagurek]

Thanks! I was just checking because I thought someone on Discord was encountering this bug, but it turned out it was another bug. I haven't looked at the implementation of any of this in a while, but in case it's helpful, this code actually did work for them:

for(let i = 0; i < bgNo; i++) {
  bgImages.push(loadImage(`assets/background_${i+1}.JPG`)); 
}