I’ve reached some weird behaviour for bezier curves between browsers. There are some combinations of anchors and control points that produce a glitch like this:
(right is the correct curve)
If I slightly change the positions of the anchor and control points, this does not happen anymore. Additionally, this seems browser-related and only happens on certain browsers on my machine (Chrome).
Example: Bezier Glitch - OpenProcessing
Does anyone have any idea behind why this happens and how to solve it? Thanks!
Strange. I can reproduce the issue on my browser (Brave (Chromium) on MacOS), but I cannot reproduce it directly with canvas, so it does look like an issue with p5.js. I’d have to step through with a debugger to see what’s going on. Here’s the working raw canvas implementation:
<title>Bezier Curve Test</title>
<canvas id="disp" width="300" height="300"></canvas>
const disp = document.getElementById('disp');
const ctx = disp.getContext('2d');
ctx.fillStyle = 'dimgray';
ctx.fillRect(0, 0, disp.width, disp.height);
ctx.fillStype = undefined;
ctx.strokeStyle = 'limegreen';
In the left example you have fill enabled so you get a solid triangle with vertices corresponding to the Bezier control points.
I suspect the different browsers apply fill differently, I suggest you use
@quark I already have noFill() declared at the start of draw(). It doesn’t make any difference (for me) if I remove noFill() or add it before each bezier call.
@KumuPaul that’s interesting! I can confirm that using your code the issue does not reproduce anymore. What’s more intriguing is that I tried using the canvas drawing context provided in p5js and in that case it still happens, see here: Bezier Glitch Canvas Context - OpenProcessing
Another interesting thing: if I set Stroke cap to SQUARE, the curve still has issues, but displays differently: