Points appearing "transparent"

Processing Coding Questions
1

When I’ve tried drawing points using a for loop to cover the screen it doesn’t appear to be completely solid:

size(255, 255);

noStroke();
fill(255, 0, 0);
ellipse(100, 100, 100, 100);

for (int i = 0; i < 255; i++) {
  for (int j = 0; j < 255; j++) {
    stroke(255);
    point(i, j);
  }
}

For me, the circle is still visible in the background. This can be easily fixed by changing the strokeWeight, but it seems like the points should cover the entire screen with no gaps.

Strangely, when I change the renderer to P2D, the program seems to work properly.

Does this appear for anyone else, and is this the expected behavior?

1 Like
2

This is the correct behavior. The problem is that what you consider a properly drawn point is not the same as what some renderers consider a properly drawn point.

Forget about points for a second. Imagine you want to draw a circle. Easy, right? WRONG! Since the screen is made up of pixels, it’s NEARLY IMPOSSIBLE to just draw a circle by having some pixels be the color of the circle and the other pixels be whatever color they were before. Imagine trying to draw a circle with a diameter of three pixels - it would looks like a 3x3 pixel SQUARE! Yikes!

… Except it doesn’t. And the reason it doesn’t is because a tiny, diameter=3 circle isn’t drawn of 9 pixels - the edges of it are blurred slightly to smooth them out. In fact, ALL circles that get drawn are smoothed out a little bit. This is the default setting, and usually it happens just fine without you needing to worry about it.

… Now back to these points. Image that they are not points, but circles of diameter=1. Because of this secret smoothing/blurring that is happening to make their edges not look jagged and square, they don’t completely fill a whole pixel each. In fact, they might only slightly effect a few pixels near where the point is supposed to be.

In any case, this automatic smoothing is ruining the totally-cover-up-the-red-circle effect you are trying to get. Thankfully, you can disable this secret smoothing by calling noSmooth();

TLDR: Add a call to noSmooth(); on the line after size();. This will make your points take up a whole pixel, and your circle will be covered as you expect.

4 Likes
3

Alternatively, replace point() w/ set(): set(i, j, -1);

Or change pixels[] directly: pixels[] / Reference / Processing.org

loadPixels();
java.util.Arrays.fill(pixels, -1);
updatePixels();
2 Likes
4

Thanks for your replies, I completely forgot that points were rendered circularly! :no_mouth: