Having some issues with processing JS image preloader

nutHarp · October 2016

Hey guys,

I'm having some frustrations with images (jpg/gif) in processing.js: I can't get any images to load unless my html file is INSIDE the project folder of my processing sketch. I'd prefer to have the sketch's html file in my website's root folder (along with home.html, 404.html, etc) and have my processing sketch folder side by side with it in the root as well. In the following sketch, that is the file setup I was using, but the image simply wont load. I'm pretty sure the preloader address is correct because if I change anything about it, I get a null pointer and the sketch crashes in my browser:

/*@pjs preload = "testimages/redSquare.jpg"; */

PImage one;

void setup(){

  size(600,600);
  background(0);
  one = loadImage("redSquare.jpg");
}

void draw(){

  image(one,0,0);

}

the html file is simply:

<html>
<head>
<script src="processing.js"></script>
</head>
<body>
<canvas data-processing-sources="testimages/testimages.pde">
</body>
</html>

Now, if I take the html file and place it INSIDE the sketch folder "testimages", change the preloader to simply /* @pjs preload = "redSquare.jpg"; */, and change the addresses in the script and canvas elements in the html file, then it works just fine. This is not ideal because I have the html file open in an editor and if I ever 'save as' in the processing IDE (which I do alot), it copies the html file for my sketch to a new folder and outdates the html file I have open. Like if I'm on testimages14 and I save as testimages15, the html file that I need now resides in the folder for testimage15, meaning I have to close the one I have open in notepad++ and open the new copy. It's a hassle and this seems like an extremely basic problem so hopefully someone can help me out,

thanks!

GoToLoop · October 2016

one = loadImage("redSquare.jpg"); -> one = loadImage("testimages/redSquare.jpg");

Howdy, Stranger!

Categories

In this Discussion

Having some issues with processing JS image preloader

Answers