Strange behaviour for bezier() in subpixel stroke weight

p5.js
1

Hello there.

I’ve encountered some strange behaviour for bezier() when using subpixel (<0.49) stroke weights. This seems to happen only on some curve configurations and only on Chrome:

Screenshot 2021-08-24 at 16.01.50
Screenshot 2021-08-24 at 16.01.501510×734 34.4 KB

The curve on the top has a glitch when going from .51 to .49 stroke weight. What is strange is that if I slightly change the curve’s configuration, it doesn’t happen anymore (see curve on the bottom).

Note that on Safari this does not happen - I believe it is due to how the browsers handle subpixel stroke weights (in Safari the .51 line seems a lot thicker).

Does anyone have any direction as to how to solve this?

Thanks,
Andrei

2

So, after more research, this seems to be an issue around how different browsers handle sub-pixel line weights (not related to p5js). The only solution I found was not to use sub-pixel line weights.

For reference, if anyone encounters problems with this I recommend:

  • for lines that should be < 1px, draw them at 1px but change their alpha. So if you would like to draw a line at 0.45px, draw it at 1px with 45% alpha
  • draw all lines at >1px and then scale down by the needed amount
1 Like