Processingjs - PImage error when using in JS mode - trying to load images in JS mode

Question

I'm using the following code listed in the processingjs docs to load an image onto the canvas. Because I'm using this in JS mode, I'm prefixing the Processingjs code with Processing object, e.i. the "processing."

/* @pjs preload="laDefense.jpg"; */
processing.PImage b;
b = processing.loadImage("laDefense.jpg");
processing.image(b, 0, 0);

When I use this code, I get the following error: "Uncaught SyntaxError: Unexpected identifier"

The Processingjs docs reference the following snippet for loadImage() (http://processingjs.org/reference/loadImage_/):

// @pjs preload must be used to preload the image 
/* @pjs preload="laDefense.jpg"; */
PImage b;
b = loadImage("laDefense.jpg");
image(b, 0, 0);

Does anyone know why I get this error?

I tried using the second listed snippet in the standard mode--in a .pde file, and it worked fine.

Answer 1

I am not understanding the purpose of prefixing with processing.. Typically straight processing style code is loaded via a .pde file or embedded in a html page. When you use the javascript mode in the processing ide, the former is being done for you. There is no need to add processing..

If you removed your prefixes, such as in the 2nd example, everything should work correctly in either the standard/java mode in processing or the javascript/processing.js mode.

The only things that you cannot use in processing.js are java specific calls and libraries. You can, however, mix and match javascript in your .pde file using processing.js which is common practice. You can also access the processing "sketch" from javascript, for example, to pass data from javascript/ajax/jquery/etc. You can find more inforamtion on this at Pomax's Guide to Processing.js or on the Processing.js website.

Answer 2

Following tutorials on Processingjs website, like Pomax's Processing Tutorials. You'll find out how to deal with PImage. PImage have some requirement before its ready to run() so a basic tip is make sure that the image of you are working with its equal in dimensions than the size(width, height) of your .pjs doc (must be). Maybe the processing.js and the browser will be able to launch the pjs sketch if the size is greater than the size of the image what ur working with.

<h>Pjs is just fine</h>
<pre class="code"><code class="Javascript code">
   /* @pjs preload="image.jpg"; */
   size(400,500); //must be the same as the image you are using
   PImage b;
   b = loadImage("image.jpg");
   background(b);
   int x,y;
   void setup(){}
   void draw(){}
</code></pre>
<canvas datasrc="sketch.pjs"></canvas>

Another tip, use datasrc="". Your images directory can be in another place else.

Answer 3

Hei. I've got the solution.

I was reading your example and everything of the sencond one its ok. Even I tryed your code and It didnt work til I puted the picture inside a file called 'data' and then... Magic it works. Overall the file it has to be called 'data' and be also on the same file than the skech. I hope this information helps you¡