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);
}
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
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.Het middelpunt van de cirkel wordt nu 3.0/2.0 = 1.5.
#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.000,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