length() berekend de lengte van de pixelvector

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

Het artikel bevat 4 shader schetsen: shader 2, shader 3, shader 4, shader 5

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

shader 1

 

#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) dan zijn st.x = 0.0 en st.y = 0.0 is de vectorlengte sqrt(0.5*0.5 + 0.5*0.5) = sqrt(0.5) = 0.707

In de rechter bovenhoek is st.x = 1 en st.y = 1 vectorlengte is dan sqrt((0.5-1)*(0.5-1) + (0.5-1)*(0.5-1)) = sqrt(0.5) = 0.707

dus de hoeken van het canvas worden nooit wit

als het canvas breder wordt ontstaat een vervagende ellips

shader 2

 

#ifdef GL_ES
precision mediump float;  
#endif
uniform vec2 u_resolution;
void main() {
      vec2 st = gl_FragCoord.xy/u_resolution; // de pixel coordinaten (in st) normaliseren naar waarden tussen de [0.0 1.0]
      float d = length(0.5 - st);   //de vector lengte d is in het midden van het canvas 0.0                         
      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

shader 3

 

#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)

shader 4

 

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

grotere gekleurde cirkel

shader 5

In gl_FragColor staat "d" in het rode, groene en blauwe kanaal

Voor de pixels in de cirkel geldt "d = 1"

Door van "d" een getal tussen de 0 en 1 af te trekken krijgt de crikel een kleur

Met in regel 10: st.x = st.x-0.6 verplaats je de cirkel naar rechts

Met in regel 11: st.y = st.y-0.6 verplaats je de cirkel omhoog

Door in regel 13 d < 0.5 te veranderen wordt de cirkel groter of kleinen.

 
#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution; 

void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
st.x = st.x - 0.5;
st.y = st.y - 0.5;
float d = length(st); 
if (d < 0.5)  d = 1.;  else d = 0.;  //Hier is de straal 0.5
gl_FragColor=vec4(float(d-0.044),float(d-0.648),float(d-1.00),1.);
}

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

Flevopink