Question

I’m using Processing to divide a large image into a series of smaller, rectangular nodes.

Processing stores the color value for the pixels of a PImage in a pixels array, which I am accessing to break up the image into smaller parts. For some reason, I am getting this output, when my intent was for the entire image to be displayed when the nodes are arranged in draw().

Here is my main class:

ArrayList node = new ArrayList();
PImage grid;
PVector nodeDimensions = new PVector(210, 185);
PVector gridDimensions = new PVector(2549, 3300);
String name = "gridscan.jpeg";

void setup() {
  size(500, 500); 
  grid = loadImage(name);
  grid.loadPixels(); 
  fillPixels();
  noLoop();
}

void fillPixels() {
  int nodeNum = 0;
  for (int startX = 0; startX < 2549 - nodeDimensions.x; startX += nodeDimensions.x) {
    for (int startY = 0; startY < 3300 - nodeDimensions.y; startY += nodeDimensions.y) {
      node.add(new Node()); 
      sendPixels(new PVector(startX, startY), nodeNum);
      nodeNum++;
    }
  }
}

void sendPixels(PVector start, int nodeNum) {
  for (int x = int(start.x); x < start.x + nodeDimensions.x; x++) {
    for (int y = int(start.y); y < start.x + nodeDimensions.y; y++) {
      Node _node = (Node) node.get(node.size() - 1);
      _node.fillPixel(new PVector(x, y), grid.pixels[int(y*gridDimensions.x+x)]);
    }
  }
}

void draw() {
  drawNodes();
}

void drawNodes() {
  int nodeNum = 0;
  for (int x = 0; x < width; x += nodeDimensions.x) {
    for (int y = 0; y < height; y += nodeDimensions.y) {
      Node _node = (Node) node.get(nodeNum);
      _node.drawMe(new PVector(x - (nodeDimensions.x/2), y - (nodeDimensions.y/2))); 
      nodeNum++;
    }
  }
}

And here is the Node class:

class Node {

color[] pixel;

Node() {
  pixel = new color[int(nodeDimensions.x * nodeDimensions.y)];
}

void fillPixel(PVector pos, color pixelValue) {
  if(int(pos.y * nodeDimensions.y + pos.x) < 38850) pixel[int(pos.y * nodeDimensions.y + pos.x)] = pixelValue;
}

void drawMe(PVector centerPos) {
  pushMatrix();
  translate(centerPos.x, centerPos.y);
  for(int x = 0; x < nodeDimensions.x; x++) {
   for(int y = 0; y < nodeDimensions.y; y++) {
    stroke(getPixelColor(new PVector(x, y)));
    point(x,y);
   } 
  }
  popMatrix();
}


color getPixelColor(PVector pos) {
 return pixel[int(pos.y * nodeDimensions.x + pos.x)];
}

}

Hopefully my code makes sense. I suspect the issue is in the sendPixels() method of the main class.

I used this this page from the Processing reference as a guide for creating that function, and I’m not sure where my logic is wrong.

Any help would be appreciated, and please let me know if I can clarify something.

Answer 1

According to getPixelColor(), it seems that it uses rows.
So if you have a 5×5 square image then 2×2 would be 7.
To get the index you use this formula:
index = (y - 1) * width + x
Explained this way it’s look pretty simple, doesn’t it?