Smooth introduction to shaders talk

My introduction to shaders talk slides pdf ppt

given at Xenium 2022

Smooth introduction to shaders - shader list with code and screenshots

This is the list of shaders I will live code and present (teach) during the Xenium2022 demo party in Katowice.

Feel free to learn and enjoy.

 

Xenium01, simple gradient

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    float c = uv.x;
    
    vec3 col = vec3(c, c, c);
    
    // Output to screen
    fragColor = vec4(col,1.0);
}

Open it here: https://www.shadertoy.com/view/NtGyDW

Xenium02, light

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    vec2 m= vec2(0.25+0.2*sin(iTime*2.0),0.5+0.2*sin(iTime));
    float d=1.0-length(uv-m);
    
    // Time varying pixel color
    vec3 col = vec3(d,d,d);
    
    // Output to screen
    fragColor = vec4(col,1.0);
}

Open it here: https://www.shadertoy.com/view/NlycWW

 

Xenium03, texture zoom

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;  
    uv = (uv-vec2(0.5,0.5))*20.0*(0.5+0.45*sin(sin(0.2*iTime)*0.9));
    vec4 col = texture(iChannel0, uv);
    fragColor = col;
}

Open it here: https://www.shadertoy.com/view/flGyDW

Xenium04, texture zoom motion blur

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;    
    vec2 uv1 = (uv-vec2(0.5,0.5))*10.0*(0.5+0.2*sin(3.0*iTime));
    vec2 uv2 = (uv-vec2(0.5,0.5))*10.0*(0.5+0.22*sin(3.0*iTime));
    vec4 col = texture(iChannel0, uv1);
    vec4 col2 = texture(iChannel0, uv2);
    fragColor = (col+col2)/2.0;
}

Open it here: https://www.shadertoy.com/view/NlGyDW

 

Xenium05, planar deformation 1

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 c = vec2(0.2*sin(iTime),0.23*cos(iTime));
    vec2 uv = fragCoord/iResolution.xy-vec2(0.5,0.5);
    vec2 uv1 = (uv*uv-c)*(uv*uv-c);   
    vec4 col = texture(iChannel0, uv1);
    fragColor = col;
}

Open it here: https://www.shadertoy.com/view/NlyyDW

Xenium06, planar deformation 2 (star)

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 c = vec2(0.2*sin(iTime),0.23*cos(iTime));
    vec2 uv = fragCoord/iResolution.xy-vec2(0.5,0.5);
    float d = length(uv);
    vec2 uv1 = (uv)/d;//*uv-c)*(uv*uv-c);   
    vec4 col = texture(iChannel0, uv1+c);
    fragColor = col;
}

Open it here: https://www.shadertoy.com/view/flGcDW

 

Xenium07, planar deformation 3 (deform)

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 q = fragCoord.xy / iResolution.xy;
    vec2 p = (-1.0+2.0*q)*vec2(iResolution.x/iResolution.y,1.0);       
    // 0-1 aspect ratio, iq

    // deform
    vec2 uv;
    float d = length(p)+0.5;
    uv=vec2(p)/d;

    vec3 col = texture(iChannel0, uv+iTime*0.5 ).rgb;
        
    col*=d*0.90;
    
    fragColor = vec4(col, 1.0);

}

Open it here: https://www.shadertoy.com/view/NlGcDW

 

Xenium08, planar walls

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   vec2 q = fragCoord.xy / iResolution.xy;
   vec2 p = (-1.0+2.0*q)*vec2(iResolution.x/iResolution.y,1.0);
   // 0-1 aspect ratio, IQ

    // deform
    p.y-=0.75+0.35*sin(iTime*0.3);
    vec2 uv;
    float d = abs(p.y+0.8);                     //+0.2*sin(iTime));
    uv=vec2(p)/(d);                                   ///sin(phi);
    
    uv.y-=iTime*0.01;

    vec3 col = texture(iChannel0, uv+iTime*0.5 ).rgb;
    //vec3 col = texture(iChannel0, uv ).rgb;
    
    col*=d*2.90;
    
    fragColor = vec4(col, 1.0);
}

Open it here: https://www.shadertoy.com/view/NtycDW

 

Xenium09, ball (deformation)

 

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   vec2 c = vec2(4.5*sin(iTime*1.0),3.53*cos(iTime*1.0));
    vec2 uv = fragCoord/iResolution.xy-vec2(0.5,0.5);
    uv += c*0.07;
    uv.y*=0.66;
    
    float d = length(uv);
    
    vec2 uv1;
    float R=0.17+0.05*sin(iTime*2.2);
    
    if(d>R) uv1 = (uv)/(d*d);
    if(d<R) uv1 = (1.5/R)*1.5*(uv)*(1.0+pow(d,0.5));
   
   
    vec4 col = texture(iChannel0, uv1+c);
    
    if(d<R) col*=(1.0-d/R)*3.0;
    if(d>R) col*=(1.0-(2.0-d/R)*1.0);

    fragColor = col;

}

Open it here: https://www.shadertoy.com/view/flycDW