Drag and drop files and folders "inside" the sketch in real time

One of the most sought after requirements always during the year is the real-time customization of skeches. A library that allows you to do this is drop: http://transfluxus.github.io/drop/

With this library, we can drag a file (e.g. an image) or an entire folder to upload their files (in order, or selectively—just customize the algorithm) "inside" our real-time processing sketch.

I saw this the first time in use by Filipe, in an application we used at the Summer Academy that we did in the AU. Works surprisingly well. And, used correctly, allows you to customize the skins of our applications. That is, loading settings (preconfigured variable values, e.g.) from a .txt file (with the associated loadStrings(). Or, as I suggested to one of the groups this year, upload a skin to the application. As if it were visual themes.

Here's a quick example commented on. For this example, I assume that in the folder "date" there is a set of folders "set_1", "set_2", … always with the same internal folder structure/files of "/img/cat.png" and "img/dog.png", etc… and "snd/cat.wav", "snd/dog.wav", etc.

Just drag any "set_x" folder up of the Processing sketch that it loads in real time and modifies all assets: images, fonts, texts, videos, sounds, texts, etc…

PAmado, 2020-05-18: From the DropFilesAndFolders and DropBasics sample provided in the library

Import library (use Sketch > Import Library > Add Library... First
import drop.*;

declare object "drag&drop"
SDrop drop;

variable to store the root folder value of our theme
String folderString = "";

the folder structure is always identical > the files have the same name (as a normal skin)
set_1/
img/img/
cat.png
chicken.png
dog.png
snd/
cat.wav
chicken.wav
dog.wav
set_2/
img/img/
cat.png
chicken.png
dog.png
snd/
cat.wav
chicken.wav
dog.wav

images to customize
PImage one, two, three;

void setup() {
  size (1200, 400);
  drop = new SDrop(this);   boot library

  if (folderString != "") { // we can pass an initial parameter, or not, to have default values
    loadFolder (folderString);
  }
}

void draw() {
  background(120);

  fill(255);

  text("listing files from: "+folderString, 10, 40);

  if a folder has already been loaded in the program, load the custom images
  if (folderString != "") {
    image(one, 10, 80);
    image(two, 250, 80);
    image(three, 400, 80);
  }
}


"Custom" images loading function

void loadFolder (String fs) {
  loading activity : images from the drop folder

  one = loadImage(fs+"/img/cat.png");        attention to the internal structure /file names in the folder: they should always be the same
  println("loaded one: "+fs+"/img/cat.png");

  two = loadImage(fs+"/img/chicken.png");
  println ("loaded two: "+fs+"/img/chicken.png");

  three = loadImage(fs+"/img/dog.png");
  println("loaded three: "+fs+"/img/dog.png");
}

event called by the library when "dropping" an object (file or folder) in the sketch
void dropEvent (DropEvent) {
  
  if (theDropEvent.file().isDirectory()) { // checks whether the "drop" matches a folder
    folderString = theDropEvent.toString();    reads the folder path and loads the string
    println("folder: "+folderString);

    loadFolder (folderString);                  calls function to load images
  }

}