## DEV Community 👩‍💻👨‍💻 # Trying to learn the basic of shaders in 24hours

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:

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

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;

}

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

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 😅