{"id":22509648,"url":"https://github.com/yettabaa/fdf","last_synced_at":"2025-10-10T17:08:25.094Z","repository":{"id":263691788,"uuid":"581559741","full_name":"yettabaa/FdF","owner":"yettabaa","description":"FDF is a 42 school project focused on 3D programming and graphics rendering. It involves creating a wireframe model from a 2D map, applying transformations like rotation, scaling, and projection to display the model in 3D. The project aims to develop skills in handling algorithms, mathematics, and computer graphics concepts.","archived":false,"fork":false,"pushed_at":"2024-11-21T01:10:23.000Z","size":26194,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T00:28:14.505Z","etag":null,"topics":["1337cursus","1337school","2d-3d","42","42cursus","c","fdf","fdf-1337","fdf-42","mathematical-expressions","matrices","matrices-transformation","minilibx","mlx","mlx42","transformation"],"latest_commit_sha":null,"homepage":"","language":"C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yettabaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-23T14:50:10.000Z","updated_at":"2025-02-04T00:14:37.000Z","dependencies_parsed_at":"2025-03-28T00:37:18.630Z","dependency_job_id":null,"html_url":"https://github.com/yettabaa/FdF","commit_stats":null,"previous_names":["yettabaa/fdf"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yettabaa/FdF","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yettabaa%2FFdF","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yettabaa%2FFdF/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yettabaa%2FFdF/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yettabaa%2FFdF/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yettabaa","download_url":"https://codeload.github.com/yettabaa/FdF/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yettabaa%2FFdF/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004816,"owners_count":26083783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["1337cursus","1337school","2d-3d","42","42cursus","c","fdf","fdf-1337","fdf-42","mathematical-expressions","matrices","matrices-transformation","minilibx","mlx","mlx42","transformation"],"created_at":"2024-12-07T01:29:58.836Z","updated_at":"2025-10-10T17:08:25.089Z","avatar_url":"https://github.com/yettabaa.png","language":"C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **FdF - Wireframe Viewer**\n\n[![42 Badge](https://img.shields.io/badge/Score-125%2F100-brightgreen)](#)\n\n![Interactive Map Preview](https://github.com/yettabaa/FdF/blob/master/assets/FdF.gif)\n\n**FdF** is a 42 School project that visualizes a 3D wireframe map in a 2D space using custom projections. This project includes all mandatory requirements and bonus features, such as Z-axis scaling and gradient colors, delivering a dynamic and visually appealing application.\n\n---\n\n## **Table of Contents**\n1. [Overview](#overview)\n2. [Features](#features)\n3. [Technologies Used](#technologies-used)\n4. [Installation](#installation)\n5. [Preview](#preview)\n6. [Usage](#usage)\n7. [Map Parsing](#map-parsing)\n8. [Pixels and Memory Representation](#pixels-and-memory-representation)\n9. [DDA Algorithm for Line Rendering](#dda-algorithm-for-line-rendering)\n10. [Mathematical Concepts: Transformations](#mathematical-concepts:-transformations)\n11. [Gradient Colors](#gradient-colors)\n12. [Contributing](#contributing)\n13. [License](#license)\n\n---\n\n## **1. Overview**\n**FdF** is a project aimed at creating a lightweight 3D wireframe renderer. The program reads map files containing height data and renders them in a 2D window using **isometric projection**.\n\n- **Validation Date**: January 31, 2023  \n- **Score**: 125/100 (including bonus)  \n- **Bonus Features**: \n    1. Extra projection.\n    2. Zoom in and out.\n    3. Translation.\n    4. Rotation.\n    5. Z-axis scaling.\n    6. Gradient Colors.\n    7. Change Colors.\n\n---\n\n## **2. Features**\n- Reads and visualizes 3D wireframes from heightmap files.\n- Supports dynamic **Z-axis scaling** for emphasizing terrain features.\n- Includes **gradient color rendering** for height representation.\n- Fully interactive with zoom, pan, and projection adjustments.\n- Bonus: Supports additional projections and keyboard controls.\n\n---\n\n## **3. Technologies Used**\n- **Language**: C\n- **Graphics Library**: MiniLibX\n- **Build Tool**: Makefile\n\n---\n\n## **4. Installation**\nClone the repository and compile the project:\n\n```bash\ngit clone git@github.com:yettabaa/FdF.git\ncd FdF\nmake\n```\n\nRun the program with a sample map:\n\n```bash\n./fdf test_maps/42.fdf\n```\n\n---\n\n## **5. Preview**\n### GIFs\n\n1. **Z-Axis Scaling**  \n   ![Z-Axis Scaling](https://github.com/yettabaa/FdF/blob/master/assets/FdF-Scale-Z.gif)  \n   Adjusting the Z-axis scaling to emphasize height differences.\n\n2. **Zoom in and out**  \n   ![Gradient Colors](https://github.com/yettabaa/FdF/blob/master/assets/FdF-Zoom.gif)  \n   Apply Scaling to the X and Y axes.\n\n3. **Translation**  \n   ![Interactive Controls](https://github.com/yettabaa/FdF/blob/master/assets/FdF-Translation.gif)  \n   Apply Translation to the X and Y axes.\n\n4. **Rotation**  \n   ![Projection Switching](https://github.com/yettabaa/FdF/blob/master/assets/FdF-Rotation.gif)\nIf we want to rotate around an axis, we change the angle of the rotation matrix relative to this axis.\n\n---\n\n## **6. Usage**\n- **`P`, `H`, `V`**: Extra projection.\n- **`Scroll Mouse`**: Zoom in/out.\n- **`2` / `8`**: Rotate on the X-axis.\n- **`4` / `6`**: Rotate on the Y-axis.\n- **`7` / `9`**: Rotate on the Z-axis.\n- **`Arrow keys`**: Translation.\n- **`+` / `-`**: Adjust Z-axis scaling.\n- **`X` / `C`**: Toggle colors.\n- **`Right Click Mouse`**: Basic Shape.\n- **`Left Click Mouse`**: Move to the clicked point.\n\n---\n\n## **7. Map Parsing**\nThe map files are parsed in the following way:\n- **Each point in the file is separated by a comma**.\n- The left of the comma contains the **Z-axis value**, representing the height of the point.\n- The right of the comma contains the **color of the point** in **TRGB format** (either in **hexadecimal** format like `#RRGGBB` or in **decimal TRGB format**).\n- The position of each point in the map corresponds to its **X** (column) and **Y** (line) position in the grid.\n\n---\n\n## **8. Pixels and Memory Representation**\nIn the **FdF** project, rendering the map requires manipulation of individual **pixels** on the screen. Each pixel is represented in memory using **4 bytes** (32 bits), with the color encoded in **TRGB format**. This is essential for efficiently displaying the 3D wireframe and ensuring smooth rendering.\n\n### **Pixel Manipulation and Memory Management**\n\nTo draw a pixel on the screen, the following function is used:\n\n```c\nvoid my_mlx_pixel_put(t_colect *v, int x, int y, int color)\n{\n    char *dst;\n\n    if (x \u003e= 0 \u0026\u0026 x \u003c WIDTH \u0026\u0026 y \u003e= 0 \u0026\u0026 y \u003c HEIGHT) {\n        dst = v-\u003emlx.adr + (y * v-\u003emlx.line + x * (v-\u003emlx.bit_pxl / 8));\n        *(unsigned int *)dst = color;\n    }\n}\n```\n\nIn this function:\n\n- **`x`** and **`y`** are the pixel coordinates.\n- **`color`** is the pixel color in **TRGB format**.\n\nThe **`v-\u003emlx.adr`** points to the first memory address of the image in the window. All image data is stored in a single long array. The function calculates the exact memory location of the pixel by adding an offset based on the pixel's **line** (`y`) and **column** (`x`). This offset is calculated using the **line width** (`v-\u003emlx.line`) and **bits per pixel** (`v-\u003emlx.bit_pxl`). \n\nThe function writes the **color** to the computed memory address, ensuring that the pixel is updated within the **WIDTH** and **HEIGHT** boundaries of the image. This prevents segmentation faults by ensuring that the calculated address is within the valid memory range of the image.\n\n---\n\n## **9. DDA Algorithm for Line Rendering**\nThe **DDA (Digital Differential Analyzer)** algorithm is the primary method used to render lines between points in the wireframe. It works by incrementally calculating intermediate points along the line path between two endpoints, ensuring smooth and precise line rendering.\n\nHere's a brief explanation of how the DDA algorithm is utilized in this project:\n- Given two points, the DDA algorithm computes the pixel positions between them.\n- It calculates the change in both **X** and **Y** coordinates, adjusting at each step to maintain a straight line.\n- The **pixel colors** and **Z-axis heights** are updated according to the calculated positions.\n\nThe DDA algorithm is efficient and ensures that the lines between points are accurately rendered, making it ideal for displaying complex wireframe maps.\n\n👉 [The best tutorial on the DDA algorithm.](https://www.youtube.com/watch?v=W5P8GlaEOSI\u0026t=1010s\u0026ab_channel=AbdulBari)\n\n---\n## **10. Mathematical Concepts: Transformations**\n\n### 1. **Scaling**:\nScaling refers to adjusting the size of the map. In **FdF**, it specifically affects the **Z-axis** to emphasize the height differences in the 3D wireframe. The scaling transformation is applied using a scaling factor (`S`), which is multiplied by the height valu\ne of each point to either magnify or shrink the map.\n- **Formula for scaling**:  \n\n  ``` \n  x' = x * S_x,  y' = y * S_y,  z' = z * S_z \n  ```\n  Where `S_x`, `S_y`, and `S_z` are the scaling factors for the respective axes.\n\nResources: 👉 [https://en.wikipedia.org/wiki/Scaling_(geometry) ](https://en.wikipedia.org/wiki/Scaling_(geometry))\n\n### 2. **Translation**:\nTranslation is the process of moving the map in 3D space without altering its shape or orientation. This allows the map to be shifted along the **X**, **Y**, and **Z** axes.\n- **Formula for translation**:\n  ``` \n  x' = x + T_x,  y' = y + T_y,  z' = z + T_z \n  ```\n   Where `T_x`, `T_y`, and `T_z` are the translation values for each axis.\n\nResources: 👉 [https://en.wikipedia.org/wiki/Translation_(geometry)) ](https://en.wikipedia.org/wiki/Translation_(geometry)))\n### 3. **Rotation**:\nRotation involves turning the map around one of its axes. For **FdF**, the map can be rotated around the **X**, **Y**, or **Z** axes using the appropriate rotation matrices.\n\n\n- **Rotation around the X-axis**:\n  ``` \n  x' = x,  y' = y * cos(θ) - z * sin(θ),  z' = y * sin(θ) + z * cos(θ) \n  ```\n  - Where `θ` is the rotation angle.\n\n- **Rotation around the Y-axis**:\n  ``` \n  x' = x * cos(θ) + z * sin(θ),  y' = y,  z' = -x * sin(θ) + z * cos(θ) \n  ```\n\n- **Rotation around the Z-axis**:\n  ``` \n  x' = x * cos(θ) - y * sin(θ),  y' = x * sin(θ) + y * cos(θ),  z' = z \n  ```\n\nThese transformations are applied to every point in the 3D space before rendering it into the 2D window.\n\nResources: 👉 [https://en.wikipedia.org/wiki/Rotation_matrix ](https://en.wikipedia.org/wiki/Rotation_matrix)\n\n---\n\n## **11. Gradient Colors**\nTo achieve smooth color transitions across the rendered wireframe, the program uses a **gradient calculation** technique. This involves:\n\n- **Extracting Individual Color Channels**:  \n  Each color is represented in **TRGB format** (Transparency, Red, Green, Blue). The program separates these components for both the start and end colors using bitwise operations.\n\n- **Calculating Color Percentages**:  \n  For each pixel along a line, the algorithm determines its position as a percentage between the start and end points of the line. This percentage is used to blend the corresponding color components.\n\n- **Interpolating Color Channels**:  \n  The program computes each color channel (**Red**, **Green**, **Blue**, and **Transparency**) for the pixel based on its percentage. The new color is then reconstructed by combining these interpolated components.\n\nThis approach ensures visually appealing and smooth transitions, dynamically representing height or other map features. The gradient technique enhances the visual realism of the wireframe rendering.\n\n\n## **12. Contributing**\nContributions are welcome! If you have suggestions for improving this project, feel free to fork the repository and submit a pull request.\n\n1. **Fork the Repository**\n2. **Create a Feature Branch**:\n   ```bash\n   git checkout -b feature-branch-name\n   ```\n3. **Commit Changes**:\n   ```bash\n   git commit -m \"Description of changes\"\n   ```\n4. **Push Changes**:\n   ```bash\n   git push origin feature-branch-name\n   ```\n5. **Open a Pull Request**\n\n---\n\n## **13. License**\nThis project is licensed under the [MIT License](LICENSE).  \n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyettabaa%2Ffdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyettabaa%2Ffdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyettabaa%2Ffdf/lists"}