# Aliasing in flow-field PShapes ♒

**URL:** <https://discourse.processing.org/t/aliasing-in-flow-field-pshapes/32989>\
**Category:** Coding Questions\
**Created:** [October 21, 2021, 12:43pm UTC](https://discourse.processing.org/t/aliasing-in-flow-field-pshapes/32989 "2021-10-21T12:43:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simple\_de\_concombre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/simple_de_concombre/32/14778_2.png) [@Simple\_de\_concombre](https://discourse.processing.org/u/Simple_de_concombre)\
**Post date:** [October 21, 2021, 12:43pm UTC](https://discourse.processing.org/t/aliasing-in-flow-field-pshapes/32989/1 "2021-10-21T12:43:55Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4929a8db952bba324fc51062e05d103ec1b949d6.png)

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

```auto
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? 🙏

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 21, 2021, 3:44pm UTC](https://discourse.processing.org/t/aliasing-in-flow-field-pshapes/32989/2 "2021-10-21T15:44:32Z")

</div>

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

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

```

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

```auto
pos.add(dir.mult(10));

```

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [October 22, 2021, 12:57pm UTC](https://discourse.processing.org/t/aliasing-in-flow-field-pshapes/32989/3 "2021-10-22T12:57:50Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cfc6cd5f8546f0a96fb2e92f0cac8fb0fb27dec2.jpeg)