processing.js, imágenes y SVGs

[pase el mouse sobre el señor dramatic chipmunk]

(descargar código)


¿Cómo relacionar imágenes en un sketch de processing cuando lo subimos a internet traducido a processing.js?

Cuando subimos un sketch a nuestro directorio para subirlo a internet como les mostré en esta entrada pasada tenemos un problema, y es que las rutas a las imágenes o svgs que enlazamos en la carpeta “data” como normalmente lo haríamos ya no funcionan.

Es decir, así llamo normalmente los svgs de mi señor dramatic chipmunk en el sketch de processing que corro en mi computador:

bicho = loadShape("dramatic1.svg");
ojoizq = loadShape("ojoizq.svg");
ojoder = loadShape("ojoder.svg");
brillo = loadShape("brillo.svg");

Pero cuando subamos el archivo a la web, pues tendremos que reemplazar las rutas de estos archivos por las rutas en nuestro directorio del sitio web:

bicho = loadShape("/code/dramatic_chipmunk/data/dramatic1.svg");
ojoizq = loadShape("/code/dramatic_chipmunk/data/ojoizq.svg");
ojoder = loadShape("/code/dramatic_chipmunk/data/ojoder.svg");
brillo = loadShape("/code/dramatic_chipmunk/data/brillo.svg");

Espero que les sirva!