Fundamentals of Computer Graphics
 |  SelfCAD University

 

Computer graphics refers to the drawing or creation of images in the computer screen. The details of the image created in your computer is stored in the form of digital information. Because it's digital information, it can easily be changed, scaled, rotated, and transformed into many ways and saved.

How does computer graphics work?

Have you ever seen a body or brain scan and wondered, how do doctors with the help of machines produce these data? Or maybe you’ve seen those motion pictures and special effects in televisions and wondered how all these things are created or generated? All of these are how computer graphics technique is applied in real life. It turns complex scientific tasks into everyday tasks that everyone can understand very well and easily.

 

Computer graphics work by creating, storing, and manipulating images. It’s a wide topic that can be applied in different fields like animation, graphics design, 3d modeling, pixel art, and many others. Each of these fields has a way in which computer graphics is done, however, there are some commonalities in their concept.

 

Generally, your computer can only show 2D colors in the form of pixels, but you have a few ways of giving instructions for what to color on each pixel on your screen.

 

But what are pixels?

 

Pixels are a set of dots that are tiny. They are the points a digital screen can visualize as well as color. Computer monitors can support up to 16,000,000 colors and each of its pixels can even have different colors. This scenario generates very interesting photography. Through 2D and 3D editors, images can be enhanced to look much better than the original image taken using a professional tool. The technique used here is image processing.

 

For images to be drawn on the computer screen, two main techniques are used. And these are Vector and Raster graphics. 

 

Vector graphics

Vector graphics is a technique of telling the computer on which pixels of the screen needs to be painted. In other words, it’s a way of creating images using curved and straight lines called vectors.

Instructions given to the computer in vector graphics are in the form primitives or Building blocks unlike in raster images that we shall look at. Large parts can easily be described using fewer details. This is because the size of the image isn’t related to the size of the file.

Raster Graphics

Raster graphics is another technique used to represent images in computers. The images used in raster graphics are in png and jpg format. Raster image editors and digital cameras compile pixels data into small files. This is important as less storage is occupied on hard-drive and memory and loading time is reduced too. 

.png and .jpg files are usually recommended as most computers know how to open and process these types of files. When these images are loaded on the computer, they are unpacked and the instructions for each pixel are read and the same colors are painted on the computer screen. The original image is only used to give instructions on what the computer needs to paint on the screen but isn’t seen itself.

The only difference between vector and raster graphics is that, in vector, an image is drawn using curved and simple straight lines. But in raster, pixels are used in creating the image.

There are modern computers that even allow one to create images using these two techniques. This is important as some tasks might require one to switch from one technique to another and even some images require one to mix both vector and raster graphics.

Having looked at those two techniques and known how images are displayed on computer screens, let’s now have a look at how digital screens work and how images are displayed on them. A good example of a digital screen is the LCD advertisement screens you usually see in the streets.

 

How do digital screens work? 

content image

All the digital screens have some amount of pixels. All the pixels accepts RGB color and each has an XY position. The number of pixels a computer screen has determines it’s screen resolution. For example, my computer has a Screen height of 864 pixels and 1536 pixels in width, and this can be interpreted as 1536x864 pixels in resolution. That is I have 1,327,104 pixels on my screen in total.

 

One might wonder what happens when there is a mismatch between the number of pixels needed to color the computer screen and the number of pixels found in the image? To answer this, you need to understand that computers are great in reducing the size of an image. So when a small image is loaded to a large screen there are always challenges. When the size of the image is increased, for example by zooming, it looks blurry this is because of empty pixels created. This is one of the great challenges faced by web developers as they need to load images nicely as well as ensuring that the page loads faster. To solve these issues, most developers usually create several sizes of images and the correct one is loaded based on the size of the screen.


 

In addition to the above challenges, there is also another issue. That is, creating digital images using only pixels is usually tedious. These challenges triggered the need for SVG (Scalable Vector Graphics). You may wonder what SVG is?

 

SVG

SVG is the standard file format used in graphic applications and modern web browsers. Scalable Vector Graphics uses markup language which the computer translates to pixel by pixel. 

 

SVG files can be scaled by changing the height and width parameters and the file size isn’t changed unlike in raster image where the file size usually changes as it entails removing or adding pixels.

 

Types of primitives in SVG

There are 6 types of primitives in SVG. These include:

 

1. A Vertex - A vertex is the smallest point in vector graphics that is used to describe a drawing. Sometimes a vertex is called a vector because it also includes direction (vector)  besides the RGB color and XY positions

2. Lines - They are 2nd level primitives and they take the first primitive and extend to the new building block that combines two vertices.

3. Rectangle - A Rectangle is made of four lines and it forms the 3rd level. 

4. Arcs and Circles - Almost the same to lines but the difference is, when creating circular shapes from vectors, they use trigonometry math functions.

5. Splines - Splines are made of a set of arcs and they make up the 3rd level.

6. Custom shapes - You can create any custom shape using a combination of all the above types and describe them as a path, Paths is the way you can start drawing complex shapes.

 

Benefits of using SVG

  1. Much useful in websites

 

SVG is much useful in drawing basic images for websites as one can use just a few lines to draw large parts unlike in raster that involves a lot of work on pixels.

  1. Used by Designers 

Using arcs, splines, and lines designers can quickly trace images smoothly. The images traced are accurate and editing basics outlines and basic shapes are also easier.

 

  1. Developers

In our Online 3D Modeling article, we’ve described how browsers have rendering engines. Those engines are responsible for rendering both vector and raster graphics in the browsers. This is important as it helps the developers to save time when programming. 

Let’s now learn about the applications of computer graphics in real life.

 

Applications of Computer Graphics

  1. Entertainment

Computer graphics are used in creating cartoon animation films, video games as well as television shows.

  1. Education

Models can be created using computer graphics. These models can then be used to teach a variety of concepts and fundamentals.

  1. Image processing

It’s used in editing and processing images to be used in various places.

  1. Medical imaging

Computer graphics are used in generating body and brain scans.

  1. Graphical interface

It’s used in creating environments where everything can be automated.


 


Do you have any questions about the article? Have any thoughts that you'd like to share with others? Do you think something should be added or changed? Take part in the discussion in the thread dedicated to this article by clicking on the button down below!
Take Part