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, 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

```
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:

```
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:

```
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

```
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

```
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

```
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:

```
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 );
}
```

## Light

```
#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);
}
```

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 ðŸ˜…

## Discussion (0)