Rendering issue with curves in p5js

[amygoodchild]

The issue is that very tight curves sometimes render with "spiky" bits.
It's happening on the left of this shape in this video:
https://user-images.githubusercontent.com/11337769/113515037-ea4dbd00-9569-11eb-901e-a80d27341797.mp4

I have noticed this happening outside of canvas-sketch before, but only if I am zoomed out on the canvas. When zoomed at 100% and not using canvas-sketch, this does not occur.

However in canvas-sketch it happens all the time, even when zoomed at 100%.

I thought it would be to do with the resizing of the canvas, but it does also occur with the following settings:

 scaleToFitPadding:0,
 scaleToFit:false

Is there perhaps somewhere else the canvas is being resized?

[mattdesl]

Thanks for posting! Will look into this a bit more when I get a chance. Hard to say what it could be; you can try setting { pixelRatio: 1 } or setting / clearing the { dimensions } , or setting { resizeCanvas: false } (but you'd have to manually resize it I think).

It also looks a little like something to do with canvas2D path rendering getting blown out, like a miter join going to infinity, you could try p5.strokeJoin(p5.ROUND) to see if that fixes it.

[amygoodchild]

Thanks for these suggestions! I tried these out and discovered that actually, {pixelRatio: 1} in the settings doesn't fix it, but any number above 1 does fix it.

It does also cause it to run slower, but I am exporting to mp4 anyway so it is not an issue for me at the moment.

[mattdesl]

That's very unusual; it sounds like some sort of floating point issue or browser rendering bug that only happens depending on resolution and coordinate systems. Do you see the same behaviour on other browsers? If you jitter all your points before rendering by some small amount e.g. Math.random()*0.00001 does the behaviour disappear?

BTW to fix the slow rendering, you can change it to { scaleToView: true } which should only render it at the browser size, but still export full resolution on output. Though, perhaps setting { pixelRatio: 2 } will override that; so another option would be to set { exportPixelRatio: 2 } instead of pixelRatio, that way the fix will be applied to export only, allowing you to iterate on the artwork without killing your CPU/battery. 😄

[asbjornenge]

Maybe I'm just blind but that scaleToFitPadding property was not documented I think...? It was just the one I was looking for though, so thanks for sharing it @amygoodchild ✨