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.

JAMESSTONEco · Accepted Answer · 2012-10-13 20:16:04Z

2

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.

answered Oct 13, 2012 at 20:16

JAMESSTONEco

2,05115 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1646145 Over a year ago

I'm trying to access the properties and methods listed above(PImage, loadImage(), etc...). Thus it is required that I prefix them with the global object("processing"). This is a standard use of objects in JavaScript. There is an example of writing Processingjs code in JavaScript here: link Under "Writing Processing code with JavaScript" Still not sure why I'm receiving the error: "Uncaught SyntaxError: Unexpected identifier" Specifically on: "PImage b;"

JAMESSTONEco Over a year ago

@user1646145 I haven't seen processing.js used in this way, but if you check the examples (look at the 3d example) on that page you linked to, you must call processing.imageCache.add("laDefense.jpg"); before your loadImage("laDefense.jpg"); This replaces the comment style preloader, ie. /* @pjs preload="laDefense.jpg"; */

lucastonussi · Accepted Answer · 2013-02-21 02:31:09Z

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.

dani · Accepted Answer · 2014-01-22 17:52:16Z

0

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¡

answered Jan 22, 2014 at 17:52

dani

1

1 Comment

lintu Over a year ago

Hi Dani. I have a similiar issue. Could you please explain what solved your issue

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related