Strange aliasing on diagonal lines

Processing Coding Questions
1

Hey folks. Newly returned to Processing after years away.

Trying to get Processing to behave itself on my Windows 10 Surface Book. It’s displaying very strangely with heavy aliasing on diagonal lines, to the point of pixellation. Example below, compare the difference between the straight and diagonal lines. Ignore the red colour of my red light filter.

processing
processing2125×1100 297 KB

I suspect my monitor, being 3000x2000 pixels and 200% scaling may be responsible. But I’ve tried the ‘Disable HiDPI Scaling’ option, tried another monitor and played around with the scaling settings in Windows and nothing seems to change it.

Code below for comparison to your display:

void setup()
{
  background(255);
  size(1100, 600);
  strokeWeight(1);
}

void draw()
{
  fill(0, 0, 0, 0);
  int ct = 12;

  for (int i = 0; i < ct - 2; i++)
  {
    float s = 500;
    line(100, 100, 100+(s*i)/ct, s);
    line(100, 100, s, 100+(s*i)/ct);
    circle(800, 300, (s*i)/ct);
  }
}
2

Hello,

Try:

strokeWeight(2) // In setup()

background(255) // Start of draw()

image
image1102×639 102 KB

References:
https://processing.org/reference/draw_.html
https://processing.org/reference/background_.html

Tutorial:
https://processing.org/tutorials/overview

It should become clear after reading through the above.

Try this with and without background(255) at the start of draw:

I do not have a High-DPI display to test this:
https://processing.org/reference/pixelDensity_.html

:)

1 Like
3

Adding to what glv said about redrawing the background in draw(), if you only need to generate the image once, you can also use noLoop() instead.

Using pixelDensity(2) further reduces aliasing on a High-DPI display:

image
image2424×1480 276 KB

4 Likes
4

Thanks sableRaph and glv! I thought it was some big complicated issue with my monitor rendering, it turns out I’ve just forgotten the basics of processing :rofl: thanks for your help, I would have bashed my head against this one for a long time.

Thick lines just caused by it drawing them a million times on top of each other. Duh.

2 Likes