Show folder content like Processing "File directory"

p5.js Coding Questions
1

Hi peoples :smile:

currently I’m working on an interactive slideshow in p5 which I previously built up in processing. It all works so far but I have some issues on making an easy way to load all the images. I have to say that I have around 50 Images/clips, with mixed named and mixed formats (jpeg, png, mov, gif) but they are all stored in an ‘image’ folder in my p5 sketch (web editor).

in my older processing sketch i just listed all the files as a file directory and load them automatically

File dir = new File(dataPath("images/"));

so thats not working in p5. now my question is:
how do i get access to the content of a folder as a whole? like to store the filenames in an array so that i can loop though the names to load them.

as an example, my sketch structure is like this:

sketch.js
index.html
style.css
images(folder)
        > abc.jpg
        > 123.jpg
        > xyz.jpg
        > 0000.jpg
        > ...

thank you :space_invader:

2

Is this sketch running locally on your machine out of PDE, or are you using the p5.js web editor or OpenProcessing to run it online?

3

i want to run in online so i am using the p5 web editor right now.

4

Have you uploaded these files to the web editor? Online javascript cannot access folders of files on your personal computer without a dialog – for security reasons. Otherwise every webpage that ran a script in your browser could browse your desktop for private stuff.

1 Like
5

yes, i uploaded them to my web editor sketch.
therefore i added a new folder (‘images’), and loaded them into it.

so right now i can load them into an array in my sketch by using

let myImage = [];
myImages.push(loadImage('/images/example.jpg'));

but as i have many files, i want to have a less costly way than typing all of them manually. especially because I want the folder to be flexible :slight_smile:

6

I believe (?) that JavaScript is a client-side language – it cannot search directories on the server for you, you would need to use AJAX for that.

If you have to upload these images anyway, one easy thing would be to upload a list of image file names as a separate txt file. Then you could load the image file list and loop over it. If you want to change the list, edit the text file – you don’t need to delete and re-upload images every time.

Alternately, you will need a server.

2 Likes
7

Here’s a sketch that loads a “.csv” file w/ image filenames in it before loading them all: :open_file_folder:

4 Likes
8

still a workaround but easier than what i did so far !
Thanks for the tip :black_heart: