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

Share this post

Link to post
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.

Share this post

Link to post
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...

Share this post

Link to post
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 :)

Share this post

Link to post
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 pixi.js@4.8.6 so I'll use this version for a while 😉

Thank Ivan, you're incredibly helpful 😄👍

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.