cirkel met een gekartelde omtrek

 cirkel met een gekartelde omtrek

 

 

                                                                                    

 

langwerpig canvas, de cirkel is rond dankzij coderegel 10

 
 de cirkel staat niet in het midden van het canvas
coderegel 17 ingeschakeld
 

 

Een niet gekartelde cirkel met smoothstep construeren met het gebruik van de length() functie.     terug naar de inleiding

Het gedrag van de smoothstep curve in 4 stappen beschrijven

1) is de curve stijgend of dalend?  t1>t2 de curve gaan van 1 naar 0, de curve is dalend                                                  
2) wat is de positie van t1 tov t2? t1 bevindt zich rechts van t2    
3) wat is de afstand tussen t1 en t2? de afstand tussen t1 en t2 is 0.3-0.3-0.0. = 0.01    
4) de curve in een assenstelsel tekenen met d < 0.3-0.01 smoothstep = 1 en met d > 0.3 smoothstep = 0    

 

ad 4) De horizontale as van het assenstelsel is de vectorlengte "d" De verticale as is de output van smoothstep.
         Het middelpunt van het canvas is het (0,0) punt van de pixelvector.
 
 

#ifdef GL_ES 
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
   
void main() {
     vec2 st = gl_FragCoord.xy/u_resolution;    // vec2 st zijn de genormaliseerde pixel coordinaten st.x en st.y
     st.x = st.x * u_resolution.x/u_resolution.y; // aanpassing van st.x, als het canvas langwerpig is, zodat de cirkel rond blijft
     st = st - 0.5;                          // met st = st - 0.5 is het midden van het canvas het (0,0) punt van de pixelvector
     float d = length(st);                  // d is de lengte van de pixelvector.
     float r = 0.3;                        // r = 0.3 is de straal van de cirkel
     float pct = smoothstep(r, r-0.01, d); // t1 > t2   afstand tussen t1 en t2 = 0.3 - 0.3 - 0.01 = -0.01 dit geeft een cirkel zonder karteling
                                                                       
     gl_FragColor = vec4(vec3(pct),1.0);
 //  gl_FragColor = pct*vec4(vec3(1.0,1.0,0.0),1.0);    //geeft een gele cirkel met een zwarte achtergrond
}

effecten van veranderingen in de code

1) door in regel 14   t2 te veranderen in r - 0.00000001 ontstaat een cirkel met een gekartelde omtrek want de smoothstep curve is veel te stijl
2) met t2 = r + 0.01 is de cirkel zwart want t1 < t2 dus de curve is stijgend
3) coderegel 17 inschakelen en coderegel 16 uitschakelen geeft een gele cirkel met een zwarte achtergrond