> For the complete documentation index, see [llms.txt](https://42-guide.gitbook.io/42-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://42-guide.gitbook.io/42-guide/core-curriculum/rank-02/fdf/quick-explanation.md). # Quick Explanation ### Step 1: Understand the `.fdf` File Format The `.fdf` file contains the 3D coordinates of the landscape you need to render. Each number represents a height (z-value) at a specific (x, y) position on a grid. #### Example `.fdf` File: ```` ``` 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 10 0 0 10 10 0 0 0 10 10 10 10 10 0 0 0 0 0 10 10 0 0 10 10 0 0 0 0 0 0 0 10 10 0 0 0 0 10 10 0 0 10 10 0 0 0 0 0 0 0 10 10 0 0 0 0 10 10 10 10 10 10 0 0 0 0 10 10 10 10 0 0 0 0 0 0 10 10 10 10 10 0 0 0 10 10 0 0 0 0 0 0 0 0 0 0 0 0 10 10 0 0 0 10 10 0 0 0 0 0 0 0 0 0 0 0 0 10 10 0 0 0 10 10 10 10 10 10 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ``` ```` which produces the following: Example of rotation, translation, zoom, flattening and perspective changes ![](https://user-images.githubusercontent.com/21006147/190404352-288d7bf1-5f43-4e2d-8033-f16bca534ca6.gif) #### * Rows represent the **y-axis**. * Columns represent the **x-axis**. * Numbers represent the **z-values** (height). #### Goal: The primary objectives of this project are: * **Learning graphical programming**: Understanding how to manipulate graphical elements such as pixels, lines, and shapes. * **Handling 3D data**: Translating 3D coordinates into a 2D plane using **isometric projection**. * **Matrix transformations**: Understanding and applying transformations such as rotation, scaling, and translation on 3D data. * **Interactive controls**: Implementing user interaction for rotating, zooming, and translating the 3D view. * **Using MiniLibX**: Gaining experience with the **MiniLibX** graphical library (provided by the 42 network). * **Optimizing performance**: Managing and rendering large 3D maps efficiently. * **File handling**: Reading data from an input file, parsing it, and displaying it in a graphical interface. #### Step 1: Understand Minilibx Functions Minilibx is a small graphics library in C that allows you to create windows, draw pixels, and handle inputs like keyboard or mouse events. It’s especially useful for the **FdF (Fill The Frame)** project, where you render a 3D map onto a 2D screen. To get started, you'll need to understand a few key functions: * **`mlx_init()`**: Initializes the Minilibx library. * **`mlx_new_window()`**: Creates a new window to display your content. * **`mlx_pixel_put()`**: Draws a pixel at a specific (x, y) coordinate. * **`mlx_loop()`**: Keeps the window open and allows it to update. Before starting your project, practice these functions to make sure you're comfortable with how Minilibx works. This guy has explained minilibx library in a bestway. [**\[Link to Source\]**](https://youtu.be/bYS93r6U0zg?si=zUN_qjNeBQjoZ1zW) *** #### Step 2: 2D and 3D Waz and Formulas For your **FdF** project, you'll deal with **2D** and **3D** coordinates. Here’s a simple breakdown: * **2D Waz (Coordinates)**: In 2D, we work with (x, y) coordinates to represent a flat grid. * Example: Plotting points on a graph like (3, 2), where 3 is along the x-axis and 2 is along the y-axis. * **3D Waz (Coordinates)**: In 3D, we add a z-coordinate, which gives depth. It’s used to represent things like mountains, valleys, or any 3D object. * Example: A point might be (3, 2, 5), where 5 is the z-axis (depth). For the **FdF** project, the challenge is converting the 3D coordinates into 2D for the screen while keeping the depth (z-axis) visible. *** #### Step 3: Algorithms for Drawing Lines In **FdF**, you’ll need algorithms to draw the lines between the points (from the 3D data). Three common algorithms to do this are: 1. **Wu’s Algorithm**: Best for drawing smooth lines (anti-aliasing), but it's slower and more complex. If you want high-quality visuals, this is a good choice. [\[doc here\]](https://www.geeksforgeeks.org/anti-aliased-line-xiaolin-wus-algorithm/) 2. **Bresenham’s Algorithm**: This is faster and uses integer math, making it more efficient. It's great for performance. [\[doc here\]](https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm) 3. **DDA (Digital Differential Analyzer)**: A simpler method, but not as fast as Bresenham and not as smooth as Wu’s. [\[doc here\]](https://www.thecrazyprogrammer.com/2017/01/dda-line-drawing-algorithm-c-c.html) **Advice**: If you want a good balance of quality and speed, go for **Bresenham’s Algorithm**. It’s the most commonly used for projects like **FdF**. *** #### Step 4: Coding Process **1. Create a 2D Array** * Convert your input data (usually a string from a file) into a 2D array of integers. * This 2D array will hold the height values of your map (like a mountain range), which you'll then draw on the screen. **2. Connect Minilibx to Open a Window** * Use Minilibx to open a window where you'll draw the map. * Use **`mlx_new_window()`** to create the window and **`mlx_pixel_put()`** to draw pixels at the appropriate coordinates on the screen. Example: ```c mlx_new_window(mlx, 800, 600, "FdF"); mlx_pixel_put(mlx, window, x, y, color); ``` **3. Working with the Algorithms** * Now, implement the drawing algorithm (like Bresenham’s) to connect the points in your 2D array and render them on the screen. * You'll need to convert the 3D coordinates into 2D (projection) and then draw lines between them. **4. Functionalities (Rotation and Zoom)** * **Rotation**: To rotate your map, you’ll need to apply a rotation matrix to the coordinates. This will change the x, y, and z values of each point based on the angle of rotation. * **Zoom**: Zooming works by scaling the coordinates, making everything bigger or smaller. Multiply the x, y, and z values by a zoom factor. #### Summary: 1. Understand Minilibx and how it works. 2. Convert the data into a 2D array. 3. Use Minilibx to create a window and draw your map. 4. Implement line-drawing algorithms like Bresenham’s. 5. Add rotation and zoom for extra functionalities. The goal of this project isn’t to just finish it. It’s about learning and picking up new skills as you go. Take it one step at a time—use my code as a reference, but always experiment and make it your own. If anything unclear or you need help, feel free to hit me up! 😊\ \ [\[source code\]](https://github.com/mukhammadsiddiq/42Berlin-Guideline/tree/main/FDF)\ \ If any mistake or complicity, let me know. i will update. My Contact is In Welcome Page. IN next pages, i tried to explain main part of the project, where real math and algo lies on, before working on it, please be sure your map rendered correctly and without mistake into 2d arrray. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://42-guide.gitbook.io/42-guide/core-curriculum/rank-02/fdf/quick-explanation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.