Importing a list of image URLs with createinput() and/or csv file? 📦

[jwyg]

Hello everyone!

This is my first post on the p5.js forum. I’m excited to join this community and look forward to learning more about what you’re all doing and seeing how I am able to contribute.

I’m currently prototyping “Image Explorer” , a P5 based set of tools for the visual exploration of image collections. You can find the code, background and other relevant materials (including code snippets in the P5 web editor for ease of testing/duplication) here: https://jwyg.github.io/image-explorer/

In the sketches I’ve created so far images are provided by URLs in the function preload() section of the sketch.js file. See here for an example.

But I’d like to enable users to input a set of image URLs, for example through copying and pasting into a text box or by uploading/pointing to a CSV file containing the URLs in a pre-specified format. I’ve created a GitHub issue with more detail on the desired behaviour here.

I had a quick go at using loadtable() to import data from a CSV file, but seemed to run into issues with parsing and displaying the images. I’m currently leaning towards trying with a text box instead. Would createInput() be a good place to start for this?

I’d love to hear about others’ experiences in doing similar things, what worked and any advice or suggestions you might have. Code examples and tips would be very warmly welcomed!

Hope you all and your loved ones are all doing okay and look forward to following further discussions.

Jonathan

[GoToLoop]

@jwyg

Code examples and tips would be very warmly welcomed!

I’ve got this old sketch which loads a CSV file containing image URLs: