Raylib Tutorial 01: Drawing basic shapes - Pixel and Line

In the previous post, we learned how to display a window using the game programming library raylib. But, that is no good in itself especially if your goal is to make video games. To that end we should be able to show some thing inside the window. Please keep in mind that understanding these basics is crucial to build a solid foundation. 

So, this time we will be exploring various ways of drawing basic geometric shapes using this liberary. Let us start by drawing a single pixel. Type the following line after the 'ClearBackground()' function call.

And that is all you need here. you can run your code after this by pressing F6 key (default). In the window, you will be able to notice a tiny white pixel surrounded by dark gray.

Alternatively, we can pass the co-ordinates in the form of "vector". For now, don't worry about what a vector is. Just know that it is a mathematical concept used to indicate location data. Here is our new code.

Notice the double forward slash infront of previous code. It means that this line is now a "comment". Anything that is a comment will be ignored by the computer although the real purpose of comments is to help the human programmers understand what a piece of code is supposed to do. Keep in mind that you have to first declare a Vector2 variable 'pos' before being able to use it.

Now instead of single pixel, let us draw a straight line. A line on a computer is made up of many pixel arranged one after another. Just like in geometry, It is made of points. But, thankfully, we don't have to draw every single one of those pixels separately. Instead we are going to write the position of two different pixels and the computer will draw smallest straight line between them. 

Off course we can again use vector draw to draw the line but we are going to need two vectors instead of one.

And if we want to increase the thickness of our line then that must go before the color value as a floating point number. This time 'DrawLineEx' function will be called.

Similar values can be passed to the 'DrawLineBezier' function to draw a curved line.

The result of the last piece of code should look something like this.