Problem with PGraphics - pixel[] gives scattered pixels

Processing Beginners
1

Hi,

I got a little test and I cant get it do act like I want to - I guess I dont fully understand how to use the PGraphics.

My ultimate goal is to load a picture and replicate it with a string art. First step I thought was to figure out how to compare pixels in order to compare the differnet strings which one should be added in order to get closer to the original picture…

Now for starting i just made two rectangle and tried to make a third where they intersect. But the third just looks scattered:

image
image1812×716 23.6 KB

As my recangles are 200px wide I expect an overlap of 200x200 = 40000, but I only get 28506…

Hope the attached screenshot and the code is visible. Maybe someone can point out what I am doing wrong here…

Thank you!!

PGraphics img1;
PGraphics img2;
PGraphics img3;

void setup() {
  
  size(1800, 600);
  clear();
  
  img1 = createGraphics(600, 600);
  img2 = createGraphics(600, 600);
  img3 = createGraphics(600, 600);
   
}

void draw() {
  
 noLoop();
 background(55);
 drawImg();

 delay(5000);
}


//**************************************************************


void drawImg() {
  
  // Draw rectangles on img1 and img2 using rect() function
  img1.beginDraw();
  img1.noStroke();
  img1.background(255);
  img1.fill(0, 0, 0);
  img1.rect(200, 10, 200, 580);
  img1.endDraw();
  
  img2.beginDraw();
  img2.noStroke();
  img2.background(200);
  img2.fill(0, 0, 0);
  img2.rect(10, 200, 580, 200);
  img2.endDraw();
  
  println("Number of intersecting black px should be: ",200*200);
  
  
  img3.beginDraw();
  //img3.noStroke();
  img3.background(150);
  //img3.fill(0, 255, 0);
  //img3.rect(200, 200, 200, 200);
  img3.endDraw();
  
  
  image(img1,0,0);
  image(img2,600,0);
  image(img3,1200,0);
  
  
  img1.loadPixels();
  img2.loadPixels();
  img3.loadPixels(); 
  
  
  int cntEqualPxB = 0;
  int cntLoop = 0;
  
 
  // Draw intersection of rectangles on img3
    for (int i = 0; i < img1.width; i++) {
        for (int j = 0; j < img1.height; j++) {
          
           cntLoop++;
          
           int cnt = i*j;
                
           float avg1 = brightness(img1.pixels[cnt]);
           float avg2 = brightness(img2.pixels[cnt]);  
    
        
           if ((avg1>250) && (avg2>250)) {
             
             //white
                    
            }
            else {
                if ((avg1<10) && (avg2<10)) {
                  //black
                  img3.pixels[cnt] = color(100,20,0);
                  if (img3.pixels[cnt] != color(100,20,0)) {
                    println("WTF");
                  }
                  cntEqualPxB++;
                }       
            }         
        }    
    }
    
   img3.updatePixels();
   
   image(img1,0,0);
   image(img2,600,0);
   image(img3,1200,0);

   println("Intersected PX Black = ",cntEqualPxB,"     cntLoop = ",cntLoop);

}
2

You probably want:

int cnt = i + (j * img1.width);

if you mean to run through all of the pixels of each image.

1 Like
3

Thank you! Works beautifully!!

4

Hello @Phil2K,

This is a good tutorial:

It explains the use of:

    // Use the formula to find the 1D location
    int loc = x + y * width;

:)