Rotation artifacts when doing 90-degree rotations (are worse than Processing 3)

[processing-bot]

Created by: jbum

Description

I have a script that draws several parts using 90/180/and 270-degree rotations for parts that contain several horizontal and vertical lines. I noticed the lines were often off-true, so I wrote a script to demonstrate the issue. When run in Processing 3, there are a few artifacts, but in Processing 4, the artifacts are significantly worse, as seen in the following screenshots. Interestingly a rectangle with the same dimensions rotates cleanly, but lines and vertex shapes exhibit these artifacts.

Test script is attached. Note: I can see the artifacts are different when using P2D and P3D.

Steps to Reproduce

1. Run the testing script (below).
2. Observe the result.

Your Environment

M1 Macbook Air, MacOS 12.2.1
Processing 4.0b6

Result in Processing 4.0b6

Result in Processing 3.5.4

Testing script.

// Rotation test

void setup() {
  size(800,800);
}


void draw() {
  background(255);
  for (int gy = 0; gy < 5; ++gy) {
    float boxSize = map(gy,0,5-1,100,150);
    for (int gx = 0; gx < 5; ++gx) {
      noFill();
      stroke(0);
      float ox = 20 + gx*150;
      float oy = 20 + gy*150;
      pushMatrix();
        translate(ox,oy);
        rect(0,0, boxSize, boxSize);
        translate(boxSize/2, boxSize/2);
        float ang = gx * PI/2.0;
        rotate(ang);
        float irad = boxSize/2;
        
        // this rotates cleanly
        rect(-irad,-10,irad*2,20);
        
        // this has rotation artifacts
        //line(-irad,-10,irad,-10);
        //line(irad,-10,irad,10);
        //line(irad,10,-irad,10);
        //line(-irad,10,-irad,-10);

        // this has the same rotation artifacts as the lines
        beginShape();
        vertex(-irad, -10);
        vertex(irad, -10);
        vertex(irad, 10);
        vertex(-irad, 10);
        endShape(CLOSE);      
      popMatrix();
    }
  }
}

[processing-bot]

Created by: benfry

Yuck, those are gross… Basically there's some sort of accumulated error happening, but unfortunately it's behavior we're inheriting from Java, so the difference between 3.5.4 and 4.0 is that we're using OpenJDK 17 instead of Oracle's JDK 8.

The issue is simply that it's surprisingly hard to determine how exactly to put single pixel lines on a low-resolution drawing surface, and intuit what the user wants so that they look good. So there's lots of math and guessing that goes into how pixels get laid down on the grid… i.e. what we call 0,0 is really be drawn with its center at 0.5,0.5 so there's some fudging involved because it needs to behave differently at low-res (800x800, small boxes like these) and when it's scaled up to something larger (where a shift of 0.5 would be far too much and distort the image). So the exact decisions here probably changed slightly between Java 8 and 17.

Anyhow, a workaround in this particular case is that you can translate by a small amount so that the decision about how your geometry is aligned to the pixel grid is shifted slightly. I found that adding translate(-0.1, -0.1) to the top of draw() made all the artifacts go away:

If you have a different OS and display than me, you may just need to try other versions of translate(). Or you might interactively do something that uses the arrow keys to nudge things until they look best to your eye.

[processing-bot]

Created by: github-actions[bot]

This issue has been automatically locked. To avoid confusion with reports that have already been resolved, closed issues are automatically locked 30 days after the last comment. Please open a new issue for related bugs.