Making Arcs and Pie Charts - GiderosSDK

It almost feels like long long ago, approximately 2009/2010 when I had created a sample video on how to create Arcs and flood fill using CoronaSDK, the site was on Posterous and now that Posterous has shut down, those files are all lost. However I recently saw another library that created Pie Charts. It was interesting to see the way it was done and interestingly indeed

The code is for CoronaSDK and is done quite cleverly using polygon masks created dynamically on the fly. The only problem, it did not work, threw errors when run. That is the worst thing a library can do, Not work.

Going back to the basics of Pie Charts, they were actually drawn, I can recollect typing several lines of code from books (when I was in school) to see the code transform into wonderful lo res graphic objects like Bar Graphs, Pie Graphs, etc. This was using the BBC Micro, ZX Spectrum and the PC (writing it in C using Turbo-C.

Thankfully even though the technology is changing rapidly, the basic fundamentals of things are still the same. Though there are debates on should a circle have 2 Pi radians or 1 Tau radian. Debates on simplifying geometry with using a new constant Tau which is 2Pi, so forumals would change from 2*Pi*R to Tau*R, easier to remember and understand. We won't get into that and nor would we debate on which is better, it is not for this article.

Gideros Line Drawing

Gideros has a wonderful feature of drawing lines and creating shapes from these lines, this gives it the advantage over other competing products with the fact that these line drawings (no puns) can form better shapes. So Pie Charts are the easiest to create with Gideros SDK.

Here's a video of a Circle expanding from 0 degrees to 360 degrees. Though it looks psychedelic, the idea behind that is that each time it updates, the fill color is being changed and you can see how fast that is. Add a couple of these with the correct percentages, you have a pie chart.

How is the pie chart created, with lines, the curve of the outer circle is drawn as a series of small little lines and then joined with the center to create a slice.

Show me the code


That is exercise for you, since we get everything if we type it into google, we have forgotten the art to learn, we simply do not learn. Do it yourself and you will definitely learn. You *might* thank me someday for it.

The video for you to enjoy till then.

Some reading


Popular Posts