FDF Wireframe - 3D map rednering program.

Purpose of the project is to read a file and generate a 3D map.

Project file: FDF

Allowed C functions(2) - close(2), open(2), read(2), write(2).

Allowed C functions(3) - exit(3), free(3), malloc(3), perror(3), strerror(3).

Additional functions allowed - math library and miniLibx(library), library made by 42 students.

---

Table of Contents - Click a section to jump to it

• Cloning Repository
• Installing FDF macOS only
• Program Demo
• Program Controls
• Invalid File Error Messages
• Project Summary
  • Parsing and Storing
  • Render Map
  • Rotation Matrix
• Resources And References

Cloning Repository

git clone https://github.com/mohammadbutt/42_fdf.git

Installing FDF macOS only

make
./fdf resources/maps/test/maps/

Demo

Program Controls

Action	Controls
Move map: up down left right	⬆️ ⬇️ ⬅️ ➡️
Rotate	I J K L
ZOOM	Q A
Altitude	W S
Reset map	E
Random Color	R
Change Camera View	C

Invalid File Error Messages

The user will get one of the following error messages if the file is invalid.

Project Summary

Parsing and Storing - Source Code

Program reads a file using the function get_next_line, which I created to read a file that mimics the functionality of getline(3). Once a file is read, then it goes through several validation stages to ensure all lines or rows have the same number of elements.

If a file is valid then each row is stored as a string using the function **str_data malloc(3) is used to allocate memory to store the string and the temp_line is freed using free(3) before exiting the while loop to ensure there are no memory leaks. Since the numbers are stored as a string, these numbers are only characters. In order to convert these strings into numbers to perform arithmatic operations *ft_2d_atoi is called which takes one line and converts all of the elements of that string into numbers by using ft_atoi. String are converted into numbers for just 1 line.

To perform conversion on all of the rows, function, **str_to_int is created, which will perform this conversion on all of the lines.

Render Map - Source Code

In order to create lines, Bresenham's line algorithm is used. Using the line algorithm, lines are created vertically(down) and horizontally(to the right). This almost works, but the only challenge is that it does not create smooth edges and produces the following lines:

 _ _ _ _ _ _ _
|_|_|_|_|_|_|_
|_|_|_|_|_|_|_
| | | | | | |

To rememedy this horizontal lines are rendered as long as y is less than height of the map. And vertical lines are only rendered as long as x is less than the width of the map, which will produce the following lines which is what we wanted to create to render a perfect map:

 _ _ _ _ _ _ _
|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|

Rotation matrix - Source Code

Rotating the map is one of the useful features of the project in order. In order to rotate the map in any direction standard rotation matrix is used. Below is the rotation Matrix equation:

new_x = x cos(zθ) - y sin(zθ)
new_y = x sin(zθ) + y cos(zθ)

Thetha is replaced by the radian value or axis. For example if the map is being rotated on x_axis then we will use the below equation:

new_y = y cos(x_axis) - z sin(x_axis)
new_z = y sin(x_axis) + z cos(x_axis)

My source code rotate_matrix shows what all of the transformations look like to rotate the map on x_axis, y_axis, and z_axis. But in a nutshell when sin or cos are applied on x, y, or z, we get new x and y coordinates that creates the illusion that a map is 3 dimensional. Wikipedia rotation matrix has additional information about rotation matrix.

Resources And References

Reading Resources

0. Color Theory/Color Gradient - Wikipedia
1. Mac Virtual Key Code
2. FDF Cookbook for 42 students
3. Wikipedia - Bresenham's line algorithm - Chooses just the color
4. Wikipedia - Xiaolin Wu's line algorithm - Chooses the shade of each color
5. Bresenham's Line Algorithm - Free Code Camp
6. Rotation Matrix - Wikipedia
7. Bresenham's Line Algorithm in C
8. Isometric 2:1 Projections: Isometric Infographic Vectors
9. Military(Oblique) projection - Wikipedia
10. Mnemonics in trigonometry - Wikipedia
11. Programming Operators
12. Ternary Operator - Free Code Camp
13. Data Type Ranges - Microsoft

Video Resources

1. What are Radians
2. Brief Intro to Vectors
3. Essence of Linear Algebra 15 video series by 3Blue1Brown
4. Cartesian Coordinates in Three Dimensions
5. Rotation in R3 around the x-axis | Matrix transformations - Khan Academy
6. Rotating points using rotation Matrix
7. Rotation Matrix
8. Rotation in 3D
9. Linear Transformation - Khan Academy

Tools

1. Online Graph Calculator
2. Change colors in echo