possible problem with PImage pixel locations in sketches embedded in browsers

sodiumnitrate · May 2014

Hi, I have a sketch that I have embedded into an .html document by using a canvas and processing.js. The sketch renders perfectly fine when I hit play in processing. But when I embed it in a webpage, the circles that are drawn seem to be displaced, among other things. Here's a link to the webpage. The pixels generated are supposed to form a picture but they seem displaced somehow. A screenshot of the locally working code can be found here. I am guessing that there is something wrong with how the pixels are retrieved or adressed in img.pixels[];.

EDIT: It turns out that the resize() function was not working properly. (See the resize function not working here) Does the resize function work by creating a temp file of the resize image, or something of that sort?

Below is the code:

PImage img;

void setup() {
  size(1000, 563);
  String url = "http://iremaltan.com/pde/robb2/data/robb.jpg";
  img  = loadImage(url, "jpg");
  img.resize(1000, 563);
  img.loadPixels();
}

void draw() {
  int initPix = (int) random(1000*563);
  int init  = (int) grayRetriever(initPix);
  for (int i=0;i<100;i++) {
    int numPix = (int) random(1000*563);
    int num = (int) grayRetriever(numPix);
    if ( num<init || random(0,1)>float(num)/float(init)){
      float x = numPix % 1000;
      float y = numPix/1000;
     // println(x," ",y);
      point(x,y);
    }

  }
}

float grayRetriever(int pix){
  float r = red(img.pixels[pix]);
  float g = green(img.pixels[pix]);
  float b = blue(img.pixels[pix]);

  float gray = (r+g+b)/3;

  return(gray);
}

The following is the html code:

<!doctype html>
<html>
    <head>
        <title>Irem Altan | coming soon</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="js/processing.min.js"></script>
    </head>
    <body>
        <canvas data-processing-sources="pde/pointillism/pointillism.pde"></canvas>
        <p>experiments with processing...</p>
        <p><a href="http://behance.net/iremaltan">behance</a> <em>|</em> <a href="http://irem-altan.deviantart.com">deviantart</a></p>
    </body>
</html>

I'd appreciate if any of you could help me out. Thanks in advance, Irem

Howdy, Stranger!

Categories

possible problem with PImage pixel locations in sketches embedded in browsers