Bezier Glitch in certain point combinations

p5.js
1

Hi,

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:

Screenshot 2021-09-09 at 23.34.45
Screenshot 2021-09-09 at 23.34.45954×832 4.05 KB

(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!

2

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:

<html>
<head>
<title>Bezier Curve Test</title>
</head>
<body>
<canvas id="disp" width="300" height="300"></canvas>
<script>
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';

ctx.translate(10, 100);

ctx.lineTo(108.87, 3.78);
ctx.bezierCurveTo(
    201.1, -128.61,
		34.21, 82.54,
		134.14, 126.01
);
ctx.stroke();

</script>
</body>
</html>
3

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 noFill()

4

@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

1 Like
5

Another interesting thing: if I set Stroke cap to SQUARE, the curve still has issues, but displays differently:

Screenshot 2021-09-10 at 18.53.11
Screenshot 2021-09-10 at 18.53.111242×1094 4.19 KB