42 School Graphics Custom Library
Branch: master
Clone or download
Latest commit 13d1292 Feb 2, 2019

README.md

ft_libgfx

b_gfx overload

Hello Readers!

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.

Everyone, please feel free to contribue. I will look at all pull requests.

Not at 42 or following the graphics projects somewhere else?

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

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:

The Graphics Branch

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

  • Rasterisation, show a wireframe from a file
  • Render trippy colored mandelbrot and julia set
  • Create a ray caster game engine like wolfenstein
  • Build a 'first try' ray tracer
  • Work with a team to build a feature rich ray tracer

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

Wikipedia Links

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

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 😉

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

TODO: MORE LINKS!

(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

  • put a pixel on the screen
  • draw particles on the screen
  • draw vertical and horizonal lines
  • draw a square / circle / triangle

TODO: Answer Questions

What important graphics library features are missing from mlx?

  • Many things are missing from mlx, drawing, rotating, redraw and all sorts of events

Possible ideas for structures?

  • We could use something that could store the data in a point
  • Try to make something that can hold you mlx pointer and window to pass to the loop hook

Possbile idea for functions?

  • Make a function that puts a pixel into an mlx image

Useful macros?

  • Be sure to set constants as macros, move any global variables into a structure

What about window management?

  • I don't know of any way to move the window or place it in another area in mlx.