Hello Graphics

If you feel programming is too dry and nothing more than giving commands to a heartless terminal who is always ready to pop out an error for you, welcome to Computer Graphics, a subject which motivates you to solve pictorial and practical questions, rather than understanding theoretical or pedagogic requirements.

If you can’t make it good, you can at least make it look good. — Bill Gates

The main motivation behind this writing is to be able to visualize programs and algorithms. The need to use efficient data structures and optimize existing algorithms seems very unnatural and boring. But when you see your game/animation lagging due to a slow algorithm, enhancing it seems more instinctive. The same goes with Object-oriented programming concepts. The use of classes and objects is not really well understood, unless you are asked to make a racing game. You need different types of cars for your game, each having different properties but the same functions. Computer graphics lets you envision classes and objects from the programming paradigm, as real-world entities.

After reading this, I hope you try to find the intuition behind the CG algorithms before approaching them, so that understanding them becomes easier.

Why study Computer Graphics?

From ‘Pong’, the first computer game by Atari (1972), to ‘Uncharted 4’ (2016), computer graphics has come a long way.

LEFT: Pong — First game by Atari in 1972; RIGHT : Uncharted 4 : A thief’s End — A PS4 Exclusive 2016 game

We often forget that making Graphical interfaces was not always a ‘Drag and Drop’ feature. Even simple geometric figures such as lines, circles and curves had to be drawn using the smallest element of a screen, a Pixel.

The Pixel

The pixel (not the Google Phone) is smallest controllable element of a picture represented on the screen. To plot a pixel on the screen, we will be using the graphics.h library for C/C++.

Steps to setup graphics.h on windows

The implementation given below shows how to plot a pixel on the screen :

#include<graphics.h>

int main()
{
int gd = DETECT, gm;
initgraph(&gd, &gm, "C:\\TC\\BGI");

putpixel(100, 100, WHITE);

getch();
closegraph();
return 0;
}

Let us break up this code -

The initgraph() initializes the graphics system by loading a graphics driver from disk, and putting the system into graphics mode. Similarly, all other lines except putpixel() is just boilerplate which you will use in all CG programs. The putpixel() plots a point at (100, 100) with a white color.

This is a good time to understand the co-ordinate system followed in a PC screen. Unlike the co-ordinate system in a graph sheet, the top-left corner is considered as the origin. It can be visualised as follows —

Co-ordinate system for a PC screen

Hmm. So far so good. We have plotted our first pixel on the screen. We have seen that passing an x and y values to the putpixel() plots that point for us. So let us try and call that function a few more times, so that we get multiple points. In fact, let us use a for loop to do so. We make a variable named pos_x and iterate it from 100 to 200. So the code (except the boilerplate) gets updated as follows —

for(int pos_x = 100; pos_x <= 200; pos_x++)
{
putpixel(pos_x, 100, WHITE);
}

So what does this loop do? It plots the points (100, 100), (101, 100), (102, 100) …. till (200, 100). Its interesting, because that plots a straight horizontal line from (100, 100) to (200, 100). Using a simple for loop, we were able to plot a line on the screen. Moreover, Adding a delay() function after the putpixel() creates an animation of drawing a line.

for(int pos_x = 100; pos_x <= 200; pos_x++)
{
putpixel(pos_x, 100, WHITE);
delay(200); // Adds a delay of 200ms for every iteration
}

Exercise : Try plotting a vertical line now.

Well, we surely plotted a line. But this was a very special case. How do we plot any line given its end-points? What if the line is inclined at 30 degree? How do we tailor all these needs? Now you are fully ready to understand one of the first algorithms that you encounter in CG; Digital differential analyzer (DDA) and Bresenham’s line drawing algorithm. Rather than understanding the algorithm, try understanding why the algorithm was written that way and not any other way. This will help you understand it better.