Preload images in Processing.js when used as graphics library

Arnaldex

Preload images in Processing.js when used as graphics library

in Processing with Other Languages • 1 year ago

Hi!

I decided to work with Processing.js as graphic library (just for render) as described by Pomax here http://processingjs.org/articles/PomaxGuide.html#graphic

I just can't find the way to implement the @preload directives with instances of Processing.js

I'm thinking this is something tricky, because I found, for instance, you need to write "p.__frameRate" to print the frame rate instead of just "p.frameRate" ("p" is a processing instance)

Thanks.

Replies(2)

Makio135

Re: Preload images in Processing.js when used as graphics library

1 year ago

Hello,

Why don't you write your Processing code directly inside the pde or in-line?

Have you considered adding a script type application/processing with only your pjs directives:

<script type="application/processing" target="mysketch"> /*@pjs preload="image1.jpg";*/
</script>

You can also consider using the PImage img=requestImage("image.jpg") function with a boolean if you want to preload all your images before running:

boolean preload =false;

void draw(){

if(!preload){

boolean loading=false; //does it still loads

for (int i=0; i<nbImgs; i++){

if(img.width<=0){ //img.width=0 if not loaded or -1 if can't load

loading=true;//still loading

}

if(!loading) preload=true; // loading is finished

}

for (int i=0; i<nbImgs; i++){

image(imgs[i], x, y);

}

And you should probably move the post to the Processing implementations section.

http://makio.free.fr

Arnaldex

Re: Re: Preload images in Processing.js when used as graphics library

1 year ago

Hi Makio,

I didn't try the <script type="application/processing" ... thing. I'll try that for sure, looks good to me.

Regarding requestImage and your snippet, I'm looking for preload to avoid doing that kind of checks of image status.

Thank you so much man.

Top Reply