How to create a pie chart

[Alek]

Hi,

I would like to create a dynamic pie chart. Let's say something like this 

What would be the best approach? In the outcome I would like to receive separate meshes to be able to select one of them, add animation, change material and so on. I tried with csg with a cone made of cylinder but I would like to switch to something simpler.

[Pryme8]

Sounds like a fun challenge if no one else gets on it I'll whip up a demo here for that, it would not be that hard if you know how to extrude custom shapes and how to work pi calculations.   

 

If if I have time tommrow I'll make a function with arguments for the slices so you can just call one thing.

[Alek]

Thanks, Pryme8

I even thought about exporting object with a 1% slice from blender (and then rotate instances), to omit these math calculations. 

As I understand you think about something similar to this one:http://www.babylonjs-playground.com/#1EQWG8#4. but with correct calculations.

[Pryme8]

i might have time to do this tonight I'm about to do an important Skype call then I'll look into it.

[Pryme8]

http://www.babylonjs-playground.com/#1RAGWN#0
 

I was going to do a version with extrudes if I can, but I only had like 30 min's to do this trying to get it done before my girlfriend finishes dinner cause i promised Id pay her attention.

If I can pump that out really fast before she is done I will but I figured this will at least get you going for now.

***Edit beat her to it, but um it does not work... something is up with the extrude I only used them for  a limited time way back im not sure if this is the correct way to construct an extrude now, but once someone who knows better can chime in this is how a solid shape from that function would be done.

http://www.babylonjs-playground.com/#1RAGWN#1
@RaananW or maybe @Wingnut could comment on why the extrudes are not coming up but the paths work.

You might even be able to figure it out if you read the section on parametric shapes http://doc.babylonjs.com/tutorials/parametric_shapes
I just do not have time as of right now.  Sorry to get back to you so late today was busy busy busy.
also on a quick note I mentioned how you can make the gaps smaller between slices, if you like the effect you can leave it or do what i said in the comments, another option would be to add 0.5 to the 2nd to last point i think and subtract 0.5 from the 2nd point when generating the slicepaths from the j interval.

If I get some more time ill refine it for you and push a module to the BJS git with a new BAYLON constructor if approved.

[jerome]

http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#cylinder-or-cone

just use the "arc" parameter

 

http://doc.babylonjs.com/classes/2.4/MeshBuilder#static-createcylinder-name-options-scene-rarr-mesh-classes-2-4-mesh-

 http://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/#comment-106379

[Pryme8]

i never saw that before jerome thanks ill rework that to use that.

[jerome]

don't forget to read this former post also :

 

[Alek]

Thanks jerome, arc parameter is excactly what I was looking for. I played with  tessellation, which was not working for me.

[Pryme8]

Any idea why my extrude was not working  @jerome

[RaananW]

http://www.babylonjs-playground.com/#1RAGWN#2 - the shape you created had x and z defined, but you needed to define x and y (see line 69). But you pinged the right person to actually explain everything, which is jerome

[Pryme8]

http://www.babylonjs-playground.com/#1RAGWN#3
@RaananW thank you

[Alek]

Thanks Pryme8, now I give myself a time to understand what you did  Also thanks for well commented code.

[jerome]

as Raanan said, the model to be extruded should be (at least) in the xOy plane : http://www.babylonjs-playground.com/#1RAGWN#4

http://doc.babylonjs.com/tutorials/Parametric_Shapes#extrusion