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.
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.