多彩飓风旋涡状彩带灯带变幻canvas特效动-html代码-BFW代码库

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!D<<<YPEOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
  <title>多彩飓风旋涡状彩带灯带变幻canvas特效动画</title>
     <style >
     body {
  margin:0;
}

canvas {
  position: fixed;
}
      </style>

</head>
<body>

<canvas id="webgl" width="500" height="1758"></canvas>


<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_position;
  
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  
  uniform sampler2D u_buffer;
  uniform bool u_bufferpass;
  
  #define PI 3.14159265359
  #define TAU 6.28318530718
  
  // These awesome complex Math functions curtesy of 
  // https://github.com/mkovacs/reim/blob/master/reim.glsl
  vec2 cCis(float r);
  vec2 cLog(vec2 c); // principal value
  vec2 cInv(vec2 c);
  float cArg(vec2 c);
  float cAbs(vec2 c);
  
  vec2 cMul(vec2 a, vec2 b);
  vec2 cDiv(vec2 a, vec2 b);

  vec2 cCis(float r)
  {
    return vec2( cos(r), sin(r) );
  }
  vec2 cExp(vec2 c)
  {
    return exp(c.x) * cCis(c.y);
  }
  vec2 cConj(vec2 c)
  {
    return vec2(c.x, -c.y);
  }
  vec2 cInv(vec2 c)
  {
    return cConj(c) / dot(c, c);
  }
  vec2 cLog(vec2 c)
  {
    return vec2( log( cAbs(c) ), cArg(c) );
  }
  float cArg(vec2 c)
  {
    return atan(c.y, c.x);
  }
  float cAbs(vec2 c)
  {
    return length(c);
  }
  vec2 cMul(vec2 a, vec2 b)
  {
    return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
  }
  vec2 cDiv(vec2 a, vec2 b)
  {
    return cMul(a, cInv(b));
  }
  
  float r1 = 0.1;
  float r2 = 0.3;
  
  vec2 Droste(vec2 uv) {
    
    // r1 = .1 + u_mouse.x;
    r2 = .15 + max(u_mouse.y + .5, -.0);
    
    // float c = cos(u_time);
    // float s = sin(u_time);
    // uv *= mat2(c, -s, s, c);
    
    // 5. Take the tiled strips back to ordinary space.
    uv = cLog(uv); 
    // 4. Scale and rotate the strips
    float scale = log(r2/r1);
    float angle = atan(scale/PI);
    uv = cDiv(uv, cExp(vec2(0,angle))*cos(angle));
    // 3. this simulates zooming in the tile
    // uv -= u_time;
    // 2. Tile the strips
    uv.x = mod(uv.x,log(r2/r1)); 
    // 1. Take the annulus to a strip
    uv = cExp(uv)*r1;
    
    return uv;
  }
  
  vec3 hash3( vec2 p ) {
      vec3 q = vec3( dot(p,vec2(127.1,311.7)), 
             dot(p,vec2(269.5,183.3)), 
             dot(p,vec2(419.2,371.9)) );
    return fract(sin(q)*43758.5453);
  }
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  const float colours = 3.;
  const vec4 colour1 = vec4(.1,.2,.8, 1.);
  const vec4 colour2 = vec4(.8,.3,.2, 1.);
  const vec4 colour3 = vec4(.1,.7,.2, 1.);
  
  vec4 getColour(float r) {
    float or = r;
    r = floor(r*(colours+1.));
    if(r == 0.) {
      return colour1;
    } else if(r == 1.) {
      return colour2+vec4(0, (sin(u_time*3. + or*10.) * or + or), 0., 0.);
    } else if(r == 2.) {
      return colour3;
    }
  }
  
  vec4 render(vec2 uv) {
    // uv *= 10.;
    
    // uv.x += u_time;
    
    float row = floor(uv.y);
    
    if(mod(row, 2.) == 0.) return vec4(0,0,0,1);
    
    vec4 rowval = texture2D(u_noise, vec2(.5, row/110.));
    float nf = rowval.r;
    nf *= nf;
    nf *= 5.;
    
    uv.x += u_time * nf * 3.;
    
    float noiseloopval = sin(uv.x*PI*.1)*floor(uv.y);
    noiseloopval = mod(uv.x*row, row*2.);
    
    vec2 uvid = floor(vec2( floor(noiseloopval), uv.y ));
    vec3 uvseed = hash3(uvid/PI);
    
    float shapefield = sin(fract(uv.y)*3.) * sin(fract(uv.x)*10.);
    vec4 colour = getColour(rowval.g*(1.-rowval.g*(sin(u_time*3.)*.5+.5))) * smoothstep(.2,.6,shapefield);
    colour += smoothstep(.9,1.,shapefield);
    colour += smoothstep(.99,1.,shapefield)*5.;
    
    // colour *= uvseed.x;
    
    return mix(vec4(0,0,0,1), colour, colour.a);
  }
  
  vec4 render_effect(vec2 uv, vec4 prev) {
    vec2 polar = vec2(atan(uv.x, uv.y)/PI, length(uv));

    vec4 c = render(polar);
    c += render(polar * vec2(2., .6) + vec2(0.,1./.6));
    c += render(polar * vec2(1., 1.2) + vec2(0.,1./1.2));

    uv = Droste(getScreenSpace())*20.;
    polar = vec2(atan(uv.x, uv.y)/PI, length(uv));

    c += render(polar * vec2(1., 2.2) + vec2(0.,2./2.2));
    
    return c;
  }

  void main() {
    vec4 prev = texture2D(u_buffer, gl_FragCoord.xy/u_resolution);
    if(u_bufferpass) {
      vec2 uv = Droste(getScreenSpace())*10.;
      // uv = mix(uv, getScreenSpace()*10., sin(u_time*2.)*.5+.5);
      // uv = getScreenSpace()*10.;

      gl_FragColor = prev * .94 + render_effect(uv, prev) * .05;
    } else {
      vec2 uv = Droste(getScreenSpace())*50.;
      
      gl_FragColor = prev;
    }
  }
  
</script>
<!-- partial -->
  <script >
      /**
 * A basic Web GL class. This provides a very basic setup for GLSL shader code.
 * Currently it doesn't support anything except for clip-space 3d, but this was
 * done so that we could start writing fragments right out of the gate. My
 * Intention is to update it with particle and polygonal.........完整代码请登录后点击上方下载按钮下载查看