🔒 Locked

How would a filling clock drawing algorythm work?

Started by Icebone1000 Feb 28, 2012 at 1:32 PM 5 replies 3.5k views

Original Post

Feb 28, 2012 at 1:32 PM

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)

alvaro

Feb 28, 2012 at 2:17 PM

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

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

evanofsky

Feb 28, 2012 at 2:46 PM

Like this?

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

turch

Feb 28, 2012 at 4:51 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.

Mussi

Feb 28, 2012 at 6:46 PM

Is this thread of any use to you?

slayemin

Mar 1, 2012 at 10: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;

Icebone1000

Mar 1, 2012 at 10: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!

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.