What is computer graphics?
A set of computational methods and techniques for the representation of a graphical form, through a computer, of objects in a world, whether real or virtual.
This implies:
- An internal model of this world to be represented
- A set of transformations to represent this model on a computer output device (video, plotter, etc)
History
The detailed and realistic graphical representation of models in a virtual world emerged with the need to replace the drawing board. In the late 1950s and early 1960s, mainly in the automobile industry, there began to be fierce competition among car manufacturers, where virtually all manufacturers were forced into each of their lines (luxury, large, medium , small, etc) release about 2 models per year. That means every car company. If we only think about the modeling form of the time, we needed to make detailed sketches on paper and then create models either in clay or in wood (including full size) and from there the real car was built, changing details according to the wishes of designers.

Each clay model took around 3 months from the original concept art to the presentation of the model to the designers. This was too long, a problem for the industry at the time, and motivated the emergence of the Computer Aided Design - CAD (Computer Aided Design).
An example of software created to make such models is IBM Catia:

The advantages of using computation to make these models quickly became obvious. On paper you can even model a gear, but you can't predict its behavior, while computing allows this prediction.
Vector Displays
The first devices developed to represent graphic objects were vector displays (random scan displays). They had no video memory, each object was drawn separately by the video cannon and the cannon had to redraw the entire screen every time.

The "ray" (the accelerated electron) fired by the cannon excites the match, which lights and shines, and depending on the impurity, the color of that glow changes.

Your old television works by following the same principle, but drawing the items line by line, not randomly like the display above.
This display model led to the creation of a file called Display File, which is a list of all objects constantly redrawn on the screen. This list was traversed by an algorithm, which read it and drew each object on the screen. That's how computer graphics worked in the 1960s. The infinite loop concept that existed before still exists, even though it is used today in different ways.
As with the width of Roman roads and the width of the chassis of automobiles, the Display File data structure is still used to store objects in more modern displays.
A Raster Scan Display is a different type of display where the cannon always does the same scanning operation as the cannons of old tube TVs (TRC) which drew the same frame 30 times per second(30 Htz) . In computers the frequency was higher: 60 Hz.

Even though they have similarities, tube TVs received the images from a device called a telecine, which converted signals from cassette tapes or other forms of storage to the frames shown to the user, while on the computer, the process was a little different. As computer memory became more payable, a part of the memory was used as video memory (Frame Buffer for the intimate). This memory is used to store an array of pixels, which is listed after the hardware reads the video.
The transmission of this data was done using VGA cables and it still works that way, even if you use the VGA input of your LCD monitor at home, you are sending cannon movement commands to the monitor, which interprets and converts it into a digital signal (In addition, as this process is not the best possible, it is always recommended to use the digital input instead of the analog one).
Display File representation in the video (Frame Buffer)
It's a process performed by the operating system and the machine's hardware (a little each), such as reading and writing to video memory, graphics acceleration, reading objects in the form of pixels, all of this is done at a low level and you won't need to worry a lot about it.
The viewport transformation is a very interesting part, and partially accomplished by the graphics system. Look at the image below:

Imagine that in my video I have a bunch of pixels:

And a series of objects inside a display file to be shown in this pixel frame:

As my world can be a gigantic thing that might not even fit on my computer screen, the first thing I'm going to do is define the cutout of the world I'm going to look at (we call this cutout Window, a "window to the world"), and that happens even in 2D. The best way to think about this window is to see it as a window that goes over the world, where objects will be positioned using the world coordinate system (Xw, Yw), which will represent any measurement defined by the user. If it's an architectural project, it can be in centimeters or meters, if it's an automobile project it can be in millimeters, if it's on a city map it can be in kilometers, if it's a circuit board project it can be in a fraction of millimeters, regardless, the application will have a pattern, but in practice it will just be a Cartesian coordinate system.
The window also has the characteristics, in addition to being a cutout of a 2D world, being represented in a Cartesian coordinate system and having a variable size (zoom) and a variable position (navigation). We can keep it inside the display file as a structure that won't be rendered on screen, but will represent the limits of what will be drawn.
By the time we move this to the frame buffer, we will have a surprise, including that it was discovered in 1932, when the BBC in London was experimenting with the first experimental TV broadcasts, and they needed to define how the screen cannon needed to work, to that the signals were transmitted via radio waves to be shown on people's TVs. At that moment, they defined that it would be shown in the same sense as one reads a paper.
That is, the point {0, 0} is located at the top left point, and increasing the Y will make the object drop down (a little counterintuitive, but ok), and this pattern is still used today. From there you change the system to show the objects in the scale you choose.

The viewport is another data structure on our screen, a global rectangle, which is not inside the display file, and which gives the graphic resolution of the graphics system at that moment. If we take into account the P5 editor shown below, for example, the viewport would be the black area where the game is rendered.

When we are programming, we place a graphical object on the screen, commonly called canvas or subcanvas (a canvas), and the viewport will be the area where the programmer decides to draw within that canvas.
The window will be represented by a data structure, with the options:
- Xwmin
- Yummin
- Xwmax
- Ywmax
While the viewport will be represented by another data structure containing:
- Xvpmin
- Yvpmin
- Xvpmax
- Yvpmax
Another way to see it would be the window being the representation of what will be drawn in the viewport. If we decrease the size of the window we will have the effect of zooming in, if we increase the size we will zoom out, if we move the window we will see other parts of the world, and so on. When we go to 3D the window will be what you will be looking at.
The following formula represents the viewport transform:

As you can see, Xvp is a simple rule of three, while Yvp has some slight differences to reverse the axis and correct object placement that was shown earlier. Most formulas and details applied to computer graphics need simple math formulas passed during elementary and high school.
And so? Did you already know all this? Tell me there in the comments. In the next guide, we'll start programming objects on a canvas using the p5 library.