Processing sketch does not render properly in web browser

StackOverflow https://stackoverflow.com/questions/23455108

  •  15-07-2023
  •  | 
  •  

Question

I have a processing 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.

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

Below is the processing code:

PImage img;

int X = (int) 1000;
int Y = (int) X/16*9;
int r = 5;
int gridX = X/r;
int gridY = Y/r;

void setup(){
  String url = "http://iremaltan.com/pde/robb2/data/robb.jpg";
  noStroke();
  size(X,Y);
  img = loadImage(url,"jpg");
  img.resize(X,Y);
  img.loadPixels();
  frameRate(500);
  background(0);
}

int xLoc,yLoc;
float gray;
int i=0;
void draw(){
  xLoc = (i%gridX)*r+r/2;
  yLoc = i/(gridX)*r+r/2;
  gray = colorRetriever(xLoc,yLoc);
  fill(gray);
  ellipse(xLoc,yLoc,r,r);
  fill(255,0,0);
  i++; 
}

float colorRetriever(int xLoc, int yLoc){
  int pix = (yLoc-1)*X+xLoc-1;
  float gray;
  float r = red(img.pixels[pix]);
  float g = green(img.pixels[pix]);
  float b = blue(img.pixels[pix]);
  gray=(r+g+b)/3;
  return(gray);
}

Also here is the relevant html code, just in case there's a problem there:

<!doctype html>
<html>
    <head>
    <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/robb2/robb2.pde"></canvas>
    <p>experiments with processing...</p>
</body>

Was it helpful?

Solution

Because of reasons I don't understand (I have almost no experience with PJS), the pix variable, which is declared as an int, can sometimes be something that isn't an int in your code. When I inserted println(pix + ":" + r+","+g+","+b); at the bottom of the colorRetriever method, I got a bunch of numbers like this:

7401.5:8,255,3
7431.5:15,255,4
7461.500000000001:0,0,0
7491.499999999999:0,0,0
7521.5:26,255,35
7551.5:34,255,38
7581.499999999998:0,0,0
7611.500000000001:0,0,0
7641.499999999999:0,0,0
7671.500000000002:0,0,0
7701.5:39,255,20
7731.5:25,255,23
7761.500000000001:0,0,0
7791.499999999999:0,0,0

And when using these floats as an index to the array, instead of crashing, it just returned zero. I'm not really sure why that's how JS deals with non-integer indexing. And I'm also not sure why an int can have decimal points. Anyways, I hope that helps.

Side note: In the course of my investigation, I learned that you can't resize() an image that you loaded from a different server, for some reason the browser doesn't allow it. If you can't draw an image after resizing it, perhaps that's why.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top