Aliasing in flow-field PShapes ♒

Processing Coding Questions
1

Hi!
I’m getting aliased lines when drawing my flow field. The SVG export looks fine.
Tried quite a few things already, without success: smooth()-ing, different stroke weights, changing the Windows application scaling, saving frames, pixelDensity (not relevant on my display)… Nothing has made the aliasing go away.

example
example1252×1080 233 KB

And here’s the code to reproduce a minimal example.

float f = 0.01;
int N = 100;

void setup() {
  size(1000, 1000);
  noLoop();
  noiseSeed(51);
  randomSeed(51);
  //smooth(8);
}

void draw() {
  background(0);

  for (int i = 0; i < N; i++) {
    PVector pos = new PVector(random(width), random(height));

    stroke(random(125, 255), random(125, 255), 255);
    strokeWeight(1);
    noFill();

    beginShape();
    while (pos.x > 0 && pos.x < width && pos.y > 0 && pos.y < height) {
      vertex(pos.x, pos.y);

      float a = noise(pos.x * f, pos.y * f) * TAU;
      PVector dir = PVector.fromAngle(a);
      pos.add(dir);
    }
    endShape();
  }
}

Any ideas as to how these lines could be smoothed out? :pray:

PS: My eyes might be going a bit crazy and starting to see aliasing everywhere. Pls send help.

2

Hey, using P2D renderer with smooth(8) help a lot:

size(1000, 1000, P2D);
smooth(8);

But main thing is that your points are too close to each other I think.
Try this:

pos.add(dir.mult(10));
1 Like
3

Bump up strokeWeight to at least 2 and use FX2D renderer.

image
image1000×1000 181 KB