Preload images when needed in Processing.js

Arnaldex

Preload images when needed in Processing.js

in Processing with Other Languages • 1 year ago

Hi, I need a way to load/cache images just when they are needed. My problem:
I can preload a few images with @pjs preload="...", the common ones for the app, but I have more than 100 images 1500x1500 in size and these are loaded according to user interact. As you can see, I just can't preload that amount of images.
So, if I use loadImage(<path>) the image may not be ready to use and the sketch get missing parts 'till the image is ready; like using "copy" this must be ready in order to get correct result.

Any idea how to implement a "load" screen and actually know when all images are completely loaded/ready? Would be great a synchronous image loader method but everywhere says it is not possible in processing.js

Thanks in advance.

Replies(4)

Kobby

Re: Preload images when needed in Processing.js

1 year ago

not sure how the @pjs preload works, but I'm wondering if loading the Images like JS preload style will give you access to that image in pjs. If you havent already this would be worth a try:

for(var i = 0; i<100; i++){
var img = new Image();
img.src = "Image_"+namingConvention+".jpg"//or whatever
}
//or put them in an array
var imgs = new Array();
for(var i = 0; i< 100; i++){
var img = new Image();
img.src = "Image_"+namingConvention+".jpg"//or whatever
imgs.push(img);
}

I'm not sure if this will work. A quick google search didnt give me anything I'mb i'm wondering if pjs will recognize the images loaded into regular JS image objects?? Worth a shot.

Arnaldex

Re: Re: Preload images when needed in Processing.js

1 year ago

Thanks man. Right now I got something like this but only for the images needed at "this" point, plus "img.onload = ...;" with a callback to check if the image is loaded and calculate and display a sort of "loading" bar.

pepito66

Re: Preload images when needed in Processing.js

1 year ago

I got a work arround for this, it works, but is not elegant, goes like this:

MyObj myobj;
void setup(){
....
myobj = new MyObj();
}
//.....
void draw(){
if (myobj.is_img_loaded()){
image(myobj.img, x, y);
}
else {
do_something_else();
}
}
//........
class MyObj {
PImage img;
boolean img_loaded = false;
//....
MyObj(){
img = new PImage(0,0);
img = LoadImage("path_to_img");
}
//....
boolean is_img_loaded(){
if (image_loaded){
return true;
}
else if (img.width > 0) {
// image loaded
img_loaded = true;
post_load_img();
return true; // edited
}
else { return false; }
}
//....
void post_load_img() {
if (img_loaded) {
img.resize(...);
}
}
}

This is pseudo code explainig the method, the thing is, first create a PImage objet with width=0 and height=0, then use LoadImage in the same object. when the image is loaded it will return a width attribute > 0 at this point the image is loaded and you can apply other methods.

Hope this helps. and if you try it, let me know if it worked for you.

Arnaldex

Re: Re: Preload images when needed in Processing.js

1 year ago

I'll check this approach, although I'm working with Proccesing.js just for rendering (I'm using proccesing instances), most of the code is javascript. Thanks!
P.S.: Buen nick, pepito jaja.

Top Reply