fractol/mlx/docs/Colors.md

100 lines
2.9 KiB
Markdown
Raw Normal View History

2023-03-01 04:36:42 +01:00
<!----------------------------------------------------------------------------
Copyright @ 2021-2022 Codam Coding College. All rights reserved.
See copyright and license notice in the root project for more information.
----------------------------------------------------------------------------->
# Colors
Colors are a fundamental concept in graphics programming. A common color model is RGBA, which MLX uses for storing and displaying images.
## Composition
Colors are commonly represented as `4-byte` integers. This 4-byte integer is a grouping of four individual channels: red, green, blue and alpha, with alpha representing transparency. Additionally, colors are usually shown in hexadecimal to make each channel value identifiable:
Channel | Description | RGBA representation
:------:|:-------------:|:-------------------:
`R` | Red Channel | `0xFF000000`
`G` | Green Channel | `0x00FF0000`
`B` | Blue Channel | `0x0000FF00`
`A` | Alpha Channel | `0x000000FF`
Combining these four channel values into one will result in a non-transparent, white color.
## Encoding & Decoding
In order to set each channel's byte we can use bit-shifting operations.
A function that combines four individual channel bytes into a single integer using bit-shifting looks like this:
```c
// 'Encodes' four individual bytes into an int.
int get_rgba(int r, int g, int b, int a)
{
return (r << 24 | g << 16 | b << 8 | a);
}
```
We can also do this in reverse to retrieve each individual byte again:
```c
// Get the red channel.
int get_r(int rgba)
{
// Move 3 bytes to the right and mask out the first byte.
return ((rgba >> 24) & 0xFF);
}
// Get the green channel.
int get_g(int rgba)
{
// Move 2 bytes to the right and mask out the first byte.
return ((rgba >> 16) & 0xFF);
}
// Get the blue channel.
int get_b(int rgba)
{
// Move 1 byte to the right and mask out the first byte.
return ((rgba >> 8) & 0xFF);
}
// Get the alpha channel.
int get_a(int rgba)
{
// Move 0 bytes to the right and mask out the first byte.
return (rgba & 0xFF);
}
```
## Example
In this small example we will create a white image:
```c
#include "MLX42/MLX42.h"
// Bytes Per Pixel. Since each pixel is represented as an integer, it will be four bytes for four channels.
#define BPP sizeof(int32_t)
int32_t main(void)
{
// Init mlx with a canvas size of 256x256 and the ability to resize the window.
mlx_t* mlx = mlx_init(256, 256, "MLX42", true);
if (!mlx) exit(EXIT_FAILURE);
// Create a 128x128 image.
mlx_image_t* img = mlx_new_image(mlx, 128, 128);
// Set the channels of each pixel in our image to the maximum byte value of 255.
memset(img->pixels, 255, img->width * img->height * BPP);
// Draw the image at coordinate (0, 0).
mlx_image_to_window(mlx, img, 0, 0);
// Run the main loop and terminate on quit.
mlx_loop(mlx);
mlx_terminate(mlx);
return (EXIT_SUCCESS);
}
```