Preload image in JS, pass to processing sketch?

newmiracle

I'm trying to download/preload an image in my webpage's javascript. Once loaded, I want to send that image object to the processing.js sketch.

Following Pomax's guide, I can send strings to and from a webpage into the processing.js sketch. However, the wheels fall off when I use images. I'm trying to load an image from a URL, make sure it is loaded, then pass it into processing.

I've used onLoad functions, the "Try/Finally" approach, but it seems like I can't get the image fully loaded. The closest I can get to making this happen, my browser console will tell me that the img object isn't defined.

What I'm attempting: Javascript loads image from URL, confirms image loaded, passes image object into processing. Is there an authoritative approach to this? I've been looking up examples, and nothing seems to work.

GoToLoop

I still don't have much experience w/ JS yet! And I'm still studying Pomax's Guide:
http://processingjs.org/articles/PomaxGuide.html

Default procedure is use to use /* @pjs preload = ""; */ to preload resources before running the sketch:
http://processingjs.org/articles/p5QuickStart.html#synchronousIO

You can check out my only online example of that below:
http://studio.processingtogether.com/sp/pad/export/ro.9$MTikWt80-9w/rev.70

There's another alternative way that I've never seen any1 using it yet:
http://processingjs.org/reference/requestImage_/

Anyways, I believe having a separate ".js" file constantly checking whether requestImage() has completed the whole process,
can be feasible. Although much more complicated to pull out! (%)

newmiracle

Yeah I've been working through the Pomax guide, which was really helpful. Thats how I'm passing strings back and forth.

I was thinking of doing the "requestImage" approach, but I wanted to see if I could pass image objects instead.

I'm trying to dynamically load images from URLs, so I'm not using the preload method on these. And I can load images just fine straight from URLs, but now I'm trying to do some "extra" stuff before they get loaded. The delay is messing up some of my code.

I probably should be building a 'loading verified' type functionality that requestImage is talking about anyways. But I was curious to see how much I could offload to JS in order to keep the processing part as simple as possible. Thanks for the reply, though.