zwart naar wit gradient

zwart naar wit gradient 

  

zwart naar 33% wit gradient

zwart naar 33% wit gradient

 

 

 

regel 11 bijgeschakeld, regel 14 ingeschakeld

regel 11 bijgeschakeld, regel 14 ingeschakeld

 

 

 

 

 

  

  

 

 

 

 

 

sign01

 

sign02

  

sign03

 

 

 

 

mod(st.x, omslagpunt);                  terug naar de inleiding          zie ook The Book of Shaders hoofdstuk 6

 

y = mod(x, 0.333);

 

mod(st.x, 0.5); retourneerd  x = y voor x = 0 t/m x = 0.5 waarna x weer 0 word, enz

zo ontstaat een zaagtand. mod(st.x, 1.0); geeft een canvas met een verticaal verlopende zwart naar wit gradient

Onderstaande shader geeft 3 verticale stroken met een zwart naar 33% wit gradient.
Met float d = 3.0*mod(st.x.0.333); (regel 13)  hebben de stroken een zwart naar wit gradient. (want 3.0*0.3333 =0.9999)
 
<-- y = mod(x, 0.333);
 
 
 
 
 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
   void main() {
        vec2 st = gl_FragCoord.xy/u_resolution;          
        float d = mod(st.x,0.333);      
       // float d = 3.0*mod(st.x,0.3333); 
        gl_FragColor = vec4(vec3(d),1.0);
 }
 

y = fract(x) retourneerd x = y

y = fract(x*3.0)

 

Met float d = fract(st.x); heeft het canvas een verticale gradient van zwart naar wit.

Met float d = fract(st.x*3.0); heeft het canvas 3 verticale stroken met gradienten van zwart naar wit.
Met float d = fract(st.y*3.0); bijschakelen (regel 11)  en regel 14 inschakelen heeft het canvas verticale en horizontale stroken met een kleurtje.
 
 <--- y = fract(x*3.0)                3.0*mod(st.x,0.3333);   heeft hetzelfde effect als fract(st.x*3.0);
 
 
 
 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;            
    float d = fract(st.x*3.00);   
  //float d2 = fract(st.y*3.00); 
       
    gl_FragColor = vec4(vec3(d),1.0);  
  //gl_FragColor = d2*d*vec4(vec3(0.724,1.000,0.199),1.0);
 }
 

y = clamp(x, start clamp, stop clamp)

 

y = clamp(x, 0.5, 1.0)clamp = klem, hier wil dat zeggen dat, tussen clamp start en clamp stop, x aan y vast zit dus x = y.      clamp(x 00 10

float d = clamp(st.x, 0.5, 1.0); tussen x = [0.5 , 1.0] geldt x = y.
Tot het midden (x = 0.5) is het canvas grijs daarna een gradient van grijs naar wit                                 y = clamp(x,0.0,1.0); is hetzelfde als y = fract(x); -->
 
<----- y = clamp(x, 0.5, 1.0)
 
 
 
 
 

 
#ifdef GL_ES 

precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
   vec2 st = gl_FragCoord.xy/u_resolution;      
   float d = clamp(st.x,0.5,1.0);       
 
   gl_FragColor = vec4(vec3(d),1.0);
}

 

y = sign(x)

voor alle waarden van x < 0 geld y = 0
voor alle waarden van x > 0 geld y = 1
sign(st.x-0.5)/2.0;
 
 
 
met float d = sign(st.x-0.5); is de eerste helft van het canvas zwarten de andere helft wit
met float d = sign(st.x-0.5)/2.0; is de eerste helft van het canvas zwart en de andere helft is grijs
met float d = -sign(st.x-0.5); is de eerste helft van het canvas wit en de andere helft is zwart
met float d = sign(st.y-0.5); (regel 11) en float d2 = -sign(st.x-0.5);(regel 12)  ontstaat er, als regel 14 is ingeschakeld, een groen zwart blokpatroon

 

 

 <----- y = sign(st.x-0.5)/2.0;

 

 

 
 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
     vec2 st = gl_FragCoord.xy/u_resolution;  
     float d = sign(st.x-0.5)/2.0;     
    //float d = sign(st.y-0.5);                     
    //float d2 = -sign(st.x-0.5);              
     gl_FragColor = vec4(vec3(d),1.0);
    //gl_FragColor = d*d2*vec4(vec3(0.348,1.000,0.181),1.0);
}

 

float afstand = distance(vec2(1), vec2(2));

De distance functie heeft twee vec2 argumenten. de functie retourneerd, als float, de afstand tussen deze vectoren.

Met de eerste vector de coordinatoren van de pixels en de tweede vector een pixel in het canvas.
bijvoorbeeld float d = distance(st , vec2(0.5); hierin is vec2(0.5); de pixel (0.5,0.5).

met vec3 color(d); ontstaat zo een vervagende cirkel rond de zwarte pixel (0.5, 0.5)

twee distance functies opgeteld

float d = distance(st , vec2(0.3)) + distance(st , vec2(0.7));  Nu onstaat een ellipse met grijze punten op (0.3 , 0.3) en (0.7 , 0.7)
Hoe verder de punten van elkaar hoe vager de cirkels, want "d" kan alleen 0 zijn als de twee vectoren in hetzelfde punt staan.

 

 

#ifdef GL_ES

precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution;     
    float d = distance(st,vec2(0.5));       
  //float d = distance(st,vec2(0.3)) + distance(st,vec2(0.7));  
    
    vec3 color = vec3(d);    
    gl_FragColor = vec4(color, 1.0);
}