Skip to content

load image URLs do not work with interpolation ticks #2257

Open
@tansanDOTeth

Description

@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

Activity

welcome

welcome commented on Jun 21, 2023

@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

lindapaiste commented on Jun 21, 2023

@lindapaiste
Collaborator

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

tansanDOTeth commented on Jun 22, 2023

@tansanDOTeth
Author

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

davepagurek commented on May 8, 2024

@davepagurek
Contributor

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

raclim

raclim commented on May 8, 2024

@raclim
Collaborator

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

reopened this on May 8, 2024
davepagurek

davepagurek commented on May 8, 2024

@davepagurek
Contributor

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`)); 
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugError or unexpected behaviorsFeature RequestProposal for adding a new functionality

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @davepagurek@lindapaiste@raclim@tansanDOTeth

      Issue actions

        load image URLs do not work with interpolation ticks · Issue #2257 · processing/p5.js-web-editor