P5.js: arc is rendering garbage

[ChristerNilsson]

Using version 0.5.6 I found that arc renders garbage for angles larger than PI when fill is active and strokeWeight > 1 pixel.
var v = 0

setup = function() {
createCanvas(600, 600)
}

draw = function() {
background(127)
strokeWeight(2)
v = v + 0.01
arc(400, 400, 100, 100, 0, v)
}

Workaround: draw small circles instead of using arc.

[joecridge]

@ChristerNilsson I can’t reproduce this – what browser are you using?

[ChristerNilsson]

Chrome Version 55.0.2883.87 m

[joecridge]

Hmm… your code works fine for me with the v0.5.6 download running on Chrome versions 55.0.2883 and 56.0.2924 on Mac OS X 10.11.

Which operating system are you using?

[joecridge]

How do the inverted regions evolve over time – are they stationary, do they move/flicker randomly, or are they periodic with the angle of the arc? And do they stay the same if you move the arc centre slightly around the canvas?

[ChristerNilsson]

I'm using Windows 7. Several machines.
The problem area flickers when the arc changes angle.
Even drawing a circle with thick border produces pixel garbage.

[joecridge]

Okay, thanks.

The vertices of the regions in your screenshot don’t align with the Bézier control/endpoints of the component curves that are being drawn, so I’m struggling to think of a mechanism for the distortion on our end. There are 4 component curves for the fill and another 4 for the stroke in the screenshot, with the first three of each starting/ending horizontally/vertically. All of them have been drawn in exactly the right place, but part of the stroke has been cut away afterwards by some mystery rectangles. Then there’s the off-centre black circle drawn on top of everything which has also been masked by the same rectangles…

Coupled with the flickering (rather than smooth evolution), this sounds suspiciously like a graphics card issue to me. Are you seeing this in other browsers or just Chrome? (And if so, did the machines you tried have different graphics cards?)

I don’t have access to a Windows machine at the moment so I’m afraid I can’t help much further.

[ChristerNilsson]

I gave you wrong information before.
The problem is only visible on my Sony Vaio from 2012.
Please close this issue.
Thanks for your very good support.

[Spongman]

i think this needs to be re-opened since it's still happening: https://github.com/processing/p5.js/issues/2919#issuecomment-408692188

it happens on both windows 10 machines i have access to.

[Spongman]

@joecridge i took a look at the arc-drawing code and i'm reasonably certain there's no mid-arc shenanigans going on.

i think the next step will be to re-create the bezier end/control point calculations in the non-p5 pen. i'm assuming at this point it's a browser bug and a minimal repro will help to eliminate p5 as the cause.

as for a workaround, it may not be pretty, but @AdilRabbani's #2919 fix does 'fix' this behavior for me.

[joecridge]

Awesome, thanks for looking into it. It would be good to rule out p5 if we can, but if it’s a browser bug it’s probably not going anywhere soon (and it seems to be at least 6 months old), so Adil’s fix is probably the best way forward. @AdilRabbani do you want to re-open #3097? 😆

[AdilRabbani]

Yeah sure! 👍

[lmccart]

fixed with https://github.com/processing/p5.js/pull/3097