Jump to content

  • Log In with Google      Sign In   
  • Create Account

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.

  • You cannot reply to this topic
6 replies to this topic

#1 Icebone1000   Members   -  Reputation: 1093

Like
0Likes
Like

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)

Sponsor:

#2 Álvaro   Crossbones+   -  Reputation: 13368

Like
0Likes
Like

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?

#3 et1337   Members   -  Reputation: 1537

Like
0Likes
Like

Posted 28 February 2012 - 08:46 AM

Like this?
Posted Image

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

#4 turch   Members   -  Reputation: 590

Like
1Likes
Like

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:

Posted Image
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.

#5 Mussi   Crossbones+   -  Reputation: 1977

Like
1Likes
Like

Posted 28 February 2012 - 12:46 PM

Is this thread of any use to you?

#6 slayemin   Members   -  Reputation: 2652

Like
1Likes
Like

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;

Eric Nevala

Indie Developer | Dev blog


#7 Icebone1000   Members   -  Reputation: 1093

Like
0Likes
Like

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:

Posted Image
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.



PARTNERS