cirkelboog  lengte straal = 1

 

 

 

 

 

 

 

 

 

 

 

vervagende cirkel

 

 

 

 

 

 

 

 
 nu met de kleurvector vec3_color = d*vec3(1.0 , 0.739 , 0.198);

hier zijn de hoeken niet wit want 2.25 * 0.198 = 0.445

 

 

cirkel met gekartelde omtrek

cirkel met gekartelde omtrek

de vervagende ellips

                               de vervagende ellips

met de length() functie een cirkelboog of een vervagende cirkel construeren                  terug naar de inleiding

De length() berekend de lengte van de pixel vector

Een cirkelboog met de straal = 1 vanuit het (0,0) punt 

een, zich vanuit het (0,0) punt, van zwart naar wit vervagende cirkelboog, waarvan de straal = 1 (is de maximale vector lengte)
De lengte van de coordinatoren op de rand van de booG:  st.x = cos(hoek) en st.y = sin(hoek);
In het witte gebied is de vector lengte groter dan 1 en wordt  afgerond naar 1. 

Dus de boog heeft een scherpe grens. Bijvoorbeeld  in de re boven hoek is de vectorlengte sqrt(2) = 1,1412

 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
      vec2 st = gl_FragCoord.xy/u_resolution; //de pixel coordinaten normaliseren naar waarden tussen de [0.0 1.0]
      float d = length(st);              // length(st) berekend de lengte van de pixel vector en is dus een float
      gl_FragColor = vec4(vec3(d),1.0);  //De drie kanalen van vec3 krijgen de waarde "d"
  }

Een vanuit het middel vervagende cirkel construeren

Nu moet de vectorlengte in het midden (0,0) zijn dit door 0,5 van de x en y coordinaten af te trekken
In het midden is dit het punt (0.5,0.5) 0.5 er van af trekken want 0.5 - st.x = 0 en 0.5 = st.y = 0 geeft de vectorlengte (0,0)
De lengte van de vectoren aan de randen van het canvas berekenen
In de linker onderhoek length(0.5 - st) dus als st.x = 0.0 en st.y = 0.0 is de vectorlengte sqrt(0.5*0.5 + 0.5*0.5) = 0.6036
In de rechter bovenhoek is st.x = 1 en st.y = 1 vectorlengte is dan sqrt(-0.5*-0.5 + -0.5*-0.5) = 0.6036
dus de hoeken van het canvas worden nooit wit
als het canvas breder wordt ontstaat een vervagende ellips
 
 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
      vec2 st = gl_FragCoord.xy/u_resolution; // de pixel coordinaten normaliseren naar waarden tussen de [0.0 1.0]
      float d = length(0.5 - st);                               
      gl_FragColor = vec4(vec3(d),1.0);
  }

Een kleinere cirkel in het midden van het canvas

Door -st*3.0 (regel 10) wordt de vector korter en daarmee de cirkel kleiner.

Voor het bepalen van de vectorlengte "d" worden eerst de berekeningen uitgevoerd, waana kwadrateren, optellen en de wortel bepalen, dus met:

st.x = 1 en st.y = 1 wordt dit sqrt((1.5 - 1.0 * 3.0) * (1.5 - 1 * 3.0) + (1.5 - 1* 3.0) * (1.5 - 1.0 * 3.0)) = 2.25 met d > 2 is de kleur wit

"d" wordt met de kleurvector vermenigvuldigd. Met "d" = 1.5 is de kleur meer lichtblauw want
voor het rode kanaal:      1.5 * 0.512 = 0.7725
voor het groene kanaa1: 1.5 * 1 = 1.5 wordt genormaliseerd naar 1
voor het blauwe kanaal:  1.5 * 0.715 = 1.07255 wordt genormaliseerd naar 1

Dit geeft de kleur vector  vec3(0.7725 ,  1.0 , 1.0):

met "d" 1 wordt de kleur meer groen want dan is de kleurvector vec3(0.512 , 1.0 , 0.715)

voor het middelpunt geldt st.x = 0 en st.y = 0 dan is de kleurvector = 0 wat een zwart middelpunt geeft

dus vectorvermenigvuldiging met "d" geeft een verschuiving van de kleur van zwart naar groen naar blauw en wit

 
 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
vec2 st = gl_FragCoord.xy/u_resolution;      
    float d = length(1.5-st*3.0);
    vec3 color = d*vec3(0.512,1.0,0.715);
 
gl_FragColor = vec4(color, 1.0);
}

 

Een cirkel maken met de length() functie en het if statement

Het if statement zorgt voor de scherpe overgang. De pixelvector komt vanuit het midden.
Zolang de vector < 0.3 is het canvas wit, 0.3 is de straal van de cirkel. Met een straal d=0.5 past de witte cirkel precies in het canvas
Als het canvas een brede rechthoek is ontstaat er een ellips.
Dit oplossen door ,mbv u_resolution, de st.x waarden aan te passen aan de st.y waarden (regel 11)
 
 
 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
   
void main() {
        vec2 st = gl_FragCoord.xy/u_resolution;
        st = st - 0.5;
        st.x = st.x * u_resolution.x/u_resolution.y;
 
        float d = length(st); 
        if (d < 0.3)   d = 1.0;  else d = 0.0;    //Hier is de straal 0.3 
        gl_FragColor = vec4(vec3(d),1.0);
}
 

 

Op de cirkelomtrek ontstaat een scherpe overgang van wit naar zwart, je zie dan een karteling.
Deze karteling verdwijnt als er in de cirkelomtrek wat grijze pixels komen. Dit wordt gerealiseerd met de smoothstep functie