Drawing a clock timer with a fill

Question

I'm trying to make a timer that mimics a clock, with a ticking hand. I have no problem drawing a clock texture and then a line for the hand, but I also want the space behind the clock hand to have a fill. So as time goes on, I want the clock to "fill up" starting at the origin (0:00) all the way up to the clock hand.

I basically want to do this:

What's the best way for me to do this? I have the foundation, just don't know how to add the fill part.

Answer 1

You should aproximate it building a triangle fan.

  int n=0;
  VertexPostionColor[] V = new VertexPositionColor[num_triangles+2]
  V[0] = Center;
  for (var angle = start ;angle<=end; angle += (end - start) / num_triangles)
  {
       V[++N].Position = new Vector3( Math.Cos(angle), Math.Sin(angle)) * radius + Center;
       V[N].Color = CircleColor;
  }

  Short[] Index = new Short[num_triangles*3];

  for (int i = 0; i< num_triangles; i++)
  {
      Index[i*3] = 0;
      Index[i*3+1] = i+1;
      Index[i*3+2] = i+2;
  }

  GraphicsDevice.DrawUserIndexedPrimitives(...);

If you want to get complicated using a spritebatch, you have to use a small sector texture, and draw it multiple times rotating it about the center.

this is an example, it need to be tuned to be precise.

  float SectorAngle = Mathhelper.ToRadians(10);
  Texture2D SectorTex;
  Vector2 Origin = new Vector2(SectorTex.Width/2, SectorTex.Height);
  for (var angle=start; angle<=end; angle+=SectorAngle) {
      spriteBatch.Draw(SectorTex, Center, null, Color.White, Origin, angle, scale,...)
  }

Answer 2

If you want to do it using textures, you should be able to manage it with two simple textures: a semi-circle (exactly half a circle), and a full circle.

First, draw the full circle white. Then it's just a matter of calculating how much of the circle needs to be filled.

If it's less than half, draw the half circle blue, rotated to match the "minute hand". Then draw another half circle white to cover the left side.

If it's more than half, draw the half circle blue, covering the entire right side. Then draw another half circle blue, rotated to match the "minute hand".

Once the fill is complete, you just need to draw the other clock components; the hands and border.