Open main menu

CDOT Wiki β

Changes

Processing.js/HowTo

1,136 bytes added, 20:43, 24 October 2010
Review changes from humph
==Getting Started With Processing==
* [[Introduction | Introduction]]
** [[What_is_Processing.js | What is Processing.js?]]
** [[What can you do with Processing.js | What can you do with Processing.js?]]
** [[Technology behind Processing.js]]
* [[Processing.js/Basic_Requirements | Basic Requirements]]
** [[Processing.js/Browsers_Supported | Browsers supported]]
** [[Processing.js/Operating_Systems_Supported | Operating Systems supported]]
** [[Processing.js/Network_Requirements | Network requirements]]
* Usage Basics
** Download, Installation and Configuration
** What is a sketch?
*** Loading a sketch from external file
** Simple drawing tutorial
//getting started info goes here==Processing.js Preloading directive==
==PJS Preloading 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.
Because of asynchronous loading in the browser, images used in sketches for processing.js should be preloaded Not using the @PJS directive at the top line of the sketch. The PJS preloading directive forces functionality will cause the sketch to load specified continue running after a loadImage() or requestImage() call, and if you specify actions to happen on the images ahead of time before you will get unpredictable behavior if the sketch begins to runimage data isn’t fully loaded yet.
Not using the The alternative to preloading functionality will cause is to put any image manipulation code inside the sketch to continue running after a loadImagedraw() or requestImage() call loop and if you specify actions use checks to happen on make sure the images you width and height are larger than 0 before manipulating pixels. This will get unpredictable behavior if the cause frames to skip and pixel manipulation to happen only after an image data isn’t has fully loaded yet.
The alternative to preload caching '''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 put any image manipulation code inside load in the drawbrowser, both loadImage() loop and use checks to make sure requestImage() function the width and height are larger than 0 before manipulating pixelssame way in processing.js. This will cause frames Processing's JAVA implementation allows loadImage() to skip block sketch execution while an image loads and pixel manipulation requestImage() is used to happen only after an image has fully loadedpreload images ahead of time.
Sample code
loading one image
/* @PJS pjs preload=”image.jpg”; */
loading multiple images
/* @PJS 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 pjs preload=”http://www.urltoimage.com/image.jpg”; */
loadImage() example