Giter Club home page Giter Club logo

42_fdf's Introduction

Grade

This project is about representing a landscape as a 3D object in which all surfaces are outlined in lines

FDF Chronicles: 2D Projections Understanding 2D projections by parsing and converting matrices at Ecole 42.


FDF Chronicles: 2D Projections

It's been a while since my last article! Last time, I wrote about Virtual Machines. Check my article by clicking.

To be honest, this project FDF was a huge challenge in my journey. Creating an abstract perspective from matrix conversions was my biggest and toughest goal. To give you a better knowledge about the FDF project, I will give a short and pragmatic introduction to how it works.

The journey of the FDF Chronicles: 2D Projections is to create a program that will receive a simple map in a file format .fdf. We presume this file contains the coordinates of a landscape which will be displayed in our output. So, in this image, you will understand a little bit of what kind of files we are expecting:

FDF Chronicles: 2D Projections This is what we are expecting in our .fdf files.

Each number from the file has 3 representations:

  • The horizontal position corresponds to its axis;
  • The vertical position corresponds to its ordinate;
  • The value itself corresponds to the altitude.

It could look a little bit nonsense and confusing right now. So, I will show the expected output from this same file and you will try to get it:

Expected output from the program.

If you are looking for some code to help your development you can check my GitHub by clicking.

Disclaimer: This article "FDF Chronicles: 2D Projections" represents my perspective about my understanding of the scope of this project, and it might contain incorrect information. If you found any mistakes, I would be grateful if you sent them to me to make corrections.

Summary:

  1. What is an isometric projection?
  2. Think about your data structure very well!
  3. How drawing lines between coordinates?

Isometric projections and videogames

Age of Empires Age of Empires: Example of isometric projections games.

As I am a game lover, this is the best way to visualize the power of isometric views. Somehow, we created the idea that this is a 3D representation. But it is not! Each object works in the same abstract way as our maps from the FDF project.

At the time of development, 3D graphical representations demanded a lot of GPU resources, which were not too much available at that time (we are talking about 2000s).

To create a short description, isometric projections use angles between the x-axis, y-axis, and z-axis equal to 120 degrees. To do this, we need to convert our matrix using formulas that will apply this perspective.

This is an image with isometric projections. This article is very good to show more information about isometric projections in games. Also, check this one from Wikipedia.


Dedicate good time to create your data structures

Right now, as I finished the project, I can create the best data structure from my perspective. But, at the beginning of this project, I didn´t have to understand and used structures and lists.

So, my tools were a little bit scarce and this is good because I spent a long time thinking about how I could manage my data in the best approach. And right now I can see it very clearly. So, if you also don´t have a deep comprehension of this topic, this is a great opportunity to create this idea. It will demand more time, but it is a good investment.

In my case, I first collected all information in a linked list with a structure containing x, y, and z values. To collect all coordinates from the file, use split and get next-line functions. Then, used two conversion functions to convert the matrix using my linked list and applying isometric conversions, and scales, using width and height dimensions from the map.

If you are looking for some code to help your development you can check my GitHub by clicking.


Line drawing algorithms: how to use it?

Drawing lines is a good challenge in the FDF project. After we had all the positions in our matrix, we had to "connect" all points from our map. In my case, I used Bresenham's line algorithm.

Line drawing algorithm.

To draw lines, we need to draw all pixels between the initial coordinate to the final coordinate, using a while loop that increments and prints each pixel between these points. In FDF, our logic needs to do this from position x -> x+ 1, and x -> width for almost all map coordinates from our matrices.

Draw_map function.

I was only concerned with this step when I had all my data correctly stored. It is also good to validate if the pixels are within the window height and width to avoid segmentation faults in your program.


Maps Examples

Elem.fdf:

Input elem.fdf Output elem.fdf

Pyra.fdf:

Input pyra.fdf Output pyra.fdf

Pyramid.fdf:

![Input pyramid.fdf](https://pedromelodev.com/wp-content/uploads/2024

/01/image-1.png) Output pyramid.fdf


Documentation

If you want a deeper understanding of this project's topics, I recommend these links that can help you in your journey. Thank you for reading FDF Chronicles: 2D Projections

Hope you enjoy it! I would love to talk about this project or other subjects. Feel free to reach me! Happy 2024!


"If you wish to improve, be content to appear clueless or stupid in extraneous matters—don't wish to seem knowledgeable. And if some regard you as important, distrust yourself."

  • Enchiridion - Epictetus

42_fdf's People

Contributors

pedromelocf avatar

Stargazers

Pierre Bouillon avatar Alisson avatar

Watchers

 avatar

42_fdf's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.