Image Array from non-sequential image names

p5.js Coding Questions
#1

Hi all,
I’m hoping I have a simple question - I’m trying to populate an image array from a folder where images are stored but will not have sequential naming schemes (the folder is populated by a PHP uploader with a handful of different problems).

I’ve been checking around with no luck - is there a simple way to have P5 populate an array with all of the image files so I may begin to work with them?

(Sample code with what I think I’m trying to do - this code does nothing.)

let allimages = [];
let names;


function setup() {
  createCanvas(windowWidth,windowHeight);
  for (let i = 0; i<10; i++){
allimages[i] = loadImage('folderURL/${names}.jpg');
}}

function draw() {
  background(220);
  image(allimages[0],0,0);

}

Thanks so much for any assistance or clever workarounds!

#2

Welcome to the forums!

Unfortunately, you have to know the names of the files ur gonna use, before hand. Whether you’re serving your p5 code in a <script> header, or separately as a .js file, when your page gets served to the client, it has no ‘concept’ of where it came from (compared to, say, a Python script that ‘knows’ where it resides, BECAUSE its being run on the local maching)

You might be testing your p5 in localhost, but, for very good security reasons, an html page is more like a set of instructions telling the browser what to load.

Long story short…if you don’t know your image names before-hand, the HTML page can’t bring them over to the browser.

(This IS possible in Java however, one of the few differences between P5 and Java Processing)

3 Likes
#3

As @tony points out you need to know filenames. I suppose your PHP uploader knows those names and could write them to a file. File with a known name that can be used and accessed in p5 code.

3 Likes
#4

Thanks! That’s exactly what I ended up working on - I appreciate it!

1 Like
#5

You saved me hours of bumbling around! Thank you!

1 Like