Difference between revisions of "Processing.js/HowTo"
(Review changes from humph) |
|||
| Line 16: | Line 16: | ||
** Simple drawing tutorial | ** Simple drawing tutorial | ||
| − | == | + | ==Processing.js 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 | + | 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 processing.js 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. | + | 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 | + | The alternative to preloading 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. |
| − | '''NOTE:''' Because of the way preloading is being used in | + | '''NOTE:''' Because of the way preloading is being used in processing.js, and the fact that you can't block the execution of a sketch while waiting for an image to load in the browser, both loadImage() and requestImage() function the same way in processing.js. Processing's JAVA implementation allows loadImage() to block sketch execution while an image loads and requestImage() is used to preload images ahead of time. |
Sample code | Sample code | ||
| Line 33: | Line 33: | ||
/* @pjs preload=”sun.jpg,moon.jpg,stars.jpg”; */ | /* @pjs preload=”sun.jpg,moon.jpg,stars.jpg”; */ | ||
| − | loading an image from a remote location | + | loading an image from a remote location. NOTE: remote images can be drawn, but their pixels cannot be manipulated due to browser security restrictions. |
/* @pjs preload=”http://www.urltoimage.com/image.jpg”; */ | /* @pjs preload=”http://www.urltoimage.com/image.jpg”; */ | ||
Latest revision as of 20:43, 24 October 2010
Getting Started With Processing
- Basic Requirements
- Usage Basics
- Download, Installation and Configuration
- What is a sketch?
- Loading a sketch from external file
- Simple drawing tutorial
Processing.js 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 processing.js 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 preloading 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.
NOTE: Because of the way preloading is being used in processing.js, and the fact that you can't block the execution of a sketch while waiting for an image to load in the browser, both loadImage() and requestImage() function the same way in processing.js. Processing's JAVA implementation allows loadImage() to block sketch execution while an image loads and requestImage() is used to preload images ahead of time.
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. NOTE: remote images can be drawn, but their pixels cannot be manipulated due to browser security restrictions.
/* @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.
