Jump to content

Graphics#arc has weird artefacts when chained


Recommended Posts


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`...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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)


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 ??

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...