HTML5 shader-doodle炫彩动画特效代码下载


HTML5 shader-doodle炫彩动画特效代码下载
HTML5 shader-doodle炫彩动画特效代码下载以及shader-doodle、炫彩动画等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/shader-doodle.umd.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<shader-doodle>
  <script type="x-shader/x-fragment">
    precision mediump float;
    /** works best with odd numbers - even causes visible seam 	*/
    float radial = 7.;
    /** must be even number */
    float twist = 2.;
    #define PI 3.141592
    #define TP 6.28318
    float hash(vec2 p) {
      p = fract(p*vec2(931.733,354.285));
      p += dot(p,p+39.37);
      return fract(p.x*p.y);
    }
    void main(){
        /** Set some basic stuff */
        vec2 R = u_resolution.xy;
        vec2 uv = gl_FragCoord.xy;
        vec2 UV = gl_FragCoord.xy/u_resolution.xy;
        float time = u_time;
        float speed = time * 1.35;
        /** Do the warp and spin - trying to understand the math */
        uv = (uv.xy + uv.xy-R)/R.y;
        uv= vec2(0., speed + log2(length(uv))) + 
          atan(uv.y, uv.x) * twist / 6.283;
        uv.x *=radial;
        /** Start the tile design */
        vec2 tile_uv = fract(uv) -.5;
        vec2 id = floor(uv);
        float n = hash(id);
        float checker = mod(id.y + id.x,2.) * 2. - 1.;
        vec3 col = vec3(1.);
        if(n>.5)tile_uv.x *= -1.;
        float d = abs(abs(tile_uv.x+tile_uv.y)-.5);
        vec2 cUv = tile_uv-sign(tile_uv.x+tile_uv.y+.001)*.5;
        d = length(cUv);
        float width = .15;
        float pix =.01;
        float mask = smoothstep(pix, -pix, abs(d-.5)-width);
        float angle = atan(cUv.x, cUv.y);
        col *= mask;
      //uncomment for black & white
        col = mix(vec3(UV.y,1.-UV.y,.9),vec3(1.,UV.y,1.-UV.y),col);
        gl_FragColor = vec4(col, 1.);
    }
  </script>
</shader-doodle>

相关推荐

发表评论

相关文章