• FEATURED

View more

View more

View more

### Image of the Day Submit

IOTD | Top Screenshots

### The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

# How would a filling clock drawing algorythm work?

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

6 replies to this topic

### #1Icebone1000  Members

Posted 28 February 2012 - 07:32 AM

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)

### #2Álvaro  Members

Posted 28 February 2012 - 08:17 AM

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

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

### #3etodd  Members

Posted 28 February 2012 - 08:46 AM

Like this?

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

### #4turch  Members

Posted 28 February 2012 - 10:51 AM

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.

### #5Mussi  GDNet+

Posted 28 February 2012 - 12:46 PM

Is this thread of any use to you?

### #6slayemin  Members

Posted 01 March 2012 - 04:03 PM

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;

### #7Icebone1000  Members

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!

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.