Fix #212: Support dynamic paths in loadImage

[lindapaiste]

Fixes #212
Fixes #2257

Changes:

• Monkey-patch various p5 load___ methods to modify the path argument at runtime.
• Store the relevant file data (remote files and folder structure) to window.files so that resolvePathToFile can be executed at runtime.

Notes:

• The array of patched functions probably needs to be expanded to include methods added by various packages, like loadSound.
• I only really tested this with loadImage. Here's the code I used:

let staticImg;
let dynamicImg;
let images = {};
let theme = 'dark';

function preload() {
  ['dark', 'light', 'contrast'].forEach((theme) => {
    images[theme] = loadImage(`/images/console-debug-${theme}.svg`);
  });
  staticImg = loadImage('images/console-debug-contrast.svg');
  dynamicImg = loadImage(`/images/console-debug-${theme}.svg`);
}

function setup() {
  createCanvas(400, 600);
}

function draw() {
  background(220);
  image(images.dark, 0, 0);
  image(images.light, 200, 0);
  image(images.contrast, 0, 200);
  image(staticImg, 0, 400);
  image(dynamicImg, 200, 400);
}

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[raclim]

Thanks for your work on this!

[raclim]

Sorry! I might actually revert this for now because I noticed I get some errors (attached as image for reference) when I tried to load the 3D: Shader as a Texture example.

Down to have this reopened and merged again!

[davepagurek]

It looks like maybe the only issue here was that for most of those load* methods, the path is just the first arg, but for loadShader, the first two arguments are paths. This same approach could maybe still work if we add a special case for that method?