P5.js-web-editor: loadImage and non-literal file names

[kjhollen]

A couple students in our class have seen an issue where they try to load a sequence of images but the paths don't resolve. For example they have images like:

folder/file-1.png
folder/file-2.png
folder/file-3.png

and want to use a for loop to load all the images in a folder, iterating over the numbers in the file name. I have a couple of examples that reproduce this:

http://alpha.editor.p5js.org/projects/rJtoro7Gg

http://alpha.editor.p5js.org/projects/r1f0wsmzg

They don't work in the web editor, but downloading the sketch and serving the files locally works as I'd expect (a grid of images is visible).

[lmccart]

here's an even simpler example. so it really seems to be a problem with constructing strings from variables.
http://alpha.editor.p5js.org/projects/rkGtQ3QMe

interesting!

[catarak]

Before the sketch is rendered, it's replacing all of the local file names with the remote url for the files on S3. Since the names aren't in the actual text of the JS file, it's not able to replace it. Maybe there's a way to resolve these file names at runtime, though I'm not sure how.

[catarak]

@yining1023 and I also encountered this issue when working on #203. A few of the sound examples, (e.g. this reverb example), don't use the literal file name, but will append an extension to the file name as an argument of loadSound based on the arguments of soundFormats.

I've been thinking about a general way to solve this, and I think, rather than swapping the literal file names in text with the S3 urls, the files need to be requested server-side and then served based on the URL that the preview is requesting, i.e. http(s)://alpha.editor.p5js.org/projects/<project_id>/<path_to_file>

[jay-manday]

Hi guys, I came across a similar issue while prepping for a class I'm teaching with p5.js. It seems the web editor cant load external image files from the web, I tried with both png and jpg's.

Access to Image at 'https://rlv.zcache.com/happy_smiley_face_with_sunglasses_sticker-rf1a85167493343bd9b1b4943541b5553_v9waf_8byvr_324.jpg' from origin 'http://alpha.editor.p5js.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://alpha.editor.p5js.org' is therefore not allowed access.

[catarak]

Thanks for reporting @JMandel1027! Though that may seem weird, your issue is a separate issue and it is actually expected behavior--for security reasons, the server at https://rlv.zcache.com would need to enable CORS for alpha.editor.p5js.org. Read more at https://github.com/processing/p5.js/issues/1557.

[hacback17]

If anyone has a problem related to "CORS" please follow this link: https://stackoverflow.com/a/6083677
It helped me.