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:
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?
i want to run in online so i am using the p5 web editor right now.
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 = ;
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
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.
Here’s a sketch that loads a “.csv” file w/ image filenames in it before loading them all:
still a workaround but easier than what i did so far !
Thanks for the tip