Processing.js/HowTo

PJS Preloading directive

Because of asynchronous loading in the browser, images used in sketches for processing.js should be preloaded using the @PJS directive at the top line of the sketch. The PJS preloading directive forces the sketch to load specified images ahead of time before the sketch begins to run.

Not using the preloading functionality will cause the sketch to continue running after a loadImage() or requestImage() call and if you specify actions to happen on the images you will get unpredictable behavior if the image data isn’t fully loaded yet.

The alternative to preload caching is to put any image manipulation code inside the draw() loop and use checks to make sure the width and height are larger than 0 before manipulating pixels. This will cause frames to skip and pixel manipulation to happen only after an image has fully loaded.

Sample code loading one image

   /* @PJS preload=”image.jpg”; */

loading multiple images

   /* @PJS preload=”sun.jpg,moon.jpg,stars.jpg”; */

loading an image from a remote location

   /* @PJS preload=”http://www.urltoimage.com/image.jpg”; */

loadImage() example

   Pimage x = loadImage(“sun.jpg”);

x will contain the preloaded image: sun.jpg.

requestImage() example

   Pimage y = requestImage(“moon.jpg”);

y will contain the preloaded image: moon.jpg.