Using processing.js to load a sketch in a browser

hlettuc

Hi,

I'm using processing.min.js to display a sketch (made with Processing 2.2.1) within HTML (Squarespace, to be precise). We're trying to emulate the effect shown here: https://processing.org/examples/brightness.html. The sketch calls on a image from a URL, so I'm preloading it using the @pjs directive. The sketch works perfectly within Processing, and the image loads fine in the browser when I comment out the interactivity (I did this as a test using image(image_name,0,0), but putting the two together results in just a gray box (can be seen beneath the snake sketch at https://hailee-r.squarespace.com/test-1.. you may need to enter a CAPTCHA code, apologies!)

Here is the code from the PDE file:

/*PDE FILE--WORKS WITHIN PROCESSING
    /* @pjs preload="https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg"; */


PImage mummies;

void setup() {
  size(300 , 360);
  frameRate(30);
  mummies = loadImage("https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg");
  image(mummies,0,0,100,100);
  mummies.loadPixels();
  loadPixels();
  println("hola!");
}

void draw() {
  for (int x = 0; x < mummies.width; x++) {
  for (int y = 0; y < mummies.height; y++ ) {
  int loc = x + y*mummies.width;
  float r,g,b;

  r = red (mummies.pixels[loc]);

  float maxdist = 50;//dist(0,0,width,height);
  float d = dist(x, y, mouseX, mouseY);      
  float adjustbrightness = 255*(maxdist-d)/maxdist;
  r += adjustbrightness;
  r = constrain(r, 0, 255);
  color c = color(r);

  pixels[y*width + x] = c;
    }
  }
 updatePixels();
}

Here is the entirety of the code I put in the code block on the page:

    <script src="/s/processingmin.js"></script>
 <script type="application/processing" data-processing-target="pjs12">
/* @pjs preload="https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg"; */


PImage mummies;

void setup() {
  size(300 , 360);
  frameRate(30);
  mummies = loadImage("https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg");
  image(mummies,0,0,100,100);
  mummies.loadPixels();
  loadPixels();
  println("hola!");
}

void draw() {
  for (int x = 0; x < mummies.width; x++) {
  for (int y = 0; y < mummies.height; y++ ) {
  int loc = x + y*mummies.width;
  float r,g,b;

  r = red (mummies.pixels[loc]);

  float maxdist = 50;//dist(0,0,width,height);
  float d = dist(x, y, mouseX, mouseY);      
  float adjustbrightness = 255*(maxdist-d)/maxdist;
  r += adjustbrightness;
  r = constrain(r, 0, 255);
  color c = color(r);

  pixels[y*width + x] = c;
    }
  }
 updatePixels();
}
</script>
 <canvas id="pjs12"> </canvas>

Any help would be greatly appreciated!

GoToLoop

AFaIK, the only guaranteed way to loadImage() in Pjs, especially when pixels[] are needed, is placing the resource in a subfolder of the sketch.

hlettuc

Hi @GoToLoop,

Thanks for the info. Does that mean it is impossible to launch the page on a browser? Or should I be organizing the files within the site's media library in a way that a data-esque subfolder exists?

GoToLoop

You just need to have the loaded resources at the same folder or any subfolder where the ".html" + ".pde" file is.