Shadertoy: The flag of Romania - 002.

This is another step about learning shaders.
The old example can be updated with this source code.
I commented on the source code to see step by step how this working.
One way to understand how this working to the final result is to going back on the shader structures that generate output to the basic elements of the shader.
If we apply this case to solve the problem then from the display a color like a vec4 color for fragColor adding a sin function to wave the result, and so on.
Right, this code can be optimized in many ways depending on the result.

// learning process area step by step 
// the gl_FragColor is a vec4 type of float values in the range 0 to 1.
// because the values are from 0 to 1  this can used in many ways with for domain and range
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    // define a vec2 and uv can be divide to create waves 
    // use this to see the difference 
    // vec2 valul = vec2(0.01,1.0);
    vec2 valul = vec2(0.5,1.0);
    // define a vec2 this vector will be the vector of shadow
    vec2 unghi_valul = vec2(0.5,1.0);
    // this float will speed the animation with iTime
    float viteza = 3.0;
    // with the dot we can calculate the dot product of two vectors and result can be a shadow
    // the result of unghi can be changed when change the vectors and vectors math rules
    float unghi = dot(uv/valul, unghi_valul) - iTime * viteza;
    // the output can be used with sin to create a shadow wave
    // fill the screen with red
    fragColor = vec4(1,0,0,0) * sin(unghi);
    // fill the 2/3 of size with yellow color
    if(uv.x<(1.0/1.5))
    fragColor = vec4(1,1,0,0)  * sin(unghi);
    // fill the last 1/3 with the blue color 
    if(uv.x<1.0/3.0)
    fragColor = vec4(0,0,1,0)  * sin(unghi);
}

The result of this source code:

Shadertoy: The flag of Romania - 001.

Today I make the flag of Romania.
About this flag you can read at Wikipedia.
The goal of this simple tutorial is to learn the link between iResolution and the fill areas.
First, you need to normalized pixel coordinates from 0 to 1.
The gl_FragColor is a vec4 type of float values in the range 0 to 1.
We can use this property by fill the areas of the screen.
The example can be changed to use the RGBA.
The source code is this:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    // Output to screen
    // fill the screen with red
    fragColor = vec4(1,0,0,0);
    // fill the 2/3 of size with yellow color
    if(uv.x<(1.0/1.5))
    fragColor = vec4(1,1,0,0);
    // fill the last 1/3 with the blue color 
    if(uv.x<1 .0="" code="" fragcolor="vec4(0,0,1,0);">

This is the result of this shader:

Shadertoy: Simple sky with shadertoy tool.

Today I create a simple sky with the online tool shadertoy.
I used Fedora 30 distro Linux and my old video card:

VGA compatible controller: NVIDIA Corporation GT218 [GeForce 210] (rev a2)

This is the output:

CodePen: Include shadertoy example in the webpage.

This issue can be solve it easy.
You need to get the iframe share from you shadertoy example.
Then use my example HTML and CSS from my codepen example.
You can remove the javascript code from example.
This javascript code is used to show the formula of sphere. I used my shadertoy example named Ray Marching - 001.

Shadertoy: Shader objects with raymarching technique.

Another article about shader raymarching technique for today.
It's like the previous article created from the official video channel named The Art of Code.
The source code show how to create the basics objects like: capsule, torus, cube and cylinder.
The result of the source code of raymarching objects can be found on my account of ShaderToy website named catafest.

Shadertoy: About raymarching technique with source code.

The raymarching technique is a fairly new technique used to render realtime scenes and it is entirely computed in a screen-space shader.
The raymarching is similar to traditional raytracing (in that a ray is cast into the scene for each pixel) but is not the same technique.
How this works:
We have in a fragment shader is the position of the point we are rendering in world 3D coordinates and the view direction from the camera.
For each ray is extended by step in the view direction, until it hits something and creates a point.
This is the simple raymarching used a constant step.
The next step is the optimization calls for the use of signed distance fields.
A distance field is a function that takes in a point as input and returns the shortest distance from that point to the surface any object in the scene similar with a sphere around the hit point.
Distance fields allow us to limit how often we need to sample when marching along the ray, this is the reason of the named raymarching.
You can follow this technique on the official video channel named The Art of Code.
The result of the source code of raymarching example from this video tutorial can be found on my account of ShaderToy website.

Shadertoy: Flame 2D by catafest.

I create another shader using the shadertoy online tool.
This online tool helps users to understand the shaders theory.
All of the shaders theory is based on the math of graphics.
My example uses the basic shader for a 2D flame with minimal parameters to understand easier the math of this shader.
Let's see the source code:

// define iTime like Shader Inputs
#define time iTime
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    // vec2 uv = fragCoord/iResolution.xy;
 // create center of position of flame by xy and sized
 vec2 pos = ( fragCoord.xy / iResolution.xy )*2.0-vec2(1.,1.);
    // create flame variation 
    if(pos.y>-3.0){
  // variation by time and set up to -3.0
        // the 0.1 and 30 parameters create the variation of flame 
        // with ths sin and fract functions
        pos.y += 0.1*fract(sin(30.0*time));
 }
    // select background to black
 vec3 color = vec3(0.0,0.0,0.0);
 // set scale of flame 
 float p =.001;
    // create shape of flame (output y)
 float y = pow(abs(pos.x),3.0)/(1.0*p)*1.0;
 // create the hight of flame 
 float flame_out = length(pos+vec2(pos.x,y))*sin(0.9);
 // fix colors flame by RGB 
 if(flame_out < 0.9){
        // color for RG (red green)
  color.rg += smoothstep(0.0,0.3,0.6-flame_out);
        // fix color of flame by G (green)
  color.g /=2.4;
 }
 color += pow(color.r,1.0);
 // output color
    fragColor = vec4(color,1.0);

}

The result can be found here.

Shadertoy: New shader example : Old watch (IBL) .

This is a great example at shadertoy website.
The example come with this link to this article into first comment.
The example is simple but impressive.
What is interesting to see how some objects are created.

float sdPlane( const vec3 p ) {
 return p.y;
}

float sdTorus( const vec3 p, const vec2 t ) {
  vec2 q = vec2(length(p.xz)-t.x,p.y);
  return length(q)-t.y;
}

float sdTorusYZ( const vec3 p, const vec2 t ) {
  vec2 q = vec2(length(p.yz)-t.x,p.x);
  return length(q)-t.y;
}

float sdTorusYX( const vec3 p, const vec2 t ) {
  vec2 q = vec2(length(p.yx)-t.x,p.z);
  return length(q)-t.y;
}
...

Shadertoy: Test your shader online.

If you want to learn and test 3D shader technology, then you can try Shader Toy v0.3 .
This web site allows you to write shaders and view the result .
It also comes with some useful examples .
More can be found on website .