dankzij de mod functie twee zaagtandjes

 dankzij de mod functie twee zaagtandjes

 

 

 

smoothstep04

smoothstep met t1 = 0.1 en t2 = 0.9

 

 

 

 

 

 

 

 

 

De  cubicPulse functie van Iñigo Quiles

De  cubicPulse functie van Iñigo Quiles

 

 

 

zwarte band rond de curve, regel 17 ingeschakeld

brede zwarte band rond de curve. coderegel 17 ingeschakeld

st.x tot de vijfde macht   de step functie maakt een stap bij st.x = 0.5                                                                
 st.x tot de vijfde macht    de step functie maakt een stap bij st.x = 0.5  
 

smoothstep shaders met niet lineare functies                    terug naar de inleiding

wiskundige functies om de lijn een kromming te geven door in de plot functie st.x als argument van een niet lineare functie

1) pow(grondtal, exponent) functie
    Met de pow functie wordt het grondtal tot een macht verheven (machtsverheffen = raise to the power of)

    pow(st.x, 5.0) retourneerd st.x tot de vijfde macht, zie coderegels 9 en 16

2) step(drempel,x) functie 

    step(0.5,st.x) zodra st.x = 0.5 gaat de functie van 0 naar 1, zie coderegels 10 en 17

3) mod(x, omslagpunt) 
    mod(st.x, 0.5) retourneerd x = y, op het omslagpunt geld x = 0.5 en y = 0.5 na de omslag geld x = 0.5 en y = 0.0 dus  x-0.5 = y

    zo ontstaat een zaagtand, zie coderegels  11 en 18 , mod(st.x, 1.0) geeft een schuine lijn

4) smoothstep(t1, t2, x waarde van een punt op de curve;
    smoothstep(0.1, 0.9, st.x);  zie coderegels 12 en 19
 
 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float plot1(vec2 st) {         
  // return smoothstep(0.00,0.01, abs(pow(st.x,5.)  - st.y)); 
  // return smoothstep(0.00,0.018,abs(step(0.5,st.x) - st.y)); 
  // return smoothstep(0.00,0.01, abs(mod(st.x,0.5) - st.y)); 
     return smoothstep(0.0,0.01,  abs(smoothstep(0.1,0.9,st.x) -st.y)); 
} 
 
float plot2(vec2 st) {    
  // return smoothstep(0.01,0.0, abs(pow(st.x,5.) - st.y));
  // return smoothstep(0.018,0.0,abs(step(0.5,st.x) - st.y)); 
  // return smoothstep(0.01,0.0, abs(mod(st.x,0.5) - st.y)); 
     return smoothstep(0.01,0.0, abs(smoothstep(0.1,0.9,st.x) - st.y));
}
 
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;   
   
    float pct1 = plot1(st);
    float pct2 = plot2(st);
    vec3 color = pct1*vec3(st.x) + pct2*vec3(0.0,1.0,0.0);
gl_FragColor = vec4(color,1.0);
}

effecten van veranderingen in de code 

In de color variabele (regel 27) de zwart wit gradient veranderen door st.x te vermenigvuldigen met bijvoorbeeld 0.5 dus vec3(0.5*st.x)

 

shaders met samengestelde niet lineare functies.

In dit voorbeeld wordt de functie "cubicPulse" (regel 9)  ,bedacht door  Iñigo Quiles, gebruikt. zie de glsl editor in The Book of Shaders
Iñigo Quiles maakt gebruik van een plot functie. In onderstaande code heb ik dit gesplitst in twee plot functies, plot1 voor de zwart wit gadient en plot2 voor de curve
De float formule (regel 28), het resultaat van de functie "CubicPulse",  wordt als argument aan de plot functies gegeven.

Door "formule" in regel 32 met de zwart wit gradient vect3 te vermenigvuldigen zal deze op het gedrag van de curve reageren

Door het inschakelen van regel 17 is de afstand tussen t1 en t2 groter wat resulteerd in een brede zwart vervagende zwarte band rond de curve 
 
 
 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
//dit is een functie bedacht door Iñigo Quiles
float cubicPulse( float c, float w, float x ){
    x = abs(x - c);
    if( x>w ) return 0.0;
    x /= w;
    return 1.0 - x*x*(3.0-2.0*x);
}
 
float plot1(vec2 st, float formule) {    
 //  return smoothstep(0.0,0.70, abs(formule - st.y));
     return smoothstep(0.0,0.02, abs(formule - st.y));
}
 
float plot2(vec2 st, float formule) {    
     return smoothstep(0.02,0.0, abs(formule - st.y));
}
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;   
   
    float formule = cubicPulse(0.5,0.2,st.x);
    float pct1 = plot1(st,formule);
    float pct2 = plot2(st,formule);
    
    vec3 color = pct1*vec3(formule-0.01*st.x) + pct2*vec3(0.0,1.0,0.0);
    gl_FragColor = vec4(color,1.0);
}