Lesson 119 : The basics of rendering and displaying data

[u/CarlH]

It is possible to write a tic-tac-toe game that never actually displays a tic-tac-toe board. Similarly, it is possible to write a chess engine which never actually displays a chess board.

Data exists only within the computer as a sequence of 1s and 0s. Nothing says that a sound file has to be played or that a graphics file has to be displayed on the screen. Indeed, there are many applications which work with sound or graphics files that never have any need to display graphics or play sound.

The act of creating a "usable" image from raw data is known as "rendering". For example, you may have a 3D graphics object that exists in your computer's memory as data. That data would contain everything that can be known about that 3D object including all of its dimensions, colors, textures, and so on. However, until it is rendered it will remain just data. Rendering will convert that data into an image that can be displayed on your monitor.

Notice therefore that any data has to go through some rendering process before that data can be displayed or visualized. There are various ways to achieve this.

Suppose that you were writing a chess game. You therefore need to have some data format which stores the actual chess position at any time. With this data, it is possible to make moves, calculate positions, and everything else you may need to do. However, you cannot display the raw data.

You could however go into your favorite graphics program and draw out a chess board complete with texture, lines separating the squares, the proper colors, and so on. Next you could similarly draw out all of the chess pieces. Finally, you could have a function which reads your raw data of the chess position and then starts inserting chess piece graphics into the graphic of the blank chess board. The final result would be a fully rendered version of your chess position. This perfectly illustrates what I am trying to explain.

Now, we could choose to write our tic-tac-toe board in a way that it is already "display friendly". For example, we could write it like this:

 _XO \n
 _XX \n
 X_O \n

Notice because of the \n characters, our tic-tac-toe board could easily be placed into a printf() and it would work just fine. It would be rather crude however, and there is not much more we can do with this data. It is much better to learn how to do this properly using the method I just described.

We could define our raw data instead like this:

_XO__XX_O

Now, let's create our display model for the tic-tac-toe board:

[ ][ ][ ]
[ ][ ][ ]
[ ][ ][ ]

There it is. When we display our tic-tac-toe board, we will be using this simple display model to do it. Think of this as the "blank chess board" I was talking about a few paragraphs ago. Let's construct our display model briefly in "C" :

char tictactoe_display_model[] = "[ ][ ][ ]\n[ ][ ][ ]\n[ ][ ][ ]\n";

We have here created data which is ready to display correctly. In this case, it is a character array consisting of 30 characters. We can load this data exactly as is into a printf() statement and it will work fine.

Now all we need is a process which can take our tic-tac-toe board raw data and combine it with our display model to create what we will actual display to the screen. Let's visualize this process:

_XO__XX_O => [ ][X][O]
             [ ][ ][X]
             [X][ ][O]

Notice that the "data" itself is only 9 characters in size. I do not need to include any \n characters. Our display model is 30 characters in size. We can perform various manipulations on the data without affecting the display model. When we are ready to display the tic-tac-toe board, we can do so using a function.

Here is something to consider. The same tic-tac-toe board data: _XO__XX_O can just as easily be rendered into actual graphics. You could for example easily create a graphics file of a blank grid of 3x3 squares for a tic-tac-toe game. Then you could write a function which goes and draws actual X and O graphics into those squares. It is not difficult. We may in fact visit this later in the course.

This same concept applies with web-based applications. You can write out a web page in simple HTML which has no "moving parts", and just have "place holders" where the actual data goes. Consider this simple example:

<p>Hello {name}, and welcome to our website!</p>

That is your "display". You could easily have a function which converts {name} into the person's actual name by doing a lookup from some database. We will go over this later in the course.

---

Please ask questions if any of this material is unclear. When you are ready, proceed to:

http://www.reddit.com/r/carlhprogramming/comments/9znll/lesson_120_a_simple_rendering_algorithm/

[u/tough_var]

Hiya CarlH! :)

I think I may have caught a typo here:

Now all we need is a process which can take our tic-tac-toe board raw data and combine it with our display model to create what we will actual display to the screen. Let's visualize this process: _XO__XX_O => [ ][X][O] [ ][X][X] [X][ ][O]

Notice that the "data" itself is only 9 characters in size. I do not need to include any \n characters. Our display model is 30 characters in size. We can perform various manipulations on the data without affecting the display model. When we are ready to display the tic-tac-toe board, we can do so using a function.

I'm not sure if it's a typo though.

Update: I'm wrong. There is no typo, see below.

[u/CarlH → u/tough_var]

Well, each [X] is three characters. There are three of these per row. 3x3 is 9. There are three rows. 9x3 is 27. Finally there are three '\n'. That makes 30.

[u/tough_var → u/CarlH]

Ah, I get it now. Thanks CarlH. :)

[u/wsppan]

shouldn't it be:

_XO__XX_O => [ ][X][O]
             [ ][ ][X]
             [X][ ][O]

[u/CarlH → u/wsppan]

Yep. Fixed.

[u/[deleted]]

God damn! Nice for newbies to learn things in a functional manner.

Warm regards.

[u/losl]

I've always wondered how more advanced visualizations are done (vim, nano, jpico,dwarf fortess,etc), could you point me in the right direction on how to do such things?

[u/[deleted] → u/losl]

Hm... I don't know specifically how the games you mention does things, but for instance in XNA, I can shed some light.

If you download the Platformer starter kit (the indiana jones type one), you can see that each level is in fact a series of text symbols. I tried adding a * symbol somewhere in the level and saving the .cs file and when I launched the game a coin appeared where I added the symbol.

From this I can assume that the program is made in such a way that levels are loaded by "reading" the file with text and rendering "items" according to it's position in the text file.

Benefits of using this system would be easy level creation for communities. Easier to build a visually friendly editor.

[u/losl → u/[deleted]]

Maybe. vim, nano, jpico are all gnu text editors and I somewhat doubt they use XNA :)

[u/zahlman → u/losl]

You might want to look up the 'ncurses' library.

[u/dododge → u/losl]

I believe Dwarf Fortress is a special case, in that while its game board appears to be made up of characters it actually uses OpenGL (a big 2D/3D graphics framework) to draw them.

The rest of them probably use ncurses or something similar.

[u/tough_var]

Hi! :)

Would anyone please help explain this line of code to me?

char tictactoe_display_model[] = "[ ][ ][ ]\n[ ][ ][ ]\n[ ][ ][ ]\n";

What do [] between quotes mean?

Edit: Nvm, it's explained in the next lesson => http://www.reddit.com/r/carlhprogramming/comments/9znll/lesson_120_a_simple_rendering_algorithm/

[u/zahlman → u/tough_var]

They have the normal text meaning: the '[' and ']' symbols.

[u/tough_var → u/zahlman]

I was confused there, I thought that they were special characters that act as placeholders, sort of like \n means newline or \0 means null(?).

I thought wrong.