f = fract(x*8.0);

f = fract(x*8.0);

 

 

 

 

8 volledige cirkels

float pct = fract(length(st*16.0-8.0));
heeft hetzelfde effect
regels 11 t/m 15 uitgeschakeld, regel 16 ingeschakeld

 

 

 

l cirkels in het eerste kwadrant

 cirkels in het eerste kwadrant

 

cirkels in de vier kwadranten

cirkels in de vier kwadranten

 

 

 

 

 

 

 

 

 

 

 

length fract01         length fract00f = fract(x);       length fract04                                                                             
           

 

De lengte van de pixelvector invoeren in de fract() functie      zie ook The Book of shaders hoofdstuk 7        terug naar de inleiding

Door de pixelvector lengten in een fract functie te plaatsen ontstaat ,vanuit het (0.0,0.0) punt,
een van zwart naar wit vervagende boog van 0 t/m 90 graden met een straal van 1.0.
In het gebied buiten deze boog ontstaat het begin van een volgende van zwart naar wit vervagende boog.
Als de vector langer is dan 1.0 zal er opnieuw een boog van zwart naar wit worden getekend, omdat fract(1.0) = 0.0
In de rechterbovenhoek van het canvas is de vector lengte sqrt(2) = 1.414)

Met  float pct = fract(d*8.0); (regel 14) verschijnen er 8 bogen van 0 t/m 90 graden en 3 kortere bogen.

het toevoegen van st*2.0 - 1.0; (regel 11)

Het coordinaten stelsel wordt nu 2 keer zo groot rechtsboven is het punt (2,0) door er  vervolgens 1 van af te trekken wordt dit punt (1,1)
Het (0,0) punt komt in het midden van het canvas, de x waarden liggen  tussen de [-1.0, +1.0] en de y waarden tussen de [+1.0, -1.0].

met de vectorlengte  d * 8.0 invoeren in fract dus "fract(d*8.0)"   ontstaan 8 volledige cirkels.

In regel 13 wordt de vectorlengte met de stelling van pythagoras berekend en heeft dus hetzelfde effect als de code in regel 12

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy; 
        
  // st = st *2.-1.0; 
    float d= length(st);  
 // float d = sqrt(st.x*st.x + st.y*st.y);
    float pct = fract(d);
 // float pct = fract(d*8.0);
 // float pct = fract(length(st*16.0-8.0));
 
  gl_FragColor = vec4(vec3(pct),1.0);
}
 
cirkels in het eerste en derde kwadrant              acht bogen van 0 t/m 90 graden in 4 kwadranten                                                                
 cirkels in het eerste en derde kwadrant    acht bogen van 0 t/m 90 graden  
 

Vier cirkels in de vier kwadranten

cirkels in het eerste kwadrant

Nadat de lengte van de pixelvector is bepaald wordt de vector 0.5 korter (regel 12 ingeschakeld)
Het beginpunt van de vector komt in het (0.5, 0.5) punt van het eerste kwadrant, er worden 8.0/0.5 = 4 volledige cirkels,

vanuit dit punt, getoond.

cirkels in het eerste en derde kwadrant

In het derde kwadrant zijn x en y negatief door float d = length((st)-0.5) * length((st)+0.5); komen er ook cirkels in het derde kwadrant (regel 13 ingeschakeld)

cirkels in de vier kwadranten.

Omdat voor kwadranten 2,3 en 4 length((st)-0.5); negatief is heeft de pixelvector een lengte 0
Door abs te gebruiken wordt length((st)-0.5); positief en er worden in ieder kwadrant 8.0/0.5 = 4 volledige cirkels getoond.

(regel 14 ingeschakeld)

acht bogen van 0 t/m 90 graden in de vier kwadranten

Met length((st) -1.0); zijn de hoeken van het canvas de beginpunten van de pixelvectoren.
zo ontstaan  in ieder kwadrant 8 bogen van 0 t/m 90 graden (8/1=8) (regel 15 ingeschakeld)
Door regel 18 in te schakelen krijgt de shader een groen kleurtje.
 
 

 #ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy; 
        
    st = st *2.-1.0;
 // float d = length((st)-0.5);
 // float d = length((st)-0.5) * length((st)+0.5); 
    float d = length(abs(st)-0.5);  
 // float d = length(abs(st)-1.0);
    float pct = fract(d*8.0);
    gl_FragColor = vec4(vec3(pct),1.0);  
 // gl_FragColor = vec4(pct*(vec3(0.078,0.500,0.262)),1.0);   
}

 
Schets met 2 maal vector lengtes die na aftrekken van een getal met elkaar worden vermenigvuldigd,
gedeeld, opgeteld of afgetroken (regel 11 t/m 14)
 

 
 #ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
  vec2 st = gl_FragCoord.xy/u_resolution.xy;         
  st = st *2.0-1.0;      
//  float d = length(abs(st)-0.180) * length(abs(st)-0.840);     
//  float d = length(abs(st)-0.252) / length(abs(st)-0.344);
//  float d = length(abs(st)-0.180) + length(abs(st)-0.840);    
   float d = length(abs(st)-0.564) - length(abs(st)-0.832);
   float pct = fract(d*8.0); 
//  float pct = fract(d*5.664);       
  gl_FragColor = pct+vec4(vec3(0.500,0.006,0.218),1.0);   
}

 
 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Zie voor de code de derde schets
regel 12 en 16 ingeschakeld
 
 
 

length fract10

 regel 11 en regel 15 ingeschakeld