**4**

# How would a filling clock drawing algorythm work?

###
#1
Members - Reputation: **1665**

Posted 28 February 2012 - 07:32 AM

Imagine a HUD with a clock (circle) that starts getting filled up, so say 25% filled would be a 1/4 "pizza" like filled...

How can this be donne? at first I was thinking on filling it smoothly(each frame calculates the new fill amount), instead of creating a zillion sprites(witch maybe is really the best option..I dont know)..

So I imagine an algorithm that from the center point calculates the new pizza size, the problem is the pizza cant be a triangle, it must be a triangle fan with a given smoothness param(how many triangles)..The algorythm is just an procedural geometric circle drawing one( but the last triangle will not be the exactly size of the alredy donne ones)..

And how would you color it, say from starting pizza blue and interpolating it to orange(from lateral of a pizza to the lateral of the other pizza)? If I have a texture with the filled circle, would it be as easier as creating the triangle fan with its UVs? Anyone with a snippet? ;D

(this would be so easier to explain with an image)

###
#4
Members - Reputation: **590**

Posted 28 February 2012 - 10:51 AM

There are 8 slices, so each triangle is 12.5%. If you want to draw 68% of the image, draw the first 5 tris fully (68 mod 12.5) and figure out the position of the corner vertex in the 6th tri (cos of the angle you want to draw * 1/2 the length of the full square). The u/v coord is proportional to the full length of the segment.

You only need one alpha-only texture for the shape, and then you can use different texture for the color.

###
#6
Members - Reputation: **5090**

Posted 01 March 2012 - 04:03 PM

The basic idea is to find a center position for your pie fan. Every triangle will have one of its verticies at this center position. Then, you want to be able to create a function which accepts a percentage value (0->100%) and figures out from there how many triangles to draw and where they should be placed. You may want to use an angle or radian value as an alternative (or overloaded member function). You'll also want to feed in the radius to indicate how large your pie should be. After you have all of this information, it's just a matter of using simple trigonometery to figure out where to place the other two verticies for your triangles.

It should look something like this:

Vert0 = new Vector2(center); Vert1.x = center.x + Math.Cos(theta) * Radius; Vert1.y = center.y + Math.Sin(theta) * Radius; Vert2.x = center.x + Math.Cos(theta + stepsize) * Radius; Vert2.y = center.y + Math.Sin(theta + stepsize) * Radius;

Eric Nevala

Indie Developer | Dev blog | Twitter | Unreal Engine 4

###
#7
Members - Reputation: **1665**

Posted 01 March 2012 - 04:12 PM

If you use an texture with an alpha channel, you just need to draw a few triangles in a triangle fan:

There are 8 slices, so each triangle is 12.5%. If you want to draw 68% of the image, draw the first 5 tris fully (68 mod 12.5) and figure out the position of the corner vertex in the 6th tri (cos of the angle you want to draw * 1/2 the length of the full square). The u/v coord is proportional to the full length of the segment.

You only need one alpha-only texture for the shape, and then you can use different texture for the color.

This is great! Thanks.

Is this thread of any use to you?

Yes, very!

You can do this pretty easily with primitives. If you're still using .NET 3.5, you can use a Triangle Fan. If you're using .NET 4.0, the triangle fan is gone so you can only use triangle lists or triangle strips (more verts, yuck!). The coloring can be accomplished by using vertext colors. I created a very similar project to show days, hours, minutes, and seconds with four pies. If you include enough triangles, you can create a circle ;)

The basic idea is to find a center position for your pie fan. Every triangle will have one of its verticies at this center position. Then, you want to be able to create a function which accepts a percentage value (0->100%) and figures out from there how many triangles to draw and where they should be placed. You may want to use an angle or radian value as an alternative (or overloaded member function). You'll also want to feed in the radius to indicate how large your pie should be. After you have all of this information, it's just a matter of using simple trigonometery to figure out where to place the other two verticies for your triangles.

It should look something like this:Vert0 = new Vector2(center); Vert1.x = center.x + Math.Cos(theta) * Radius; Vert1.y = center.y + Math.Sin(theta) * Radius; Vert2.x = center.x + Math.Cos(theta + stepsize) * Radius; Vert2.y = center.y + Math.Sin(theta + stepsize) * Radius;

Thanks for the insight and snippet!