Flevopink

Van alles wat...

Plak de te bewerken shader in de editor en verander variabelen met het muiswieltje

$f = fract(x*8.0);$

f = fract(x*8.0);

shader 1, regel 11 ingeschakeld

shader 1; 8 volledige cirkels

regel 11 en 15 ingeschakeld

regel 16 heeft hetzelfde effect als regels 11 en 15

shader 2, regel 12 ingeschakeld, regel 14 uitgeschakeld

cirkels in het eerste kwadrant

shader 2, cirkels in de vier kwadranten

shader 3, regel 13 ingeschakeld, regel 14 uitgeschakeld

shader 3, regel 14 ingeschakeld

shader 4

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

Het artikel bevat de shaders shader 2 shader 3 shader 4

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.

regel 9 uitschakelen en regel 10 inschakelen er ontstaat een cirkel

De cirkel blijft, bij veranderen van het canvas in x richting, uitgelijnd in het midden, het canvas is [-1. , +1.]

Door in regel 14 pct = fract(-d); ontstaat een zwarte cirkel met een gradient , de fract functie wordt in dalende richting doorlopen.

Door in regel 14 pct = fract(d); ontstaat een witte cirkel met een gradient , de fract functie wordt in stijgende richting doorlopen.

shader 1

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy; 
  // vec2 st = (gl_FragCoord.xy * 2.0 - u_resolution.xy)/u_resolution.y; 
  // 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);
}

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.

shader 2

 

 #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;    // Zo komt  het (0,0) punt in het midden van het canvas
 // 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 afgetrokken (regel 11 t/m 14)

regel 10; st.xy coordinaten tussen [-1,1] , bij veranderen van x blijft het (0,0) punt in het midden van het canvas

zie het smoothstep() artikel

De shaders en kleuren die sinusvormig veranderen

schakel regel 15 uit en regel 16 in. nu beweeegt de shader abs sinusvorming

selecteer uit regels 11 t/m 14 een shader

regel 17 uitschakelen en regel 18 inschakelen, zo ontstaan sinusvormige kleurveranderingen

shader 3

 
 #ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
uniform float u_time;
 
void main(){
    vec2 st = (gl_FragCoord.xy * 2.0 - u_resolution.xy)/u_resolution.y;
//  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.); 
 // float pct = fract(d*sin(u_time/5.)*8.);       
    gl_FragColor = pct+vec4(vec3(0.500,0.006,0.218),1.0);   
 // gl_FragColor = pct+vec4(vec3(abs(sin(u_time/2.)*2.),0.3,abs(cos(u_time/2.000))),1.0);
}

Cirkel met zwart naar grijs gradient binnen en buiten de cirkel

De zwart naar grijs gradient in de cirkel ontstaat door "d' aboluut te maken (regel 13)

shader 4

 

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

void main() { 
 vec2 st = (gl_FragCoord.xy * 2.0 - u_resolution.xy)/u_resolution.y; 
 float d = length(st); 
 d = d - 0.500; 
 d = abs(d); 
 // d = fract(d*3.056); 
 gl_FragColor = vec4(vec3(d),1.0);
}

shader 1, inschakelen van regel 11

de x waarden liggen tussen [-1.0 , +1.0]

zo ontstaat de cirkel. De fract functie vormt 2 zaagtanden.

shader 1 de x waarden liggen tussen [0.0 , 1.0]

shader 1, regel 12 en 15 ingeschakeld

shader 2, regel 13 ingeschakeld

$length fract07$

shader 2, regel 15 ingeschakeld

shader 3, regel 12 ingeschakeld, regel 14 uitgeschakeld

shader 3, regel 11 ingeschakeld, regel 14 uitgeschakeld