Animated Pie Chart?

[Jay]

Hello

I want to draw a pie chart and animate it according to current value.

My target is like this:

 

http://codepen.io/jtarr/pen/upFGC

 

It is relative easy to implement the animation using CSS or canvas graphics

with 60fps.

 

How can I create those effect with pixijs in WebGL context?

I thought using canvas is a hurdle for 60fps in mobile device?

 

Please let me know any tips or directions.

 

Thanks.

 

[hubert]

as for quick answer

 

01. you should draw a circle on the bottom the dark brown one,

02. Add another circle of the same size on it with a mask (check out masking)

      The mask should be a triangle starting above the circle. and then going to the center, then reaching out at preferred angle and then closing with initial stroke point.

      This element probably should be in a different container in order to avoid masking other elements above the light brown circle.

03. Add a third smaller yellow circle one on top.

04. put a text element on top

 

In order to animate just manipulate the mask and the text element. You will have to compute the angle of your circle which in case of more than 45% value shoud be transformed into a polygon in order not tu cut the edges of the manipulated circle. If more than 50% put a polygon with more edges. In case of 100% just set the mask to false.

 

As for percentage just assume that 360 is the 100% and then compute the rest. 

 

So the initial line will be drawn to the center and then draw the line at the right angle out of it and close it with a couple of strokes to the initial line. Complex polygons with masking tend to be a problematics in canvas context since all has to be done without beginLine statement during drawing the line only with lineTo. In webGl they work without any problems.

 

http://www.sevenative.com

[alex_h]

You could also achieve the same effect by creating four 90 degree segments of the darker colour and placing them in front of the lighter colour with anchor points in the center of the circle. Then rotate them one by one to reveal the lighter colour behind. On completing each segments 90 degree rotation, set its visible to false. You have to do something clever with the layering when you get to the last segment, so that it then rotates away behind a duplicate segment of the lighter colour. I've used this technique before when I wanted to avoid using masks and it worked absolutely fine.

[Jay]

@hubert

Thanks for your tip. I actually tried your guide.

 

http://goo.gl/CfZASP

 

But the final quality is not good as I expected. Is there any way to set anti-aliasing for edge line?

Am I missing something?

 

@alex_h

During implement mask version I got an idea how to create pie more efficiently.

It is almost same approach with you. But I think to handle >270 degree,

I need bright segment also.

 

I'll update if I finish new approach.

I'm very eager to get 60 fps on mobile browser. 

 

Anyhow pixijs is wonderful and has great performance!

Thanks

[alex_h]

Is there any way to set anti-aliasing for edge line?

 

 

Not with the WebGL renderer due to the way the lines get drawn via the stencil buffer, see this post:

 

http://www.html5gamedevs.com/topic/8850-renderer-very-slow-on-graphicclear/#entry52539

[Jay]

Finally I got simple but better, faster pie chart.

 

http://goo.gl/mzFrB0

 

I left the link for whoever needs this.

 

Basic idea is same with @alex_h. In my case, I simply use semi-circle image

which is white foreground color. 

Then I come up with three sprites. First one is for foreground, second is for background.

And final one is used to control and shape pie by changing tint & rotation according to target angle.

 

Thanks for sharing and hinting me for all you guys.