Graphics#arc has weird artefacts when chained

[LordBarbadass]

Hi!

So I want to make a circle with multiple colors. The colors and angles will change dynamically so sprites or images aren't a solution. But when I draw the circle by chaininc 4 calls to Graphics#arc this happens (on Firefox, Chrome and mobile versions) :

My code is basically :

class extends Graphics {
  constructor() {
    // ...
    this.lineStyle(this.thickness, color1)
    this.arc(0, 0, this.radius, start1, end1)
    this.lineStyle(this.thickness, color2)
    this.arc(0, 0, this.radius, start2, end2)
    // etc ...
  }
  // ...
}

No other calls to any draw method or anything (math hidden for reading convenience ?). Any ideas what that could be from ? My current fix is to draw all the arcs 0.1rad longer and then redrawing the first arc to overlap the last unnecessary bit but it's `// ewww`...

[AnDG]

Write a function to facilitate this. I have written a function in my library similarly. The parameter includes (p_x, p_y, p_startAngle, p_endAngle, p_innerRadius, p_outerRadius).
First you need to determine the starting point X and the starting Y coordinates:

initialX = px + Math.cos (toRad (p_startAngle)) * p_outerRadius;
Same for initialY with sin.
         

moveTo (initialX, initialY);
         drawArc (p_x, p_y, p_outerRadius, p_startAngle, p_endAngle);
         lineTo (p_x + Math.cos (toRad (p_endAngle)) * p_innerRadius, p_y + Math.sin (toRad (p_endAngle)) * p_innerRadius);
         drawArc (p_x, p_y, p_innerRadius, p_endAngle, p_startAngle);
         lineTo (initialX, initialY);

Note: customize the color you want by infusing the original color.

[LordBarbadass]

Thanks but that's not my problem.

Of course my code is in a function, has loops that build the circle depending on data and all (hence the "math hidden for reading convenience ").

My problem is that where the arcs join together looks like garbage.

[ivan.popelyshev]

is that in CanvasRenderer or WebGL? which version of pixi is it? 

Looks like first triangle in the chain is calculated wrongly

[LordBarbadass]

7 hours ago, ivan.popelyshev said:

is that in CanvasRenderer or WebGL? which version of pixi is it?  

Looks like first triangle in the chain is calculated wrongly

Pixi 5.0.0-rc.2, WebGL renderer (on my dev environment at least but the same problem appears everywhere)

The blue is the first arc to be drawn then the others, clockwise.

Also the whole thing disappears randomly on Chrome mobile but that's a problem for later...

[ivan.popelyshev]

Post it on https://www.pixiplayground.com/#/edit please, and i'll fix it today or tomorrow, we have a huge train of pull requests related to Graphics this week  I know where is the possible problem but i need help setting up a demo because THERE ARE TOO MUCH BUGS IN GRAPHICS AND IM WORKING ON ALL OF THEM NOW !!!!1111!!!!111

[LordBarbadass]

Here's a playground that reproduces the problem (some of it at least, the missing triangles aren't in the exact same place for me)

https://www.pixiplayground.com/#/edit/wyw3c0oMPBlkeO5he3Wto

I can confirm that this bug is not present in [email protected] so I'll use this version for a while ?

Thank Ivan, you're incredibly helpful ??

[ivan.popelyshev]

Heh, we forgot to port the fix from v4.

Whats your github login for a mention? https://github.com/pixijs/pixi.js/pull/5526

[LordBarbadass]

My github is terrygonguet glad to help.