<\/td><\/tr><\/table><\/p>\nSo you’re curious about the math involved in graphics programming. Well, someone<\/em> is. People ask me about this stuff now and again. But a subject like “the math of graphics programming” is large enough to fill one of those great, big reference books that nobody likes to use because they’re so heavy and they take up so much space. <\/p>\n Years ago I had a devil of a time learning this for myself. Most tutorials are dense with Greek symbols and mercilessly heavy on jargon. It’s one of those situations where you have to already understand the subject before you can comprehend the lessons to teach you the subject. So I offer my own explanation here for the curious. This won’t teach you everything you need to know, but it might help give you a frame of reference so the other lessons make sense. Or it might just be a fun way to blow five minutes. Whatever.<\/p>\n Naturally, making computer graphics starts with things that have x, y, and z coordinates. Even in 2D games. (Remember that 2D games are called this because the gameplay<\/em> is 2D. You still have backgrounds and other elements that need to be drawn in the distance. You’ve got scenery behind the main character, the game pieces, the Pokemans, or whatever else you’ve got going on there in your little game. <\/p>\n Observe programmers sometime and you’ll notice that there is no right way to do something, only a dozen wrong ones with varying drawbacks and annoyances. In 3D, one of those annoyances is in deciding what x, y, and z mean<\/em>. X is the one variable we mostly agree on. X is for east \/ west positioning, although nobody can say for sure if positive x should go east and negative x should go west, or the other way around. It gets even trickier with y and z, since we can’t agree on which one is up and which one controls north \/ south movement, and which way they point. <\/p>\n These distinctions are not meaningless. Even in a game where the player doesn’t have a sense of which way is objectively “up”, the level designers had one in mind when they built the thing. Even if the player doesn’t think of the world in terms of up \/ down, left \/ right, the artists and designers did, if for no other reason than they needed a common language with which to discuss their work.<\/p>\n If you’re writing a game, it’s very, very common to have some sort of variable to hold these three values in one handy package. Confusingly, this package is usually called a vector. (It’s been called a vector in every project I’ve worked on that had<\/em> a name for it.) This is confusing because x, y, z might be used as a vector or as a position. But I suppose “vector” is a better name than “three numbers thing” or “ecks why zee” or even “Donald”. <\/p>\n So drawing a gameworld involves setting up some kind of space with some agreed-on orientation. Then you need to make 3D stuff move around in that space. For that we need a Transformation Matrix<\/strong>. It might sound like some techno-babble made up by the Wachowski Brothers, but it’s a real thing. “Transformation” for changing a set of numbers into another set, and “matrix” because we use a grid of values to do it. <\/p>\n So we’ve got some geometry. We’ve created this cool 3D model of the player’s avatar. We’ve got all these 3d vertex positions that define the shape of this character. His head is a box, which has 8 corners. We draw a pair of triangles (in modern graphics, everything is always triangles – even rectangles are made from pairs of triangles) for each face of that cube. So, 12 triangles in all. The body is another cube, each of the arms is another, and the legs are two more. The Minecraft Guy is made from six cubes, which means means 72 triangles, which means 48 total vertex positions. We can just send those positions off to be rendered and call it a day. <\/p>\n Except, players are notoriously impatient. As nice as your model is, sooner or later these brats are going to want to move that guy around<\/em>. Great. Thanks players. So the player tries to walk forward, or maybe turn to one side, and suddenly we’ve got to do something to this 3D character to reflect that. For that, we use the Transformation Matrix, which looks like this:<\/p>\n This grid of numbers allows us to transform<\/em> the 48 positions from local-space to world-space, which is programming talk for “move that guy around”. <\/p>\n It works like this:<\/p>\n The first row is for calculating our x position. Multiply our current x times the value in the first box. Multiply y times the value in the second. Multiply z times the value in the third. Now add those three numbers together. That will be the new, translated x position.<\/p>\n Similarly, the second row is for calculating y. Multiply our current x times the value in the first box. Multiply y times the value in the second. Multiply z times the value in the third. Now add those three numbers together. That will be the new y position.<\/p>\n Finally, the last row is for calculating z. Multiply our current x times the value in the first box. Multiply y times the value in the second. Multiply z times the value in the third. Now add those three numbers together. That will be the new z position.<\/p>\n If you are very clever you will notice that I just did:<\/p>\n x = x * 1 + y * 0 + z * 0<\/tt><\/p>\n And if you’re super-clever and have a bit of algebra, you might notice that the above operation does precisely nothing. The value of x will not change at all. Like the famous cheese shop sketch<\/a>, I’ve just deliberately wasted your time. Likewise the second row will do a bunch of math and set the value of y to what it was when you started, and the third row will work out that z should be… z. Hm.<\/p>\n The matrix I gave above is called the “identity matrix”. When the grid is all zero except for a diagonal of one, then the output is going to be the same as the input. Don’t worry, the computer doesn’t mind the senseless work.<\/p>\n But if we change the matrix to this:<\/p>\n
<\/td><\/tr>It’s a 2D game, but there’s still depth as far as the programmer is concerned.<\/td><\/tr><\/table><\/p>\n 
<\/td><\/tr>In Child of Eden, you don’t really have a sense of direction. But the designers did.<\/td><\/tr><\/table><\/p>\n 
<\/td><\/tr><\/table><\/p>\n\n
\n 1<\/td>\n 0<\/td>\n 0<\/td>\n<\/tr>\n \n 0<\/td>\n 1<\/td>\n 0<\/td>\n<\/tr>\n \n 0<\/td>\n 0<\/td>\n 1<\/td>\n<\/tr>\n<\/table>\n
<\/td><\/tr><\/table><\/p>\n
<\/a><\/td><\/tr><\/table><\/p>\n