{"id":13791786,"url":"https://github.com/terry-yes/mlx_example","last_synced_at":"2025-05-12T14:31:11.398Z","repository":{"id":37627742,"uuid":"267573313","full_name":"terry-yes/mlx_example","owner":"terry-yes","description":"Some examples for those who try to use MLX library for 42 subject CUB3D or miniRT. And some helpful links.","archived":false,"fork":false,"pushed_at":"2021-09-28T13:18:34.000Z","size":15231,"stargazers_count":176,"open_issues_count":1,"forks_count":27,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T01:06:20.097Z","etag":null,"topics":["mlx"],"latest_commit_sha":null,"homepage":"","language":"C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/terry-yes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-28T11:37:03.000Z","updated_at":"2025-04-22T07:34:24.000Z","dependencies_parsed_at":"2022-08-08T21:01:33.103Z","dependency_job_id":null,"html_url":"https://github.com/terry-yes/mlx_example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terry-yes%2Fmlx_example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terry-yes%2Fmlx_example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terry-yes%2Fmlx_example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terry-yes%2Fmlx_example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terry-yes","download_url":"https://codeload.github.com/terry-yes/mlx_example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253754966,"owners_count":21958934,"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","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":["mlx"],"created_at":"2024-08-03T22:01:04.556Z","updated_at":"2025-05-12T14:31:06.386Z","avatar_url":"https://github.com/terry-yes.png","language":"C","funding_links":[],"categories":["Tools","Other"],"sub_categories":["MiniLibX"],"readme":"**English Ver.** (Korean Ver. is down below, 한국어 버전은 밑에 있습니다.)\n\n\n## 0. Intro\n\nOn the 42 intra subject page, there are two files minilibx_opengl.tgz and minilibx_mms_20200219_beta.tgz. Let's call them **mlx** and **mlx_beta** respectively.\n\n\u003cbr\u003e\n\n## 1. Explaning my mlx example.\n\n​\tThere is Makefile on evey example, and you can compile and run the program by typing `make`.\n\n​\t(`gcc -Lmlx -lmlx -framework OpenGL -framework AppKit` \u003c- Compile option) \n\n\n\n- ##### \t01first_example: Create a simple window.\n\n\n- ##### \t02key_handling: Receive events on the keyboard.\n\n\n\t\tW: Add 1 to x.\n\t\tS: Subtract 1 from x.\n\t\tESC: Quit program.\n\t\tOther keys: Show current x value.\n\n\n- ##### \t03img_loading: Draw the loaded xpm file on the window.\n\n\n- ##### \t04img_making: Draw pixels on the window without loading image file.\n\n\n- ##### \t05img_loading_and_modifying: Modify pixels on the window after loading image file.\n\nExample 1 to 5 show basic mlx features while example 6 handles advanced features\n\n\n- #####      06map_2d: Make simple two-dimensional map. (Only Esc key and the close key on the top menu close the window. There's no other key interaction.)\n\n\u003cbr\u003e\n\n\n## 2. Explaining major functions and their prototypes.\n\nmanual page: go to mlx_beta/man/man3 and type `man ./[manual file].3`  \n\n​\te.g. `man ./mlx.3` \n\n##### man ./mlx.3 (Manual command)\n\n---\n\n- `void\t*mlx_init ();` \n\n\n\n##### man ./mlx_new_window.3\n\n---\n\n- `void\t*mlx_new_window ( void *mlx_ptr, int size_x, int size_y, char *title );`\n\n\n\n##### man ./mlx_loop.3\n\n---\n\n- `int\tmlx_loop ( void *mlx_ptr );`\n  - Keeps the program running when included in the last part of the program.\n\n- `int\tmlx_key_hook ( void *win_ptr, int (*funct_ptr)(), void *param );`\n\n  - Handles key inputs.\n\n  - Not used anymore because mlx_hook() function below is better in every circumstance.\n\n- `int\tmlx_loop_hook ( void *mlx_ptr, int (*funct_ptr)(), void *param );`\n\n  - Keeps the program running even when there are no inputs (keyboard, mouse etc).\n  - Continuously draws the screen based on the player's current location.\n\n- `int mlx_hook(void *win_ptr, int x_event, int x_mask, int (*funct)(), void *param);`\n\n  - Major and powerful function that handles all inputs, but has no manual\n  \n  - Can receive key_press, key_release, mouse click, close button click, etc based on the `x_event` value\n\n##### man ./mlx_new_image.3\n\n---\n\n​\tI recommend that you see my image example\n\n- `void\t*mlx_new_image ( void *mlx_ptr, int width, int height );`\n- `char\t*mlx_get_data_addr  (  void *img_ptr, int *bits_per_pixel, int *size_line, int *endian );`\n- `int\tmlx_put_image_to_window ( void *mlx_ptr, void *win_ptr, void *img_ptr, int x, int y );`\n- `void*\tmlx_xpm_file_to_image (  void  *mlx_ptr,  char  *filename,  int  *width,  int *height );`\n      \n\n\u003cbr\u003e\n\n\n\n## 3. Reference Sites\n\n\n\n#### Course\n\n- **Hard**\n  \n  - Learn basic mlx features through **my examples** or `referece #1` and `reference #2`. \n  - Understand raycasting through `reference #3` and `reference #4`\n  - Code yourself with the help of the code in `reference #5`\n  \n- **Normal**\n  \n  - Understand raycasting through `reference #3`\n  - Learn mlx features through **my examples**\n  - Code yourself with the help of the code in `reference #5` (copy paste is one of the coding methods)\n  \n- **Easy** \n\n  - Learn mlx features through **my examples**\n  - Code yourself with the help of the code in `reference #5` (copy paste is one of the coding methods)\n\n  \n\n#### Reference\n\n1. [Collection of mlx information \u0026\u0026 ft_libgfx tutorial](https://github.com/qst0/ft_libgfx)\n\n   - Contains most of the mlx information, but no easy to understand\n\n   - Recommended to learn little by little\n\n2. [Intra MinilibX Lecture](https://elearning.intra.42.fr/notions/minilibx/subnotions)\n\n   - Basic mlx features for beginners\n   - Add up to only 20~30 lines of codes in total\n   - **My examples** and `reference #1` already contain this information \n\n3. [Raycasting Basics with JavaScript](https://courses.pikuma.com/courses/take/raycasting/lessons/7503313-player-movement)\n\n   - Explains raycasting in a less mathematical way\n   - Basic mathematical concepts such as `sin` and `cos` are explained\n   - However, uses non-mlx graphic libraries to draw figures (no mlx explanations)\n- Need to refer to `reference #4`  because does not explain how to handle textures\n  \n4. [Raycasting explained(Lode's Computer Graphics Tutorial)](https://lodev.org/cgtutor/raycasting.html)\n\n   - Need to understand most of this reference to understand **cub3d**\n\n   - A challenging tutorial that made me want to give up, but I had to come back to this because the code I referred to was based on this tutorial\n\n5. [The code I referred to (42-cub3d-glagan)](https://github.com/Glagan/42-cub3d)\n\n   - Cub3d repository with the most stars\n   - Concise and well structured\n   - Based on `reference #4`\n   - But need to modify some parts (macro function usage, --save option, unable to receive nonsquare maps, etc)\n\n6. [mlx image tutorials(images_example-keuhdall)](https://github.com/keuhdall/images_example)\n   - Recommended before handling images\n   - Easy to understand\n   - But does not provide information on how to load images\n\n   \n\n#### Other references\n\n---\n\n1. key , mouse handling, etc (Both contain the same information)\n\n   - [stack overflow 42 community - several inputs (keyboard, mouse, etc)](https://stackoverflow.com/c/42network/questions/164) : Need 42 intra id\n\n   - [key handle related github](https://github.com/VBrazhnik/FdF/wiki/How-to-handle-mouse-buttons-and-key-presses%3F) - Source of this reference seems to be the one above\n2. Keyboard code numbers\n   - [Keycode (image)](https://raw.githubusercontent.com/VBrazhnik/FdF/master/images/key_codes.png)\n\n   - [Keycode (code)](https://gist.github.com/jfortin42/68a1fcbf7738a1819eb4b2eef298f4f8)\n\n\u003cbr\u003e\n\n\n## 4. Some tips\n\n1. Two compressed files `mlx` and `mlx_beta` are given with the subject and `mlx_beta` seems to be more recent. However, I only used `mlx`\n\n2. However, `mlx` does not have a manual page so I referred to `mlx_beta`'s manual page\n\n3. `mlx`'s image files use `xpm` extensions but `mlx_beta` seem to handle `png` files as well\n\n4. `mlx_pixel_put` and `mlx_put_image_to_window` have almost the same features\n\n   - `mlx_put_image_to_window` collect image information before drawing them at once\n   - `mlx_pixel_put` seems slower because it draws dots right away\n\n   - Better to collect pixel information and draw them at once with `mlx_put_iamge_to_window`\n     - Experienced delay when used it twice\n\n3. Need to know DDA Algorithm when drawing pixels to form a line\n   - `reference #1` introduces other algorithms as well and `reference #3` does not use DDA Algorithm\n   - However, essential to understand raycasting explained in `reference #4` and `reference #5`\n\n\n\n4. Can convert image files to  `xpm` in the following site\n   https://convertio.co/kr/png-xpm/\n\n\n\n5. Need to solve norm erros derived from `reference #5`'s  macro functions (Forbidden to use macro functions that use parameters)\n\n\n\n---\n\n\n\n**Korean Ver.**\n\n#### 수정사항\n\n- Lodev raycasting 번역 블로그 추가 - 20.05.30\n- 06map_2d 예제 추가 - 20.05.30\n- 오타 수정 (ykoh님 제보) - 20.10.18\n- Iwoo님 맵 테스터 추가 - 20.10.18\n\n\n\n## 0. 들어가기에 앞서\n\n 1. cub3D 서브젝트 페이지에 첨부된 압축파일 minilibx_opengl.tgz과 minilibx_mms_20200219_beta.tgz \n    2개가 있는데 전자를 **mlx**, 후자를 **mlx_beta**로 지칭하겠습니다.\n\n 2. 제가 보려고 써놓은 서브젝트 번역본인데 부족하지만 필요하시면 사용하시기 바랍니다.\n\n    저만 보려고 대충 써놓아서 허접할 수 있습니다.\n    [서브젝트 번역본](subject_translated.md) \n\n\u003cbr\u003e\n\n\n\n## 1. 예제 설명\n\n​\t모든 코드마다 Makefile이 있고 `make` 를 치시면 컴파일 및 실행이 됩니다. \n\n​\t(`gcc -Lmlx -lmlx -framework OpenGL -framework AppKit` \u003c- 컴파일 옵션) \n\n\n\n- ##### \t01first_example: mlx로 창띄우는 간단예제\n\n\n- ##### \t02key_handling: 키를 입력받고 동작을 수행합니다. \n\n\n\t\tW: x 변수에 1을 더함\n\t\tS: x 변수에서 1을 뺌\n\t\tESC: 프로그램 종료 \n\t\t다른키: 현재 x값 출력\n\t\t\n\n\n- ##### \t03img_loading: xpm파일을 불러와서 화면에 그려 창에 띄웁니다.\n\n\n- ##### \t04img_making: 파일이 아닌 직접 픽셀에 점을 찍어서 그림을 그려 창에 띄웁니다.\n\n\n- ##### \t05img_loading_and_modifying: 파일을 불러온 뒤 그 위에 픽셀을 찍어서 창에 띄웁니다.\n\n05번까지는 mlx의 기본 기능을 대부분 살펴보았고 이후는 응용예제입니다. \n\n\n- #####      06map_2d: 간단한 2d맵을 만듭니다. (esc키, 창닫기버튼으로 종료가능, 그 이외의 interaction 없음)\n\n\u003cbr\u003e\n\n\n## 2. 주요 함수 prototype 및 설명 \n\nmlx_beta/man/man3폴더 들어가셔서 강조된 제목으로 명령어 치시면 메뉴얼 페이지 볼 수 있습니다.\n\n\n\n\n\n##### man ./mlx.3\n\n---\n\n- `void\t*mlx_init ();` \n\n\n\n##### man ./mlx_new_window.3\n\n---\n\n- `void\t*mlx_new_window ( void *mlx_ptr, int size_x, int size_y, char *title );`\n\n\n\n##### man ./mlx_loop.3\n\n---\n\n- `int\tmlx_loop ( void *mlx_ptr );`\n\n\n    마지막에 이걸 쳐줘야 프로그램이 종료하지 않고 계속 돌아갑니다.\n\n- `int\tmlx_key_hook ( void *win_ptr, int (*funct_ptr)(), void *param );`\n\n  키보드의 키들을 입력받는 함수이지만 안씁니다.\n\n  이유는 밑에 mlx_hook()가 더 좋기 때문에\n\n- `int\tmlx_loop_hook ( void *mlx_ptr, int (*funct_ptr)(), void *param );`\n\n  아무 입력이 없을때 계속 loop를 돌리는 함수.\n  이 함수를 이용해 현재 위치 정보를 기반으로 화면을 매번 새로 그리면 됩니다.\n\n- `int mlx_hook(void *win_ptr, int x_event, int x_mask, int (*funct)(), void *param);`\n\n  꼭 필요한 함수고 강력한 함수인데 특이하게 man에 없습니다.\n  모든 입력을 처리하는 함수 x_event값에 따라 key_press, key_release, mouse클릭, **창닫기버튼** 등 입력을 받을 수 있음\n\n\n\n##### man ./mlx_new_image.3\n\n---\n\n​\t여기는 제 이미지 예제를 한번 보시는 것을 추천드립니다.\n\n- `void\t*mlx_new_image ( void *mlx_ptr, int width, int height );`\n- `char\t*mlx_get_data_addr  (  void *img_ptr, int *bits_per_pixel, int *size_line, int *endian );`\n- `int\tmlx_put_image_to_window ( void *mlx_ptr, void *win_ptr, void *img_ptr, int x, int y );`\n- `void*\tmlx_xpm_file_to_image (  void  *mlx_ptr,  char  *filename,  int  *width,  int *height );`\n      \n\n\u003cbr\u003e\n\n\n\n## 3. 참고 사이트\n\n\n\n- 코스\n  - Hard: 제가 만든 예제나 1,2번으로 mlx 감을 잡고 3,4번을 통해 raycasting을 이해하면서 5번 코드를 참고해서 작성하기\n  - Normal: 3번 사이트로 raycasting 개념을 이해 한뒤 제가 만든 예제로 mlx를 파악하고  5번 깃헙을 참고해서 제출하기. (참고라고 쓰고 필사라고 읽는다.)\n  - Easy: 제가 만든 예제로 mlx파악 후 5번 코드 참고해서 제출하기. (참고라고 쓰고 필사라고 읽는다.)\n\n\n\n1. [mlx관련 자료 모음집, 튜토리얼ft_libgfx](https://github.com/qst0/ft_libgfx)\n\n   mlx에 대한 정보가 전체적으로 담겨있지만 처음 보기 쉽지않습니다.\n\n   한번에 다 파악하지 말고 필요한 만큼씩 파악하시는 걸 추천드립니다.\n\n2. [Intra MinilibX강의](https://elearning.intra.42.fr/notions/minilibx/subnotions)\n\n   처음에 mlx를 어떻게 다뤄야 하는지 시작만 알려줍니다.(아주 기본)\n\n   사실 요약하면 코드 20~30줄 정도밖에 안되고 그 코드가 1번사이트나 제 예제에 적혀있어서 안봐도 무방합니다.\n\n3. [Raycasting Basics with JavaScript](https://courses.pikuma.com/courses/take/raycasting/lessons/7503313-player-movement)\n\n   수학적인 개념을 모르고 raycasting을 이해할수 있게 설명해줍니다.\n\n   sin, cos이 쓰이는데 개념부터 차근차근히 설명해줍니다.\n\n   다만 자바스크립트에서 쓰는 그래픽 함수가 mlx와 달라서 직접 구현해야합니다.(직선, 사각형, 원 그리기 등)\n\n   그리고 texture를 다루는 방법은 안쓰여있고 밑에 4,5번 사이트와 방식이 달라서 어쩔수 없이 4번 사이트의 설명을 봐야합니다.\n\n4. [Raycasting explained(Lode's Computer Graphics Tutorial)](https://lodev.org/cgtutor/raycasting.html)\n\n   - [위 사이트의 번역 깃헙 (365kim)](https://github.com/365kim/raycasting_tutorial) \n     - 기존에도 윗글을 번역한 블로그가 있었는데 그 번역보다 훨씬 자연스럽고 읽기 쉽게 번역되어 있습니다.\n     - 또한 md파일로 원문보다 훨씬 읽기 깔끔하게 정리되어 있어서 추천드립니다!!\n\n   cub3d를 이해하려면 4번을 거의 전부 이해해야합니다. \n\n   외면하고 싶은 순간이 한두번이 아니었지만 제가 참고한 코드가 이 강의를 기반으로 하고 있어서\n\n   막힐때마다 이 사이트를 붙잡고 있었습니다.\n\n5. [제가 참고한 cub3d github(42-cub3d-glagan)](https://github.com/Glagan/42-cub3d)\n\n   제가 참고한 깃헙 코드입니다. (github에서 cub3d로 검색했을 때 star제일 많음)\n\n   코드가 상당히 깔끔하게 짜여져있고 4번의 설명을 기반으로 하고 있어서 4번을 이해하면서 보기 좋습니다.\n\n   다만 수정해야할 부분들이 몇군데 존재합니다.(macro 함수 사용부분, --save옵션, 정사각형이 아닌 맵 등)\n\n6. [mlx 이미지 관련 튜토리얼(images_example-keuhdall)](https://github.com/keuhdall/images_example)\n\n   이미지를 다루기전에 한번 해보면 좋은 깃헙입니다.\n   \n   설명이 잘 되어 있습니다.\n   \n   다만 이미지를 만드는법은 있지만 로딩하는 법이 없었던 것으로 기억합니다.\n\n7. [Cub3D Map Tester(42 Cadet Iwoo님께서 제작)](https://github.com/humblEgo/cub3D_map_tester)\n\n   유효한 맵인지 검사해주는 프로그램이라고 합니다!\n\n#### 기타 참고 사이트\n\n---\n\n1. key , mouse handling관련(둘이 같은 내용)\n\n   - [stack overflow 42 커뮤니티-여러 인풋(키보드, 마우스 등) 관련 ](https://stackoverflow.com/c/42network/questions/164) : 42아이디로 계정연동 필요\n\n   - [key handle 관련 깃헙](https://github.com/VBrazhnik/FdF/wiki/How-to-handle-mouse-buttons-and-key-presses%3F) - 윗글의 출처가 여기인듯?\n2. 키보드의 코드번호를 정리해놓은 자료\n   - [키코드 (이미지)](https://raw.githubusercontent.com/VBrazhnik/FdF/master/images/key_codes.png)\n   \n   - [키코드(코드)](https://gist.github.com/jfortin42/68a1fcbf7738a1819eb4b2eef298f4f8)\n\n\n\n\u003cbr\u003e\n\n\n## 4. 약간의 팁\n\n1. 서브젝트 받을 때 mlx와 mlx_beta 두 압축파일을 주는데 beta가 개선버전인듯 한데 저는 mlx로만 사용했습니다.\n\n   다만 mlx에는 man페이지가 없어서 mlx_beta의 man페이지를 참고했습니다.\n\n   mlx는 이미지파일이 xpm확장자를 사용해야하는데 mlx_beta는 png도 가능한듯합니다.\n   \n\n\n\n2. mlx_pixel_put과 mlx_put_image_to_window는 거의 같은 기능을 합니다만\n   mlx_put_image_to_window는 이미지 정보를 모았다가 한번에 그리고, mlx_pixel_put은 매번 점을 그려서 속도가 느린것 같습니다.\n\n   따라서 mlx_put_image_to_window는 화면의 모든 pixel정보를 모았다가 한번에 그리는게 좋습니다.\n   (이 이유때문인지 확실친 않지만, 두번만 써도 속도가 느려지는것을 느꼈습니다)\n\n\n\n3. 도트에 선을 그릴 때 DDA Algorithm을 알아야 합니다. \n   위에 1번사이트에서 다른 알고리즘도 소개되긴 하는데 위의 4,5번 사이트에서 raycasting을 이해할 때 꼭 필요합니다.\n   3번 사이트에서는 필요하지 않았던 것 같습니다.\n\n\n\n4. 아래 사이트에서 각종 이미지 파일을 xpm으로 변환 할 수 있습니다.\n   https://convertio.co/kr/png-xpm/\n\n\n\n5. 위의 glagan github의 코드중 macro함수는 현재 norm 에러가 떠서 해결해 주어야합니다. (파라미터를 사용하는 매크로 함수 금지)\n\n\n\n6. sprite가 벽과 합쳐지는 오류발생시 팁입니다.(42 Iwoo님 제보)\n\u003cdetails\u003e\u003csummary\u003e충분히 고민하셨으면 참고해보세요.\u003c/summary\u003e\u003cp\u003e [Raycasting explained(Lode's Computer Graphics Tutorial)](https://lodev.org/cgtutor/raycasting.html)를 참고하여 성실히 코드를 작성하셨나요? :) \u003cbr\u003e 이 경우! 맵 격자가 아래와 같을 때\u003cbr\u003e\n11111\u003cbr\u003e\n11211\u003cbr\u003e\n10N01\u003cbr\u003e\n10001\u003cbr\u003e\n11111\u003cbr\u003e 아래 이미지처럼 보이는 오류가 발생할 수 있습니다.\u003cbr\u003e\n![sprite_pos_error](https://user-images.githubusercontent.com/54612343/83328284-e5224080-a2bc-11ea-8756-8f5d4b23c105.JPG)\u003cbr\u003e\n**이는 sprite의 위치좌표가 맵격자의 모서리에 해당하는 정수값으로 설정되어서 생기는 문제입니다.**\u003cbr\u003e\u003cbr\u003e\nsprite[i].x와 sprite[i].y의 값에 0.5씩 추가하여 sprite의 위치가 맵격자의 중앙에 오도록 설정해보세요 :)\u003cbr\u003e\n마찬가지로 player의 초기 position도 개선해보시는걸 추천드립니다.\n\u003c/p\u003e\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterry-yes%2Fmlx_example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterry-yes%2Fmlx_example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterry-yes%2Fmlx_example/lists"}