美學運算 教學

    void main() {
        vec2 st = gl_FragCoord.xy/u_resolution.xy;
        st.x *= u_resolution.x/u_resolution.y;
        st= st*2.0-1.0;
        
        // vec2 pin=vec2(st.x, -0.212*sin(st.x*20.0));//控制頻率與振幅
        // float dist=length(st-pin);
        
        st.y *= -1.;// 翻轉
        float dist=heart(st,0.796);
    
        vec3 color = vec3(0.);
        //1st method
        color = vec3(smoothstep(0.0,0.1,dist));
        //2nd method
        color = vec3(glow(dist, 1.0, 0.04));
        //3rd method
        color = vec3(exp(-dist*10.0));
        
        // color *= vec3(0.491,0.132,0.650);
    
        gl_FragColor = vec4(color,1.0);
    }
            

    void main() {
        vec2 uv = gl_FragCoord.xy/u_resolution.xy;
        //uv.x *= u_resolution.x/u_resolution.y;
        uv=fract(uv*3.0);
        
    
        //定義框
        float L = smoothstep(0.1, 0.12, uv.x);
        float B = smoothstep(0.1, 0.12, uv.y);
        float R = smoothstep(0.1, 0.12, 1.-uv.x);
        float T = smoothstep(0.1, 0.12, 1.-uv.y);
        float rect = L*B*R*T; //黑顏料使用乘法, 白顏料使用加法
        
        //vec2 uv2= uv*2.0-1.0;
        //float rect2 = smoothstep(0.2, 0.29, abs(uv2.x))
            //+smoothstep(0.6, 0.65, abs(uv2.y));
    
        gl_FragColor = vec4(vec3(rect),1.0);
    }
            

    void main() {
        vec2 uv = gl_FragCoord.xy/u_resolution.xy;
        uv.x *= u_resolution.x/u_resolution.y;
        vec2 uvs = fract(uv * 6.);
        vec2 ipos = floor(uvs);
        vec2 fpos = fract(uvs);
        uv = fpos * 2.0 - 1.0;
    
        float circle_dist = square(uv, 0.75 + 0.45*random(ipos));
    
        float glow_circle = glow(circle_dist, 0.328, 0.56);
        vec3 color = vec3(glow_circle);
            
        gl_FragColor = vec4(color * vec3(.3,.4,.65), 1.0);
    }
            

    void main() {
        vec2 uv = gl_FragCoord.xy/u_resolution.xy;
        uv.x *= u_resolution.x/u_resolution.y;
        
        //grid repetition
        vec2 uvs=uv*6.;
        vec2 ipos = floor(uvs);  // get the integer coords
        vec2 fpos = fract(uvs);  // get the fractional coords
        uv= fpos*2.0-1.0;
        uv*= rotate2d(random(ipos)*3.14159+u_time*0.5);
    
        //drawing distance function 
        float draw = square(uv, 0.362);//sdFish(1.0, uv, 0.1), 
            square(uv, 0.362), heart(uv, 0.5)    
        //float glow_draw = smoothstep(0.003,0.00,draw); //1st method
        float glow_draw = glow(draw, 0.5, 0.076); //2nd method
        //float glow_draw = exp(-draw*800.0); //3rd method
    
        gl_FragColor = vec4(vec3(glow_draw),1.0);
    }
            

    void main() {
        vec2 uv = gl_FragCoord.xy/u_resolution.xy;// normalize
        uv.x *= u_resolution.x/u_resolution.y;
    
        // float tilingsize=20.;// mouse和uv的size要同步縮放級單位化
        float glow_draw;
        
        for(int i=0; i<8; i++){
            float tilingsize=pow(2.,float(i));    
                    
            //grid repetition
            vec2 uvs = uv * vec2(tilingsize);// uv 放大比例可以不同
    
            vec2 ipos = floor(uvs)/tilingsize;  // get the integer coords
            vec2 fpos = fract(uvs);  // get the fractional coords
            uvs = fpos*2.0-1.0;
    
            // uv*= rotate2d(random(ipos)*3.14159+u_time*0.5);
            // 每一格的訊息取亂數旋轉    

            // uv*= rotate2d(u_time*0.5);// 每個格子旋轉速度一樣
            uvs*= rotate2d(u_time*0.5);
    
            //vec3 colVis = vec3(ipos.xy/6., 0.);// 檢測現在寫出來的東西
                                                 // 除法校正
    
            float threshold = 0.5 + sin(u_time*.2)*.2;
            if(random(ipos)>threshold) continue;// 可以嘗試break or continue
            // continue 不做當次迴圈
            // break 結束迴圈
    
    
            //drawing distance function，切格子大小
            float draw = square(uvs, 0.3);//sdFish(1.0, uv, 0.1), 
                square(uv, 0.362), heart(uv, 0.5)    
            //float glow_draw = smoothstep(0.003,0.00,draw); //1st method
            glow_draw += glow(draw, 0.412, 0.02); //2nd method
            //float glow_draw = exp(-draw*800.0); //3rd method
        }
    
        gl_FragColor = vec4(vec3(glow_draw),1.0);
    }    
            

    void main() {
        vec2 uv = gl_FragCoord.xy/u_resolution.xy;
        uv.x *= u_resolution.x/u_resolution.y;
        
        float glow_draw;
        for (int index=0; index<5; index++)
        {
            //grid repetition
            float tilingSiize=pow(2.0, float(index));
            vec2 uvs=uv*vec2(tilingSiize);
            vec2 ipos = floor(uvs)/tilingSiize;  // get the integer coords
            vec2 fpos = fract(uvs);  // get the fractional coords
            uvs= fpos*2.0-1.0;
            uvs*= rotate2d(u_time*0.5);
                
            float threshold=0.48+sin(u_time*0.5)*0.2;
            if(random(ipos)>threshold) continue;
                
            //drawing distance function 
            float draw = square(uvs, 0.314);//sdFish(1.0, uv, 0.1), 
                square(uv, 0.362), heart(uv, 0.5);
            //float glow_draw = smoothstep(0.003,0.00,draw); //1st method
            glow_draw += glow(draw, 0.412, 0.052); //2nd method
            //float glow_draw = exp(-draw*800.0); //3rd method
        }
    
        gl_FragColor = vec4(vec3(glow_draw),1.0);
    } 
            

    void main() {
        vec2 uv = gl_FragCoord.xy/u_resolution.xy;
        uv.x *= u_resolution.x/u_resolution.y;
        
        //grid repetition
        vec2 uvs=uv*6.;
        vec2 ipos = floor(uvs);  // get the integer coords
        vec2 fpos = fract(uvs);  // get the fractional coords
        uv= fpos*2.0-1.0;
        uv*= rotate2d(random(ipos)*3.14159+u_time*0.5);
    
        //drawing distance function 
        float draw = square(uv, 0.362);//sdFish(1.0, uv, 0.1), 
            square(uv, 0.362), heart(uv, 0.5)    
        //float glow_draw = smoothstep(0.003,0.00,draw); //1st method
        float glow_draw = glow(draw, 0.5, 0.076); //2nd method
        //float glow_draw = exp(-draw*800.0); //3rd method
    
        gl_FragColor = vec4(vec3(glow_draw),1.0);
    }
            

    void main() {
        vec2 st = gl_FragCoord.xy/u_resolution.xy;	//[0,1]
        //st.x *= u_resolution.x/u_resolution.y;//[0~1.33]
        vec2 uv = st*2.0-1.0; //[0,1] -> [-1,1]
        //uv.x *= u_resolution.x/u_resolution.y;//[-1.33~1.33]
        
        vec3 color;
        for(int index=0;index<12;++index)
        {
            float noise_position= smoothstep(0.2, 0.7, uv.x+0.420);
            float noise_scale=0.328*noise_position;
            float noise_freq=2.084;
            //float circle_dist=circle(uv, 0.480+noise_scale
                //*noise( vec3(uv*noise_freq, float(index)+u_time*0.4)) );
            
            uv *= rotate2d(-0.004);
            float circle_dist=square(uv, 0.480+noise_scale
                *noise( vec3(uv*noise_freq, float(index)+u_time*0.4)) );
            
            
            float breathing= sin(u_time/2.0*3.14159)*0.2+0.5;//[0.3, 0.7]
            //float breathing= mix(0.3, 0.7, 
                //sin(u_time/2.0*3.14159)*0.5+0.5);//[0.3, 0.7]
            float glow_circle= glow(circle_dist,0.3,0.014);
            //float glow_circle= exp(-circle_dist*8.5);

            //亂數作用雲霧
            float fog= fbm(0.4*uv+vec2(-0.2*u_time, -0.02*u_time))*0.6+0.1;
            
            color += vec3(glow_circle); //*vec3(1.000,0.348,0.006)
        }
                
        gl_FragColor = vec4(color,1.0);
    }
                
            

> Grid(hue)