How To Create A 2-Dimensional Object (Triangle)

What Will I Learn?

• You will learn about 2D object
• You will learn about C++ programming
• You will learn about how to create 2D object

Requirements

• You need a knowledge about 2D object
• You need a knowledge about C++ programming
• You need to know how to build a 2D object

Difficulty

• Intermediate

Tools

• Visual Studio Code

Tutorial Contents

Today I will post a tutorial about how to create a 2D object . The main requirement is you have to have the Visual Studio Code or other open source applications. Before we step into the tutorial, I'll explain the 2D concept first.

2D objects are formed by a set of lines, where every single line is formed from the connection of two points. One point consists of horizontal coordinates and vertical coordinates, or can be written in (x,y) format. And the function of the (x,y) coordinates is to determine the position where the point is located. Where x is the horizontal coordinate, whereas y is the horizontal coordinate.

And for this time, I will show how to create a 2D triangle object. Before that, you must know the coordinates to build the shape of the triangle. For example, we will try to build a triangle with the coordinates as shown below.

Explanations:

• Point A has coordinates (100,100)
• Point B has coordinates (300,400)
• Point C has coordinates (500,100)

Then, we can directly practice it by using C ++ programming. And you can follow the syntax below, the syntax is also equipped with an explanation, so it will facilitate you in learning and doing analysis.

#include 

The above syntax serves to declare headers to be used in C ++ programming. Commonly used to perform input and output on the program

#include 

The above command is used for mathematical operations. So it is perfect for our tutorial this time.

#include 

The above command serves to call the function of openGL, or commonly used for graphical purposes. Either for 2D or 3D graphics, the openGL function should still be used.

typedef struct
{
    float x,y;
} 
point2D_t;

Here is the declaration of the variables x and y. Which will be used as coordinates (x, y).

void userdraw(void);

The function is to call userdraw function.

void drawDot(point2D_t p)
{   
    glBegin(GL_POINTS);
    glVertex2f(p.x,p.y);
    glEnd();
}

The above command serves to do the depiction of the dots.

void drawLine(float x1,float y1,float x2,float y2)
{   
    glBegin(GL_LINES);
    glVertex2f(x1,y1);
    glVertex2f(x2,y2);
    glEnd();
}

The next command serves to perform lines drawing.

void drawLine(point2D_t p1,point2D_t p2)
{
    drawLine(p1.x,p1.y,p2.x,p2.y);
}

After that, the above syntax has a function to connect the dots. So in this process will produce a line.

void drawPolyline(point2D_t pnt[],int n)
{
    int i;
    glBegin(GL_LINE_STRIP);
    for(i=0;i<n;i++)
    {
        glVertex2f(pnt[i].x,pnt[i].y);
    }
    glEnd();
}

The above command serves to draw an open curve or named as polyline.

void drawPolygon(point2D_t pnt[],int n)
{
    int i;
    glBegin(GL_LINE_LOOP);
    for(i=0;i<n;i++)
    {
        glVertex2f(pnt[i].x,pnt[i].y);
    }
    glEnd();
}

While the above command is used to draw a closed curve or polygon.

void setColor(float red,float green,float blue)
{
    glColor3f(red,green,blue);
}

Is the command to declare the red, green, blue (RGB) color.

void userdraw(void)
{
    point2D_t segitiga[3]={{100.,100.},{300.,400},{500.,100.}};
    setColor(0.,0.,1.);
    drawPolygon(segitiga,3);
}

It is a command to draw a triangle shape as we wish.
Here we use a segitiga[3] array to hold each value of the triangular coordinates.
For the value, we just need to fill in the corresponding value as in the triangle image above.
Then the command setColor(0., 0., 1.) serves to give the blue color on the triangle line.

void display(void)
{
    glClear(GL_COLOR_BUFFER_BIT);
    userdraw();
    glFlush();
}

This syntax used to call the userdraw() function to be displayed as output.

void main (int argc,char **argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
    glutInitWindowSize(640,480);
    glutInitWindowPosition(100, 150);
    glutCreateWindow("Segitiga 2 Dimensi");
    glClearColor(1.0, 1.0, 1.0, 0.0);
    gluOrtho2D(0., 640., 0.0, 480.0);
    glutDisplayFunc(display);
    glutMainLoop();
}

The last command is as main function. This is where we can set display mode, windows size, window position, window title, and display function call.
So the results will be displayed.

For the result will look like the following picture.

And for the full syntax, you can download it here

Hopefully this tutorial is useful for all of us.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---