Image Preload Directive Wont' Work

duffield · November 2013

Hey all,

I'm new to Processing.js but fairly confident with Processing Java and I feel that this is so basic that it's embarrassing to post, but here it is. I'm trying to just do a simple test where I can load my image in the browser. Works fine in Java, doesn't work in a browser (I just get a blank page). In JS if I just draw primitive shapes, etc, they work fine, once I get into images, it goes to the craps. I looked at the references, Googled around, even tried other people's examples just replacing it with my image, nothing works.

I tried multiple browsers (Firefox, Chrome, Safari), tried it locally, and even tried uploading it to my server to see if it would fix it, no luck. Interestingly (or annoyingly?) I sent it to a colleague on a Mac whom it works for (in Chrome). I sent it to another colleague on a PC and it doesn't work. Any ideas as to what might be causing this?

I'm on OSX 10.8.5.

Processing Sketch:

// @pjs preload must be used to preload the image so that it will be available when used in the sketch  
/* @pjs preload="glitch.png"; */

PImage photo;

void setup() {
  size(300, 300);
  noFill();
  photo = loadImage("glitch.png");
}

void draw() {
  background(220);
  imageMode(CENTER);

  image(photo, mouseX, mouseY, 100, 100);

  /*ellipseMode(CENTER);
  ellipse(mouseX, mouseY, 100, 100);*/
}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <script src="processing-1.4.1.min.js"></script>
    </head>
    <body> 
        <canvas data-processing-sources="circle/circle.pde"></canvas>
    </body>
</html>

Thanks in advance!

mbraendle · November 2013

Yes, ProcessingJS is a different beast.

It looks like the forum platform has garbled your preload statement, it should look like this:

/* @pjs preload="glitch.png" */

You can let Processing in JavaScript mode create the directives by using menu JavaScript > Playback Settings (Directives)

The image files must reside in the same directory where the .pde file is.

Safari and Firefox should be able to run the sketch.

Google Chrome and Internet Explorer will not work for sketches that are loaded locally from disk (but will do if the sketch is hosted on a web server), because of their strict cross-domain policies which disallow local->local loading for the .pde and data files such as XML or SVG (png, jpg, gif files load fine). See this article for explanation:

msdn.microsoft.com/en-us/library/ms537505(vs.85).aspx

The reason is that the central method in processing.js which loads all data, ajax() (starting at line 21 in processing.js), only implements the XMLHTTP method. For Internet Explorer, there would also be the workaround using the ActiveX and MSXML objects.

If one needs to be able to run the sketch locally on all browsers and platforms, the only way I have found so far is to precompile the .pde to .js using the ProcessingJS helper tool and processing-1.4.1-api.js, and for XML and SVG files to assign the XML as a string to a JavaScript variable, load them as .js file and parse them using XMLElement.parse().

GoToLoop · November 2013

Safari and Firefox should be able to run the sketch.

At least on old Opera 12, I was able to run scripts offline after diving deeper in its advanced configuration! :>

Firefox and its derivatives are indeed the best for offline web tests! >:/

Howdy, Stranger!

Categories

In this Discussion

Image Preload Directive Wont' Work

Answers