OpenTK a simple 2d clock design in windows form C# (basic OpenTK-2)

please see first part before start it.

now at first we have to draw a circle in our glcontrol. for draw method we have to use paint method in paint event in glcontrol,  like below

 private void glControl1_Paint(object sender, PaintEventArgs e)
    {
      GL.Clear(ClearBufferMask.ColorBufferBit | ClearBufferMask.DepthBufferBit)
       drawclock();
      glControl1.SwapBuffers();
    }

void Draw_clock()
 {
 drawCircle(80);//80 is radius of the circle
 Draw_digit();
 }

For drawcircle i use following code

 void drawCircle(float radius)
        {

            GL.Color3(Color.White);
            GL.Begin(BeginMode.TriangleFan);

            for (int i = 0; i < 360; i++)
            {
                double degInRad = i * 3.1416/180;
                GL.Vertex2(Math.Cos(degInRad) * radius, Math.Sin(degInRad) * radius);
            }
GL.End;
}

now it look like that how it happen it easy.

 GL.Begin(BeginMode.TriangleFan);

this mode draw a triangle and fill it with white color using provided vertexes point, all these triangle made the circle, like triangle pizza pieces makes the circle pizza 🙂 .

if u want to know GL.Begin see here
must remember to write GL.End(); after GL.Begin(); otherwise nothing will happened and compiler cant give u error for that.
now we have to draw digit and two line for minute and hour

write simple code of normal vertex operation like that remember that the radius of the circle is 80.

  void Draw_digit()
        {
            GL.MatrixMode(MatrixMode.Projection);
            GL.LoadIdentity();
            GL.Color3(Color.Red);
           //for hour
            GL.Begin(BeginMode.TriangleFan);

            GL.Vertex2(0, +5);
            GL.Vertex2(0, -5);
            GL.Vertex2(70, 0);
            GL.Vertex2(70, 0);
            GL.Color3(Color.Red);

            GL.End();

            //for minute
            GL.Begin(BeginMode.TriangleFan);
            GL.Vertex2(+5, 0);
            GL.Vertex2(-5, 0);
            GL.Vertex2(-65, 40);
            GL.Vertex2(-65, 40);
            GL.End();
            GL.Color3(Color.Black);

            //for draw digit III
            GL.Begin(BeginMode.Lines);
            GL.Vertex2(5, 60);
            GL.Vertex2(5, 70);
            GL.Vertex2(0, 60);
            GL.Vertex2(0, 70);

            GL.Vertex2(-5, 70);
            GL.Vertex2(-15, 60);
            GL.Vertex2(-15, 70);
            GL.Vertex2(-5, 60);

            GL.End();

            GL.Color3(Color.Black);
            //for draw digit XII
            GL.Begin(BeginMode.Lines);

            GL.Vertex2(60,0);
            GL.Vertex2(60,8);
            GL.Vertex2(70,0);
            GL.Vertex2(70,8);
            GL.Vertex2(65, 0);
            GL.Vertex2(65, 8);

            GL.End();
            GL.Color3(Color.Black);
            //for draw digit IV
            GL.Begin(BeginMode.Lines);

            GL.Vertex2(10, -60);
            GL.Vertex2(10, -70);
            GL.Vertex2(0, -60);
            GL.Vertex2(0, -70);
            GL.Vertex2(5, -60);
            GL.Vertex2(0, -70);
            GL.Vertex2(5, -60);
            GL.Vertex2(0, -70);

            GL.End();
            GL.Color3(Color.Black);
            //for draw digit IX
            GL.Begin(BeginMode.Lines);
            GL.Vertex2(-75,-5);
            GL.Vertex2(-75,-15);

            GL.Vertex2( -70,-5);
            GL.Vertex2(-60,-15);
            GL.Vertex2(- 70,-15);
            GL.Vertex2(-60,-5);         

        }

here normal one vertex to another vertex connected code. for details u can see openGL similar functions for that.

After draw that we see now our output from is like below

Now our next job is to draw a line second for second and make it rotate. it is in third part.

Advertisements

About kishordgupta

A software developer
This entry was posted in C#, OpenTK, Winform app and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s