ft_libgfx

Guide for 42 School Graphics Custom Library

View on GitHub

ft_libgfx AKA b_gfx overload

Greetings b_gfx’rs and hackers alike!

To make it easier to work with, I will be explaining and looking into the 42 School Graphics Library Minilibx.

Oh wait what is this? Hexcross by MetaHobby, vine board with timed game

Oh! It’s a shameless plug for my latest video game: Hexcross

I’ve been back working in this type of project now (escaping from web, database and other duties) so look forward to more screen shots and juice knowledge as I find it. Probably a refactor of this resource at some point too…

[metaHobbyLogo

Want to beta test our upcoming game?

Without futher ado:

To make it easier to work with, I will be explaining and looking into the 42 School Graphics Library Minilibx.

I have uploaded all the minilibx sources for viewing and use. [X11] [El Capitan] [Sierra]

Along with this goal I plan to create a set of resources and functions that can be used to make different types of computer graphics programs. The resources will be aimed at helping others create great 42 graphics projects and encouraging graphics side projects.

Contents:

Email me at msnyng+gfx@gmail.com with any questions you might have about this repo.

If you are at 42, please reach out to qst0 in person for questions. They are best that way. Currently in 42 Accelerate in Zone 4.

Please feel free to fork or contribute to this repo. It would look good, right?

Not at 42? Following the graphics projects somewhere else? Just curious?

This repo still has treasures for you, please check out the link dump.

The Graphics Branch

The goals of the graphics branch projects can be put simply:

Let’s get started.

Graphics Branch Link Dump

Anything even slightly useful for coming to a better understanding of gfx

ft_wireframe

ft_fractal

wolf3d

rt_v1

misc

MiniLibX

The keystone of the 42 graphics branch is learning to use MiniLibX

Besides some old videos on intra, you are given the source and the man pages to figure it out.

To help demystify the man pages I took a moment and formatted them for markdown.

MiniLibX is described in the following man pages:

Take some time and read these pages, if you want to read them in the console:

man minilibx/man/man1/mlx.1

The last part is the man page name, read them all.

mlx.1
mlx_new_window.1
mlx_pixel_put.1
mlx_new_image.1
mlx_loop.1

I have done my best to use markdown to make a more readable experience on github.

That being said, man page formatting in the console is intresting too.

Check out one of the man files to see the syntax, this one is mlx.1.

Once you have done that, try to open a window using the mlx functions.

If you get stuck, here is a short example:

#include <mlx.h>

int main(void)
{
  void *mlx;
  void *window;
  
  mlx = mlx_init();
  window = mlx_new_window(mlx, 1000, 1000, "Title");
  
  mlx_loop(mlx);
  return (0);
}

gcc -Wall -Wextra -Werror -I minilibx -L minilibx -lmlx -framework OpenGL -framework AppKit main.c

Remember, where this line above says minilibx yours might say something like minilibx_macos_sierra it’s simply the name of the folder with mlx built in it. Speaking of which, be sure to build mlx like so: cd <mlxfolder> make

I certainly encourage you to figure out as much as you can with just the man pages and tinkering.

But at a certain point, you should show what you’ve learned and learn from others.

Getting started with fdf (ft_wireframe)

Well first of all, check out all the juicy details they give us.

It’s a solid set of guidelines but nowhere to start. 42 Classic. But it won’t be like this the whole way. Since the system is set up this way I would highly recommend experementing with any ideas you have right now. Get comfortable trying to make something happen, use events, loops and anything else you found in the man pages.

Once you have done this, you should already be thinking about:

Bresenham’s line algorithm

Drawing a line, various curves and shapes are normally handled by a graphics library. At 42 we will doing all of this from scratch, minilibx is not feature rich for some reason. Since we are rendering a grid, that line algorithm is where we need to start. The link above is to a very detailed proof of the algorithm. In the links below you can find more on the subject.

That’s all for now, find me if you have any more questions or suggestions for the fdf section.

This part of the guide is a work in progress, ask if you have a question for now

There are more resources, examples and inspiration [in the link dump].(#graphics-branch-link-dump)

Getting started with fractol (ft_fractal)

There are many good resources on this adventure in computer graphics, but I would argue the best place to start is on paper.

Look up imaginary numbers. Throw some numbers into the function for the mandelbrot.

f(x) = z² + c

Real numbers, imaginary numbers then complex numbers. Here is a guide

It would seem to me the key to this project, like any other, is to get hands on and experement.

Here is a macro for formula that might be useful:

Scale a range to a known min and max

#define RANGE_CHANGE(x,a,b,min,max) (((b)-(a))*((x)-(min))/((max)-(min)))+(a)

This part of the guide is a work in progress, ask if you have a question for now

There are more resources, examples and inspiration [in the link dump].(#graphics-branch-link-dump)

More key event control - keys.h

To solve the problem of knowning when many keys have been pressed I have made a struct of all the keys.

This file allows the programmer to use the minilibx loop hook to fire off events on key held.

A quick synopsis of the code:

#define KEY_A 0
#define KEY_S 1
#define KEY_D 2
...

typedef struct  s_keys
{
  int           a:1;
  int           s:1;
  int           d:1;
  ...
}               t_keys

I really like an idea I saw on the evil corp entry for the 42 Hackathon in 2016.

Where you use a constant string of all the letters to turn the keycode into it’s matching printable output

It looks like this:

bqweryt123465=97-80]ou[ip lj\"k;\\,/nm.  ` 	. * +   / -  =012345

They used it to type input on to the screen along with mlx_string_put()

I’m sure it could be used for more! I’m thinking about making a typing game :wink:

What about events?

It’s a good idea to experement with the events they mention in the man pages, but there is more than that!

Check out the mlx_loop man page, at the bottom is says to look at mlx_int_param_event.c

In this code we can see:

int	(*(mlx_int_param_event[]))() =
{
  mlx_int_param_undef,   /* 0 */
  mlx_int_param_undef,
  mlx_int_param_KeyPress,
  mlx_int_param_KeyRelease,  /* 3 */
  mlx_int_param_ButtonPress,
  mlx_int_param_ButtonRelease,
  mlx_int_param_MotionNotify,  /* 6 */
  ...

This can help you make sense of the command mlx_hook in mlx_hook.c

We can create our own key hooks with this information:

void	set_hooks(t_view *v)
{
	mlx_do_key_autorepeatoff(v->mlx);
	mlx_hook(v->window, 2, 0, key_press_hook, v);
	mlx_hook(v->window, 3, 0, key_release_hook, v);
	mlx_hook(v->window, 4, 0, mouse_press_hook, v);
	mlx_hook(v->window, 5, 0, mouse_release_hook, v);
	mlx_hook(v->window, 6, 0, motion_hook, v);
	mlx_hook(v->window, 12, 0, expose_hook, v);
	mlx_hook(v->window, 17, 0, exit_hook, v);
}

The example above shows all the useful hook params I have found, please help me find any more!

The exit_hook (which you could name anything) is the undocumented magic to take from this code.

It’s how you can stop your program with the exit(0); command when the user presses the closing button on the window.

TODOS

Progress Goals for the Project

(I have more links I need to add and sort! CHECK FOR DUPLICATES!)

https://en.wikipedia.org/wiki/Linear_interpolation

https://en.wikipedia.org/wiki/X_PixMap

https://en.wikipedia.org/wiki/BMP_file_format

https://www.cs.uic.edu/~jbell/CourseNotes/ComputerGraphics/3DTransforms.html

https://www.online-utility.org/image/convert/to/XMP

https://open.gl/transformations

https://en.wikipedia.org/wiki/Lissajous_curve

https://randomascii.wordpress.com/2011/08/13/faster-fractals-through-algebra/

http://softpixel.com/~cwright/programming/threads/threads.c.php

https://en.wikipedia.org/wiki/Parallax

https://www.youtube.com/watch?v=HQYsFshbkYw

https://en.wikipedia.org/wiki/Digital_differential_analyzer_(graphics_algorithm)

https://github.com/shaunlebron/blinky

http://bisqwit.iki.fi/jutut/kuvat/programming_examples/portalrendering.html

TODO: STARTING POINTS EXPLAINED

TODO: Answer Questions

What important graphics library features are missing from mlx?

Possible ideas for structures?

Possbile idea for functions?

Useful macros?

What about window management?