twgl实现鼠标交互花纹无限放大变色动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：twgl实现鼠标交互花纹无限放大变色动画效果代码，鼠标点击拖动试试效果。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
html {
  height: 100%;
}
body {
  background: #333;
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
canvas {
  height: 100%;
  width: 100%;
}
</style>


  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
<!-- VertexShader code here -->
<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
precision highp float;
  in vec4 position;

  void main() {
    gl_Position = vec4( position );
  }
</script>

<!-- FragmentShader code here -->
<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
#if __VERSION__ < 130
#define TEXTURE2D texture2D
#else
#define TEXTURE2D texture
#endif
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
uniform vec4 u_mouse;
uniform float u_time;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
  
#define R           u_resolution
#define T           u_time
#define M           u_mouse

#define PI         3.14159265359
#define PI2        6.28318530718

const float N = 3.;
const float s4 = .577350, s3 = .288683, s2 = .866025;
const vec2 s = vec2(1.732,1);

vec3 clr, trm;
float tk, ln;

mat2 r2,r3;

mat2 rot(float g) { return mat2(cos(g), sin(g),-sin(g), cos(g)); }
float hash21(vec2 p) { 
    p.x = mod(p.x,3.*N);
    p.y = mod(p.y,3.*N);
    return fract(sin(dot(p,vec2(26.37,45.93)))*4374.23); 
}

// Hexagon grid system, can be simplified but
// written out long-form for readability. 
// return vec2 uv and vec2 id
vec4 hexgrid(vec2 uv) {
    vec2 p1 = floor(uv/vec2(1.732,1))+.5,
         p2 = floor((uv-vec2(1,.5))/vec2(1.732,1))+.5;
    vec2 h1 = uv- p1*vec2(1.732,1),
         h2 = uv-(p2+.5)*vec2(1.732,1);
    return dot(h1,h1) < dot(h2,h2) ? vec4(h1,p1) : vec4(h2,p2+.5);
}

vec3 hsv( vec3 a ) {
    vec3 c = a + vec3(T*.1,0,0);
    vec3 rgb = clamp(abs(mod(c.x*2.+vec3(0,4,2),6.)-3.)-1.,0.,1.);
    return c.z * mix(vec3(1),rgb,c.y);
}

void draw(float d, float px, inout vec3 C) {
    C = mix(C,C*.35,smoothstep(.06+px,-px,abs(d-.01)-tk) );
    C = mix(C,clr,smoothstep(px,-px,abs(d)-tk) );
    C = mix(C,trm,smoothstep(px,-px,abs(abs(d)-tk)-ln) );
}

void main()
{
    vec2 F = gl_FragCoord.xy;
    r2 = rot( 1.047);
    r3 = rot(-1.047);
    
    vec2 uv = (2.*F-R.xy)/max(R.x,R.y);

    uv = -vec2(log(length(uv)),atan(uv.y,uv.x))-((2.*M.xy-R.xy)/R.xy);
    uv /= 3.628;
    uv *= N;
        
    tk = .13+.09*sin(uv.x*14.+T), ln = .015;
    
    uv.y += T*.05;
    uv.x += T*.15;
    
    float sc = 3., px = fwidth(uv.x*sc);

    vec4 H;
    vec2 p, id;
    
    H = hexgrid(uv.yx*sc);
    p = H.xy, id = H.zw;
  
    float hs = hash21(id);
    
    if(hs<.5) p *= hs < .25 ? r3 : r2;

    vec2 p0 = p - vec2(-s3, .5),
         p1 = p - vec2( s4,  0),
         p2 = p - vec2(-s3,-.5);

    vec3 d3 = vec3(length(p0), length(p1), length(p2));
    vec2 pp = vec2(0);

    if(d3.x>d3.y) pp = p1;
    if(d3.y>d3.z) pp = p2;
    if(d3.z>d3.x && d3.y>d3.x) pp = p0;
     

    vec3 C = vec3(0);
    float d = max(abs(p.x)*.866025 + abs(p.y)/2., abs(p.y))-(.5-ln);
    C = mix(C,vec3(clamp(hs*.15,.03,.15)),smoothstep(px,-px,d) );
    C = mix(C,C+.1,mix(smoothstep(px,-px,d+.035),0.,clamp(1.-(H.y+.15),0.,1.)) );
    C = mix(C,C*.1,mix(smoothstep(px,-px,d+.025),0.,clamp(1.-(H.x+.5),0.,1.)) );
    
    float b = length(pp)-s3;
    float t = 1e5, g = 1e5;

    hs = fract(hs*53.71);
    if(hs>.95) {
        vec2 p4 = p*r3, p5 = p*r2;
        
        b = length(vec2(p.x,abs(p.y)-.5));
        g = length(p5.x);
        t = length(p4.x);
    }else if(hs>.65) {
        b = length(p.x);
        g = min(length(p1)-s3,length(p1+vec2(1.155,0))-s3);
    } else if(hs<.15) {
        vec2 p4 = p*r3, p5 = p*r2;
        
        t = length(p.x);
        b = length(p5.x);
        g = length(p4.x);
    } else if(hs<.22) {
        b = length(vec2(p.x,abs(p.y)-.5));
        g = min(length(p1)-s3,length(p1+vec2(1.155,0))-s3);
    }
    
    
    clr = hsv(vec3(uv.x*.75,.75,.5));
    trm = vec3(.0);

    draw(t,px,C);
    draw(g,px,C);
    draw(b,px,C);
    
    C = pow(C,v.........完整代码请登录后点击上方下载按钮下载查看