Flevopink

Van alles wat...

dankzij de mod functie twee zaagtandjes

smoothstep met t1 = 0.1 en t2 = 0.9

De cubicPulse functie van Iñigo Quiles

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

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