# Directory of Images Associated With Project

**URL:** <https://discourse.processing.org/t/directory-of-images-associated-with-project/13529>\
**Category:** Beginners\
**Created:** [August 21, 2019, 6:09pm UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529 "2019-08-21T18:09:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbtousa](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hbtousa](https://discourse.processing.org/u/hbtousa)\
**Post date:** [August 21, 2019, 6:09pm UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529/1 "2019-08-21T18:09:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [August 21, 2019, 8:20pm UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529/2 "2019-08-21T20:20:49Z")

</div>

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](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924/11):
>
> 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](https://www.sublimetext.com/3) 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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 21, 2019, 8:29pm UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529/3 "2019-08-21T20:29:31Z")

</div>

> [@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](http://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](http://editor.p5js.org) sketch by their URLs.

---

<div class="post-metadata">

**Author:** ![hbtousa](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hbtousa](https://discourse.processing.org/u/hbtousa)\
**Post date:** [August 22, 2019, 5:44pm UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529/5 "2019-08-22T17:44:13Z")

</div>

> 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

---

<div class="post-metadata">

**Author:** ![hbtousa](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hbtousa](https://discourse.processing.org/u/hbtousa)\
**Post date:** [August 22, 2019, 5:51pm UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529/6 "2019-08-22T17:51:07Z")

</div>

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

Thanks very much.

---

<div class="post-metadata">

**Author:** ![hbtousa](https://avatars.discourse-cdn.com/v4/letter/h/8e7dd6/32.png) [@hbtousa](https://discourse.processing.org/u/hbtousa)\
**Post date:** [September 7, 2019, 2:07am UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529/7 "2019-09-07T02:07:41Z")

</div>

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

Thanks very much

![Forum](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d6a85d766349894752015bcc49084e6cc4d5ba77.png)