I am trying to draw a grid over an image using the underlaying colours of the image to fill the circles. But some pixels are not getting the correct colour. In this case the circles are drawn white but they should not be drawn white...

See my code below:

import processing.pdf.*;

PImage img;
color background = color(255);

void setup() {
  size(1038, 525);
  ellipseMode(CORNER);
  noStroke();

  //img = loadImage("noise2.jpg");
  //img = loadImage("air.png");
  img = loadImage("accidents.png");

  image(img, 0, 0, width, height);
  visualGrid(20, 0.4, false);
}

//void draw() {
//  fill(noise.get(mouseX, mouseY));
//  rect(width - 100, height - 100, 100, 100);
//}

void visualGrid(int circleSize, float fillSmoothing, boolean debug) {
  float halfCircle = circleSize / 2.0;
  int amountX = floor(width / circleSize);
  int amountY = floor(height / circleSize);
  amountY  = floor(amountY * 0.1);
  
  float offsetX = (width - (amountX * circleSize    halfCircle)) / 2   halfCircle;
  float offsetY = (height - amountY * circleSize   amountY * circleSize * 0.1) / 2;
  
  for (int x = 0; x < amountX; x  ) {
    for (int y = 0; y < amountY; y  ) {
      float styledOffsetX = (y % 2 == 0) ? offsetX - halfCircle : offsetX;
      float xpos = x * circleSize   styledOffsetX;
      float ypos = circleSize * 0.9 * y   offsetY;
      
      int sectionSize = round(circleSize * fillSmoothing);
      float sectionOffset = (circleSize - sectionSize) / 2;
      
      color c = getAvgImgColor(img.get(round(xpos   sectionOffset), round(ypos   sectionOffset), sectionSize, sectionSize));
      //fill(noise.get(round(xpos), round(ypos)));
      
      if(debug) {
        stroke(255, 0, 255);
        strokeWeight(1);
      }
      
      fill(c);
      ellipse(xpos, ypos, circleSize, circleSize);
      
      if(debug) {
        noStroke();
        fill(255, 0, 255);
        rect(round(xpos   sectionOffset), round(ypos   sectionOffset), sectionSize, sectionSize);
      }
    }
  }
}

color getAvgImgColor(PImage section) {
  
  section.loadPixels();
  
  int avgR = 0, avgG = 0, avgB = 0;
  int totalPixels = section.pixels.length;
  
  for (int i = 0; i < totalPixels; i  ) { 
    color pixel = section.pixels[i];
    //if(pixel == background) continue;
    
    avgR  = red(pixel);
    avgG  = green(pixel);
    avgB  = blue(pixel);
  } 
  
  return color(
    round(avgR / totalPixels),
    round(avgG / totalPixels),
    round(avgB / totalPixels)
  );
}

This is what i get when drawing my grid on the image in question:
As you can see in the circled area not all circles should be filled with white... This happens in more places than just the circled are just compare this image with the one below.

I will upload the original image below, so you can use it to debug.

CodePudding user response：

There's a mismatch between the dimensions of your sketch (1038 x 525) and the image you're sampling (2076 x 1048) which might explain the misalignment.

If size(2076, 1048) isn't an option try resizing the image once it's loaded in setup():

...
img = loadImage("accidents.png");
img.resize(width, height);
...