DEV Community: IshaqKassam

Drawing a Crescent Moon with OpenGL - GLFW/GLEW C++

IshaqKassam — Wed, 10 Nov 2021 11:27:26 +0000

This is the 3rd article on OpenGL, drawing 2D objects in OpenGL using c++. If you haven't been following through, here is the first article where we started drawing a circle in OpenGL:

Drawing a Circle using OpenGL - glfw/glew c++

IshaqKassam ・ Nov 8 '21

#cpp #opengl #glfw #glew

In this article, we are going to draw a Crescent Moon using the concepts of circle. We'll be using 2 Circles, with different fill colors, to give us the Crescent moon effect. Let's look at the code for circle:


void drawCircleFill(float cx, float cy, float r, int num_segments)
{
    float theta = 3.1415926 * 2 / float(num_segments);
    float tangetial_factor = tanf(theta);//calculate the tangential factor 
    glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
    float radial_factor = cosf(theta);//calculate the radial factor 

    float x = r;//we start at angle = 0 

    float y = 0;

    glBegin(GL_POLYGON);
    for (int ii = 0; ii < num_segments; ii++)
    {
        glVertex2f(x + cx, y + cy);//output vertex 

        float tx = -y;
        float ty = x;

        x += tx * tangetial_factor;
        y += ty * tangetial_factor;

        x *= radial_factor;
        y *= radial_factor;
    }
    glEnd();
}

We'll call the method twice, to give us 2 circles, giving them different positions and color, to give us the desired crescent.

Let's call the function in the main() as below:

glColor3f(0.8f, 0.6f, 0.2f);//golden color
drawCircleFill(500, 400, 40, 360);

glColor3f(1.0f, 1.0f, 1.0f); //white
drawCircleFill(525, 410, 40, 360);

Notice how the glColor3f method works. If defined, the method implements the color to all the renders below the line, until reset. So the first Circle drawn takes the golden color, and the second Circle takes the color white. You can change the color of the second Circle to match the background, to attain the desired Crescent figure.

That's it for this article, see you in the upcoming!

Happy coding!

Drawing a Semi-Circle using OpenGL - glfw/glew c++

IshaqKassam — Mon, 08 Nov 2021 15:39:31 +0000

In this article, we are going to draw a semi-circle using OpenGL, glfw - c++.

I'll be referring back to the previous tutorial: link here:

Drawing a Circle using OpenGL - glfw/glew c++

IshaqKassam ・ Nov 8 '21

#cpp #opengl #glfw #glew

Before going in to the details, locate the first line in the drawCircle function and remove the * 2 so that you have this:

float theta = 3.1415926 / float(num_segments);

In mathematics, a full circle, having 360 degrees, can be represented in Radian measure as 2 PI. Simple logic then tells us that 180 degrees is simply PI. Hence, in the code, to convert the full circle into a semi circle, all we did was to remove the * 2.

Reading more on Radian measure and deeper concepts might help, but I hope this simplistic explanation helped.

Happy coding!

Drawing a Circle using OpenGL - glfw/glew c++

IshaqKassam — Mon, 08 Nov 2021 11:44:42 +0000

Hoping that you have already setup glfw & glew, and are ready to learn how to draw 2D shapes, let's dive straight into this. In this article we are going to learn how to draw a circle in openGL using glfw, c++ language.

Here is the code:


void drawCircle(float cx, float cy, float r, int num_segments)
{
    float theta = 3.1415926 * 2 / float(num_segments);
    float tangetial_factor = tanf(theta);//calculate the tangential factor 

    float radial_factor = cosf(theta);//calculate the radial factor 

    float x = r;//we start at angle = 0 

    float y = 0;
    glLineWidth(2);
    glBegin(GL_LINE_LOOP);
    for (int ii = 0; ii < num_segments; ii++)
    {
        glVertex2f(x + cx, y + cy);//output vertex 

        //calculate the tangential vector 
        //remember, the radial vector is (x, y) 
        //to get the tangential vector we flip those coordinates and negate one of them 

        float tx = -y;
        float ty = x;

        //add the tangential vector 

        x += tx * tangetial_factor;
        y += ty * tangetial_factor;

        //correct using the radial factor 

        x *= radial_factor;
        y *= radial_factor;
    }
    glEnd();
}

The function above can then be called in the main() function as such:

drawCircle(250, 250, 100, 360);

To change the circle color, you can use the glColor3f() method which takes in 3 parameters, for the RGB values.

Add this line before calling the drawCircle function

glColor3f(0.0, 0.5, 0.5);