Directory of Images Associated With Project

[hbtousa]

I need to load,one at the time, lots of images that are sitting at my desktop. A single picture can be displayed by using :
function setup() {
createCanvas(576, 720);
img = createImg(‘image3.jpg’);
img.hide();
}
I am using the p5js web editor I am not sure if this editor has the tools to accomplish that. I tried to load all my images using the load images feature but I was able to load only 24 of them.
If my pictures are located at C:\Users\Owner\Desktop\Images, How do I associate the directory of images located on my desktop folder within my p5js project?
I tried a loop to read the images sequentially and I gave a path to my variable with no luck. Then, I tried the line below but It did not work.
img = createImg(“C:\Users\Owner\Desktop\Images”+ image+index.jpg

Can you please point me in the right direction?

Thanks

[Tiemen]

Did you consider setting up your own local host and run things locally from your computer? It might save you some trouble if the Web Editor isn’t entirely suited for your situation:

How to get preview in a separate window

I don’t believe you can separate the windows when you’re using Web Editor. What you could do however, although it’s a little bit of extra work, is setting up your own local server and run your p5 sketch locally from your computer (so instead of doing everything via the Web Editor). This requires the following steps: Make sure you have a text editor, such as Sublime Text for Mac. Make a folder on your computer with the files index.html, style.css, and sketch.js. You can copy-paste the conte…

And could you clarify what you mean by ‘load, one at the time’? Should all the images load one by one before your sketch runs, or should it load a new image once you interact with the sketch?

EDIT
Keep forgetting that the Processing environment can run p5 sketches. The solution below by @jeremydouglass might be be easier than my suggestion

[jeremydouglass]

@hbtousa

I need to load,one at the time, lots of images that are sitting at my desktop.
[…]
I am using the p5js web editor I am not sure if this editor has the tools to accomplish that.

That won’t work. It can’t access your desktop / local filesystem.

For LOTS of images that live on your computer I would suggest using PDE (install from processing.org), click on “Java” and change to “p5.js” mode, and create a sketch with p5.js mode on your Desktop or in your Processing sketchbook folder. Then you can save the sketch on your computer, add the folder of images to the sketch, and load as many as you like.

If you want the images to live online and they aren’t private then you could upload them to a public webserver and load them from your editor.p5js.org sketch by their URLs.

[hbtousa]

Should all the images load one by one before your sketch runs, or should it load a new image once you interact with the sketch?

The second approach fits my needs.
I will check your edited note as well.

Thanks

[hbtousa]

I will give a try to your suggestion. Everything is located on my PC and pictures won’t be live.

Thanks very much.

[hbtousa]

I set up a local server with google app and everything worked as suggested and I appreciated the inputs given.

Thanks very much