Trying to learn the basic of shaders in 24hours 
Tags: shaders, glsl
Published: 2021-03-19 13:25:51

First of all, I'd like to share with you the experience I had with shader, I promise it won't be long, here it is: None

I always was fascinated by how people can make stunning shader and was like hmmm, I wonder if I can learn the basic of it, in this post I'll show you what I did and learned throughout my experiments

#First hour 
So the first day I started by googling how to make shaders, and oh boy I was not ready for this, I found a bunch of link containing Math.
I decided to find the basic explanation of a shader to start, I learned that the Shader was handled by the GPU, and it was divided in two part:
* Fragment shaders
* Vertex shaders

#Youtube

Then I found this [Youtube Playlist](https://www.youtube.com/watch?v=HIvNePu7UEE&list=PL4neAtv21WOmIrTrkNO3xCyrxg4LKkrF7), the person in this video is explaining really well through examples

In the first video he covers different tools to allow us a live preview of the shader itself, here the tool I used for this:
* VScode
* GLSL-canvas
* GLSL-Linter

# The basic structure of a simple shader
basicaly the structure of the code looks like C
Here is the basic structure for a red color
```GLSL
void main(){
    vec3 color = vec3(0.3, 0.5, 0.3 );
    gl_FragColor = vec4(color,1);
}
```
Here we define a **Vector3** with 3 value corresponding to the **RGB channels**, Then we defined a **gl_FragColor wich is the final color output** with a Vector4 since we have color with RGB, the fourth Vector is for the Alpha

#Progress was made 
I quickly tried to play with value and got different colors, but I wanted to go way more further than that, I continued on the series and learned the **Uniforms** wich is a way to pass a data from the CPU into the GPU
GLSL have some existing Uniforms like:
```GLSL
uniform vec2 u_resolution;  // Canvas size (width,height)
uniform vec2 u_mouse;       // mouse position in screen pixels
uniform float u_time;       // Time in seconds since load
```

#My first shape
You have to know that in the opposite of canvas, 3d stuff, p5.js and more, **Shader don't have a prebuilt shape system**
So I had to create a function that returns a Float for the shape, here is how you can create a circle in GLSL:
```GLSL
uniform vec2 u_resolution;

float circleShape(vec2 position, float radius){
    return step(radius, length(position - vec2(0.5)));
}

void main(){
 vec2 position = gl_FragCoord.xy / u_resolution;

 vec3 color = vec3(0.8392, 0.1608, 0.1608);
 float circle = circleShape(position, 0.2);

 color = vec3(circle);
 gl_FragColor = vec4(color,1.0 );  
}
```

Okay let me cut that in multiple part for you
first we have the function to return a float for the circle
```GLSL
float circleShape(vec2 position, float radius){
    return step(radius, length(position - vec2(0.5)));
}
```
Then we have this weird vec2 position wich correspond basicaly to the canvas size
```GLSL
vec2 position = gl_FragCoord.xy / u_resolution;
```
and then we assign the vec3 of the circle into color

#Sin Cos 
In this video i've learned how to use a new uniform wich is time, and then applied that to a sin() and cos() functions, to get smooth movement during time

```GLSL
vec2 translate = vec2(0.0, cos(u_time / 2.0));
```

# Water colors

In this video, I've learn the for loop, how to use it with a shape like this:

```glsl
for(int n = 1; n < 25; n++){
        float i = float(n);
        coord += vec2(0.7 / i *  sin(i* coord.y + u_time + 0.3 * i) + 0.8, 0.4 / i * sin(coord.x + u_time +0.3 * i) + 1.6 );
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpwvq94olpmse2apmu71.png)

## Light

```glsl
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x,u_resolution.y );
    coord.x += sin(u_time) + cos(u_time * 2.1);
    coord.y -= cos(u_time) - sin(u_time * 1.6);
    float color = 0.0;
    
    color += 0.1 * (abs(sin(u_time)) + 0.1) / length(coord);

    gl_FragColor = vec4(vec3(color, color, color),1.0);
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g93f8t4mzziyqt7iph25.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxcm2m10hzpkzp7vk93m.png)

And that's pretty much what I've learned so far, I learned that Math was really important and that I was not so good at it 😅, but this challenge allowed me to discover something new, I think I could redo it another time with another subject.

Thank you for ready until here, I hope you liked my story and if you want to challenge yourself to create / learn something in 24hours and document your jouney, I'd love to see it

Have a nice day ! 👋
> Creativity is like a dream, you can do anything with your mind, and if you don't suck at math 😅