Using Processing's loadImage in JavaScript

Question

I am using the Processing API to draw an image to my HTML canvas, which I can use later in the code. The JavaScript code that I have is:

var sketchProc = function(processingInstance) {
  with (processingInstance) {

    /* @pjs preload="images/hot-air.png" */

    size(innerWidth, innerHeight);
    var testImage = loadImage("images/hot-air.png");

    draw = function() {
      image(testImage, 0, 0, 500, 500);
    }
  }
}

var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, sketchProc);

The console says that the image has dimensions 0x0. I tried loading with Processing's directives, but I am still getting an image dimensions of 0x0. However, when I call loadImage() inside the draw loop, the program recognizes the image's dimensions of 512x512.

I do not want to continuously call loadImage() inside the draw loop. What should I do to make sure that the image loads properly outside the draw loop?

You can find a minimal working example here.

Your code snippet is not correctly formatted, and it shows an error when I try to run it. Please fix the code snippet to properly include Processing.js, or just post it as text instead of as a runnable snippet. — Kevin Workman, Dec 22 '17 at 18:28

Kevin Workman · Accepted Answer · 2017-12-22T21:29:29.080

1

First off, thanks for posting an MCVE for us to play with.

I believe the problem is that, for some reason, the preload directive, and maybe the loadImage() function itself, doesn't work when you're writing JavaScript-only Processing.js code. I've tested this in various editors and versions of Processing.js.

So it appears that to use the loadImage() function, you should use pure Processing code. Here is a CodePen that shows how you'd do that:

<script type="application/processing">
    /* @pjs preload="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; */
    PImage testImage;

    void setup(){
      size(500, 500);
      testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
      println(testImage.height);
    }

    void draw() {
      background(100);
      image(testImage, 0, 0, 250, 250);
    }
</script>
<canvas> </canvas>

Just for comparison, here is the same code using JavaScript-only syntax. This doesn't work.

But taking a step back: if you're comfortable using JavaScript, then why are you using Processing.js? Processing.js is designed for Processing (Java) developers who want to write Java syntax that's automagically converted to JavaScript. At this point Processing.js is pretty old and no longer maintained.

Instead, I'd recommend using P5.js. P5.js allows you to write JavaScript syntax to create web-first Processing sketches. P5.js is much newer and is still being actively developed.

Here is the same code in P5.js:

var testImage;

function preload(){
  testImage =  loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
}

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(100);
  image(testImage, 0, 0, 250, 250);
}

Shameless self-promotion: I wrote a tutorial on the differences between Processing, Processing.js, and P5.js available here.

edited Dec 22 '17 at 21:29

answered Dec 22 '17 at 18:15

Kevin Workman

41,537
9
68
107

@DanielHong Please post a [mcve] showing exactly what you tried with the preload command so we can copy and paste it to run it ourselves. – Kevin Workman Dec 22 '17 at 18:37
Where should I put the preload command? I tried putting it inside the "with" block and didn't get anything. I am suspecting that what the documentation suggests only works in the Processing Sketchbook. – Daniel Hong Dec 22 '17 at 18:40
@DanielHong It definitely works in the browser as well. My guess is that it's a symptom of how you're wrapping your sketch code in a function. If you have a CodePen or JSFiddle, I'd be happy to play with it. – Kevin Workman Dec 22 '17 at 18:46
Thank you for your willingness to help! I will see what I can do. Are you okay if I put my entire project up or would you prefer a minimal working example? – Daniel Hong Dec 22 '17 at 18:54
@DanielHong If at all possible, you should try to put together a **minimal** example that shows the behavior you're seeing in as few lines as possible. But the example should be complete enough that it shows the problem. – Kevin Workman Dec 22 '17 at 18:57
I will post my code somewhere public and link you and other visitors to it once I do so. – Daniel Hong Dec 22 '17 at 18:59
You can find an MWE at https://repl.it/@DanielHong/Testing-ProcessingJS. I will put that in the original post too so that other visitors can see it. – Daniel Hong Dec 22 '17 at 19:25
I really like your solution. I prefer writing pure Processing code, so I will use your solution. I wrote JavaScript because I felt that it would be more web-compatible. I really appreciate your time in looking into this. – Daniel Hong Dec 22 '17 at 21:24
1

@DanielHong Shameless self-promotion: I wrote a tutorial on the differences between Processing, Processing.js, and P5.js available [here](http://happycoding.io/tutorials/p5js/which-processing). – Kevin Workman Dec 22 '17 at 21:29

Using Processing's loadImage in JavaScript

1 Answers1

Linked