Cannot read property 'data' of undefined when use img.pixels[]

[ghost]

/* @pjs preload="tux.png"; */

PImage img;       // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int columns, rows;   // Number of columns and rows in our system
int ololo = 30;

void setup(){
    size(screen.width, screen.height, P3D);
    img = loadImage("tux.png"); 
    columns = img.width / cellsize; 
    rows = img.height / cellsize;
    smooth();

}

void draw(){  
  background(0);
// Begin loop for columns
  for ( int i = 0; i < columns; i++) {
// Begin loop for rows
    for ( int j = 0; j < rows; j++) {
        int x = i*cellsize + cellsize/2;  // x position
        int y = j*cellsize + cellsize/2;  // y position
        int loc = x + y*img.width;  // Pixel array location
        color c = img.pixels[loc];  // Grab the color
        // Calculate a z position as a function of mouseX and pixel brightness
        float z = (ololo / float(screen.width)/2) * brightness(img.pixels[loc]) - 100.0;
        // Translate to the location, set fill and stroke, and draw the rect
        pushMatrix();
        translate(x + 200, y + 100, z);
        fill(c, 204);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, cellsize, cellsize);
        popMatrix();
    }
  }     

}

When I use 2D mode i get

Uncaught TypeError: Cannot read property 'data' of undefined - processing.js:18301 getPixel - processing.js:18301 draw - VM48:21 Drawing2D.redraw - processing.js:13468 (anonymous function) - processing.js:13550

[GoToLoop]

You might try out img.loadPixels() @ setup() by chance? http://processingjs.org/reference/PImage_loadPixels_/

[Pomax]

you can't access pixels without first calling loadPixels. See the link @GoToLoop mentioned. Although it doesn't need to be called in setup(), it just needs to be called before you access the .pixels array

[GoToLoop]

I've advised calling it @ setup() b/c the PImage is static and never changes. :P

[ghost]

/* @pjs preload="tux.png"; */ 

void setup(){
    size(screen.width, screen.height, P3D);
    int halfImage = width*height/2;
    PImage myImage = loadImage("tux.png");
    myImage.loadPixels();
    for (int i = 0; i < halfImage; i++) {
      myImage.pixels[i+halfImage] = pixels[i];
    }
    myImage.updatePixels();
    image(myImage, 0, 0);
} 

Uncaught TypeError: Cannot read property '3' of undefined p.pixels.getPixel setup executeSketch (anonymous function)

Problem still be same.

[Pomax]

interesting, that updated code shows there might be a bug in pixels. do you have this running live somewhere so it can be examined by any chance?

[ghost]

https://drive.google.com/file/d/0Bwcv1U0OE_--LWZIUmVWRkh3dzg/view?usp=sharing

Now I can just share with google drive

[Pomax]

that just the code though, I meant as running sketch (if it can run: how do I run this? =)

[ghost]

There is a cketch - https://drive.google.com/file/d/0Bwcv1U0OE_--X2YtejAwVUJLT1k/view?usp=sharing

[GoToLoop]

Your loop condition is too big! While loaded image is mere 256x256, your loop expects half of 800x600! It comes to a point where it gets outta bounds. And after that those indices are all undefined. That is @ JS Mode. In Java Mode it raises NullPointerException rather than a somewhat mysterious "TypeError: 'undefined' is not an object". Since your sketch fails in Java Mode already, you shouldn't have even bothered nor reported a PJS issue! @_@

[Pomax]

800x600 is only 480000, that comfortably fits in a desktop browser's running memory. It might cause an error in Java if you're not running with "sensible" min/max heap values, but for Processing.js those values aren't anywhere near problematic (I regularly work on 1200x1200 sketches).

That said, the advice "make sure it works in the PDE, because if that works but Pjs doesn't, it's a bug" is good advice. If the code won't run in the PDE, fix that first, then once that works move to Pjs again.

[Pomax]

closing with https://github.com/processing-js/processing-js/issues/142 filed as followup

[kipisheos]

I also having trouble with the loadPixels()/updatePixles() functions when using processing js. I have a sketch on processing that works fine but when i tried embedding it in a website and using js the loadPixels() fails.

Arseniusz- about the error your get when running the example code it seems that it is because of the line myImage.pixels[i+halfImage] = pixels[i]; which should be myImage.pixels[i+halfImage] = myImage.pixels[i]; but eventhough it gets rid of the "Cannot read property '3' of undefined" error it still not working.

did any of you found a solution??? Thanks