Fil de Fer(Fdf), the first graphical project at 42 The Network
The name of the porject is in French, which literally means in English “Iron Wire”, as the name suggests the project is about “Wireframe model”.
The goal of this project is to introduce you to graphics, and especially rendering and transformations, basically we are given a map as a file(more about it later), and we have to transform that map into a 2d graphical representation(rendering) like that:
To draw such scene, we were given a very basic graphical library to help us work with the windows and pixel drawing, for my campus, we had the choice to use an improved version of the library, which is open source and can be found here.
To complete this project, i had to go through many steps to produce the desired results, first i had to learn a bit about linear algebra(vectors, matrices, etc…), which helps in putting the pixels in their according places, after that, i had to connect those coordinates, for that we can choose many algorithms, among the popular ones were 2 algorithms, either DDA or Bresenham’s line algorithm, I opted for the latter as i found it more efficient even tough many have chosen DDA for being much simpler and straightforward, and lastly for the topping, i used linear interpolation to have the gradient effect.
Well let’s break down the process:
I- Understanding the map format.
first we are given a map with the following criteria:
• The horizontal position corresponds to x axis.
• The vertical position corresponds to to y axis.
• The value corresponds to its z axis, and an optional color(RGBA) seperated by comma.
For example:
0 1
2 3,0xFFFFFFFFwe have 4 points, from left to right and top to bottom, we are going to name them according to the alphabet.
A(0, 0, 0), B(1, 0, 1), C(0, 1, 2), D(1, 1, 3)
The point D has the optional color set to white(0xFFFFFFFF)
II- Drawing a map with no transformation
Let’s take for example the following map:
0 0 0
0 1 0
0 0 0The shape is similar to a square with one point higher in the z axis by 1, if we draw the shape without a transformation we would have something like that:
No altitude(z-axis) is shown here because we are viewing the shape from above with no transformation, so to have a better view we are going to use the transformation requested by the project’s subject, which is Isometric projection, and to do that we will first rotate around the z axis by 45 degree by using the following matrix:
And then rotate around the x axis by arctan(√̅2̅ )
After doing these rotations, we will now have a shape similar to:
It seems like a 2D shape because the point with the higher altitude meets the other points, i am going to increase the altitude, so that we can see the difference, i am going to change altitude of 1 to 2.
III- Coloring the lines
The next step is to give those lines some colors, we will use gradients, the gradient is bacically distrubting color over a segment AB, simply put, we have A of a certain color and B of another color, what we do is that we calculate the colors of the points between A and B, for example:
If A is blue and B is red, and we have one point in between, let’s call it K, it will be 1/2blue 1/2red (megenta), the following diagram illustrates better this concept:
Let’s give the point with the higher altitude a color of light blue(#5ac9ed), and the other point a goldish color(#f0c91d), the map would look like the following:
0,0x5ac9ed 0,0x5ac9ed 0,0x5ac9ed
0,0x5ac9ed 2,0xf0c91d 0,0x5ac9ed
0,0x5ac9ed 0,0x5ac9ed 0,0x5ac9edAnd the result would be similar to this:
The bonus part of this project is about giving that shape some life and interaction, we should be able to translate the shape, zoom in zoom out, rotate it around, and a bonus of your choice, for me i chose to change the altitude, here is how the end result looks like:
There are other cool scenes like the following:
You are welcome to check the code at my Github repo here.
