# How would a filling clock drawing algorythm work?

This topic is 2481 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Im not going to implement this right now, but the possibility poped on my mind and Im curious..
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)

##### Share on other sites

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

I agree. Can you post an image of what you have in mind?

##### Share on other sites
Like this?

I've used the pizza / triangle fan method you suggested. Looks fine with enough triangles.

##### Share on other sites
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.

##### Share on other sites
Is this thread of any use to you?

##### Share on other sites
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; 

##### Share on other sites

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!

1. 1
2. 2
Rutin
20
3. 3
4. 4
A4L
15
5. 5
khawk
14

• 13
• 26
• 10
• 11
• 9
• ### Forum Statistics

• Total Topics
633738
• Total Posts
3013616
×