In your Tile class add the following method

1. // return true if this tile is black
2. boolean isBlack(){
3.       return (col & 0x00ffffff) == 0x00000000;
4. }

This will determne whether the colour is black not matter what the alpha level is.

Thanks for the response Quarks.

I think I understand that what you want to do. Basically you want to be able to define a rectangular part of an image (a tile) and count the number of pixels of a particular colour.

A PImage object stores its pixel-colour data in a single dimension array. To access this data it must be first loaded with loadPixels() to ensure we have the latest pixel data. The data will then be in the pixels[] array. Since we have 2D data in a 1D array then there is some maths involved in converting a x,y position to the find the corresponding array index position.

The sketch below creates a random black an white image and has a function that will count the number of pixels of a particular colour.  Hopefully the code should be easy to follow.

1. PImage bwImg;
2. 
   
3. public void setup() {
4.   size(600, 600);
5.   // Create a black and white image
6.   background(255);
7.   fill(0);
8.   for (int i = 0; i < 100; i++) {
9.     rect(random(0, width-10), random(0, height-10), random(10, width/10), random(10, width/10));
10.   }
11.   bwImg = get(0, 0, width, height);
12.   int tileX = 230, tileY = 160, tileW = 100, tileH = 80;
13.   // Now count the number of black pixels in a given section
14.   int nb = countPixels(bwImg, tileX, tileY, tileW, tileH, color(0));
15.   // Now count the number of white pixels in a given section
16.   int nw = countPixels(bwImg, tileX, tileY, tileW, tileH, color(255));
17.   // Since this is a black and white image the sum of these should
18.   // equal the number of pixels in the tile.
19.   if (nb + nw == tileW * tileH)
20.     fill(0, 140, 200); // worked
21.   else
22.     fill(255, 0, 0); // failed
23.   textSize(20);
24.   text("Black = " + nb + "   White " + nw, 20, 40);
25. }
26. 
    
27. /*
28. Count the number of pixels of the given colour in the rectangle specified
29. x,y define the position of the pixel top-left pixel
30. sizeX, sizeY define the width and the height of the retangle in pixels
31. col is the colour of the pixels we want to count
32. Returns the number of pixels of the specified colour
33. */
34. public int countPixels(PImage img, int x, int y, int sizeX, int sizeY, int col) {
35.   int w = img.width;
36.   int h = img.height;
37.   // Make sure the tile fits inside the image and its size is valid
38.   if (x < 0 || y < 0 || sizeX < 0 || sizeY <0 || x + sizeX > w || y + sizeY > h) {
39.     println("Invalid area defined");
40.     return 0;
41.   }
42.   img.loadPixels();
43.   int n = 0;
44.   // Get the index position for the top left pixel of the tile position
45.   int start = y * w + x;
46.   int rowStart = start;
47.   // for each row
48.   for (int py = 0; py < sizeY; py++) {
49.     // for each column
50.     for (int px = 0; px < sizeX; px++) {
51.       if (img.pixels[rowStart + px] == col)
52.         n++;
53.     }
54.     // move the row start to the beginning of the next row
55.     rowStart += width;
56.   }
57.   return n;
58. }

HTH

Wow! Thank you so much, it's really getting close now. 

Just as an update, I managed to get the single image number of black pixels scanner to work in a slightly different way, which is great. The code for that is as follows; 

I assume that

1. the image you want to analyse is "Flower - 024 copy.png"
2. it's size is 600x600 pixels
3. you want to 'superimpose' an imaginary 2D gird  (like a chessboard)
4. for each rectangle in the grid count the number of black pixels
5. for each rectangle in the grid  create a 3D box whose height is dependant on the number of black pixels

Is this right?


Also I assume that

1. if the grid is 30x30 tiles then each tile will be 20x20 pixils

Is that right?

Once I know the answers I can advise you further.

That is all absolutely spot on! 

Before I go into details have a look at this applet.

It effectively takes the picture on the right splits it into 900 tiles (30x30 grid) then counts the number of black pixels in each tile. It then draws each tile in the correct xy position but at a height dependant on the number of black pixels. Not quite extruded boxes but I have to leave you something to do.

I am not going to put all the code in this forum but you can download the zipped fully working sketch from here.

I have used Processing 1.5.1 because I wanted to export the Applet but it should work in all versions of Processing upto and including 2.0b6. It will not work in 2.0b7 because both Processing and PeasyCam need updating to make them work together.


I have not used your code because I found it confusing (no disrespect intended). When I approach a project like this I try to break it down into a number of smaller problems that I can code and test so that the project develops in stages but still remembering the final outcome required. Taking this approach mistakes are caught and fixed early so new code is based on a solid foundation.

In this project there are 2 main parts -

1. analysing the image
2. drawing a 3D scene based on the image and the analysis

The soultion will require

1. the image to be split into multiple sub-images
2. remember where each sub-image is in relation to the full image
3. be able to count the number of black pixels in each sub-image
4. render each of the sub-images  individually in a position relative to its original position and a height based on the analysis

If you think about the last one then it follows that for each sub-image we need to know

• the x,y coordinates of the sub-image (where it came from in the main image)
• the width and height of the sub-image
• the number of black pixels
• the actual sub-image because we need that for texturing the cube or whatever.

To do this I have create the Tile class shown here.

1. class Tile {
2.   PImage tileImg;       // the bit of the image corresponding to grid position
3.   int x, y, w, h;
4.   int col;                   // the color we are counting
   
5.   int count;// the number of pixels of the right colour
   
6. 
   
7.   // The constructor does all the work it takes the original image the position and size
8.   // of the sub-image and the colour to count as parameters
   
9.   Tile(PImage image, int tx, int ty, int tw, int th, int col2count) {
10.     x = tx;
11.     y = ty;
12.     w = tw;
13.     h = th;
14.     if (x < 0 || y < 0 || w < 0 || h < 0 || x + w > img.width || y + h > img.height) {
15.       println("Invalid area defined");
16.     }
17.     else { // only do this if the rectangle fits inside the image 
18.       tileImg = img.get(x, y, w, h); // get the subimage
    
19.       col = col2count;   // store the colour to count
    
20.       count = countPixels();  // perform the pixel count
    
21.     }
22.   }
23. 
    
24.   // this method does the analysis so you could change this to do something else!!
    
25.   int countPixels() {
26.     tileImg.loadPixels();
27.     int noPixels = tileImg.pixels.length;
28.     int c = 0;
29.     for (int n = 0; n < noPixels; n++) {
30.       if (tileImg.pixels[n] == col)
31.         c++;
32.     }
33.     return c;
34.   }
35. }

The next stage is then to create a 2D array of Tile object references based on the grid size we want to use. Then loop through the array to create the tiles.

1. PeasyCam pcam;
2. PImage img;
3. Tile[][] grid;
4. int gridSize = 30, tileSize;
5. 
   
6. public void setup() {
7.   size(600, 600, P3D);
8.   img = loadImage("london.jpg");
9.   background(img);
10.   grid = new Tile[gridSize][gridSize];
11.   tileSize = 600/gridSize;
12.   println(tileSize);
13.   int c = color(0);
14.   for (int row = 0; row < gridSize; row++) {
15.     for (int col = 0; col < gridSize; col++) {
16.       grid[col][row] = new Tile(img, col*tileSize, row*tileSize, tileSize, tileSize, c);
17.     }
18.   }
19.   pcam = new PeasyCam(this, 800);
20. }

The gridSize controls the number of tiles horizontally and vertically and tileSize is the actual size of the tile in pixels. Line 16 creates each tile.

At this stage we have everything we need to do the rendering. If you have not used textures before then I suggest you have a look at the reference and examples for the methods I have used.

1. public void draw() {
2.   background(200, 255, 200);
3.   translate(-img.width/2, -img.height/2); // move the grid to the centre of the display
   
4.   textureMode(NORMAL);  // Use normalised texture coordinates
5.   for (int row = 0; row < gridSize; row++) {
6.     for (int col = 0; col < gridSize; col++) {
7.       Tile t = grid[col][row]; // now use t to save typing
8.       beginShape(QUADS);
9.       texture(t.tileImg);
10.       vertex(t.x, t.y, t.count, 0, 0);
11.       vertex(t.x, t.y + t.h, t.count, 0, 1);
12.       vertex(t.x + t.w, t.y + t.h, t.count, 1, 1);
13.       vertex(t.x + t.w, t.y, t.count, 1, 0);
14.       endShape();
15.     }
16.   }
17. }

HTH