Displaying images in processing.js

Recently, I started a little on the side project, and I’ll have more to say about that in another post in a few days, but I was having problems displaying images using processing.js.

Processing.js is a JavaScript port of the original processing.

Loading images in p5 is as simple as:

PImage b;
b = loadImage("laDefense.jpg");
image(b, 0, 0);

This is simple enough, but if you want to run it in a browser, using processing.js, you have to do two things.

1. You need to set your browser’s security.fileuri.strict_origin_policy to false. Use at own risk, as I’m not sure o the security side effects this will have for browsing the web. I’m just setting this and using it locally. You can do this, in Firefox by typing about:config into your address bar, and in the filter bar, type “security” then look for “security.fileuri.strict_origin_policy”. double click it, you should see it set to false. No need to restart, it’s ready to go now.Same process to revert it back. This is not needed if you are viewing the page remotely, only needed for developmental local testing.

2. And this is where pjs and p5 differ. You need to include the preloading tag, and this is where I got snagged and noticed that this was not documented well enough. In the case of the above example, you would need to include:

/* @pjs preload="laDefense.jpg";*/

That’s the short story, the slightly longer, but still pretty short story is, I was able to get it work without that tag, and when I went to grab a section of the image into another, smaller image, using get() it failed. Preloading was needed for this. Oddly enough, displaying an alert() inside the processing.js source code made it work without the preload as well. I think what was happening is the alert stalled it enough, giving the image enough time to fully load, so by the time I hit close on the alert, my image was ready to go.


8 Responses to “Displaying images in processing.js”

  1. […] font. Luckily processing.js, the library I am making this for has a preloading directive (mentioned here) already created, I just have to plug into it. Now that I know what font I will be using, I have to […]

    • hey I have followed all the steps that you told but still unable to load images on web page. I ma running a .pde file through html and in that pde file i have done some processing on images. Just a black box is appearing on webpage.

  2. Hi Vai.

    I would need to see your code to figure out what is wrong.

  3. HI, the same thing is happening to me, Just a black box is appearing on webpage. how do ia relate the images from the data folder?, i’m ussing dreamweaver, thanks.

  4. Hi, I’m studying Processing at Queensland University of Technology and I cannot get the image to appear in a browser also, even after including the /* @pjs preload=”Shaunsimage.jpg”;*/ AND turning off the security setting you suggested. Mine has audio files in the data folder as well, does this matter?

  5. This post is old, and when I made it there wasn’t very good docs on loading images.

    Those docs exist now. This link will show you far more than I can tell you: http://processingjs.org/reference/pjs%20directive

  6. But if you show me code that is not doing what you expect it to do, I will help you find out why, then fix it 🙂

  7. Hey everyone,

    If you don’t want to chenge the code the image files need to be in the SAME folder as the .pde-file. Processing.js doesn’t parse the data directory as regular Processing does.

    Good luck!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: