js实现材质球在槽中流动动画背景效果代码
代码语言:html
所属分类:背景
代码描述:js实现材质球在槽中流动动画背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } img { display: none; } body { background: #000; overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; text-align: center; } canvas { height: 100%; width: 100%; margin: auto; } </style> </head> <body> <!-- VertexShader code here --> <script id="vertexShader" type="x-shader/x-vertex">#version 300 es precision highp float; in vec4 vPosition; void main() { gl_Position = vPosition; } </script> <!-- FragmentShader code here --> <script id="fragmentShader" type="x-shader/x-fragment">#version 300 es precision highp float; out vec4 fragColor; uniform vec4 mouse; uniform vec2 resolution; uniform float time; #define R resolution #define M mouse #define T time #define PI 3.14159265359 #define PI2 6.28318530718 #define SQ3 1.732 mat2 rot(float a) { return mat2(cos(a),sin(a),-sin(a),cos(a)); } float hash21(vec2 p) { return fract(sin(dot(p, vec2(27.609, 57.583)))*43758.5453); } vec3 hue(float t) { vec3 d = vec3(0.725,0.153,0.153); return .55 + .45*cos(PI2*t*(vec3(.85,.97,.98)*d)); } vec4 hexGrid(vec2 uv, float scale) { uv*=scale; const vec2 s = vec2(SQ3, 1.); vec4 hC = floor(vec4(uv, uv - vec2(1, .5))/s.xyxy) + .5; vec4 h4 = vec4(uv - hC.xy*s, uv - (hC.zw + .5)*s); return dot(h4.xy, h4.xy) < dot(h4.zw, h4.zw) ? vec4(h4.xy, hC.xy) : vec4(h4.zw, hC.zw + .5); } void main( ) { vec3 C = vec3(0); vec2 uv = gl_FragCoord.xy/max(R.x,R.y); uv.x+=T*.015; uv.y+=T*.045; vec4 hex = hexGrid(uv,6.); vec2 id = hex.zw; vec2 p = hex.xy; float check = mod(id.y + id.x,2.) * 2. - 1.; float rnd = hash21(id); float dir = -1.; if(rnd>.5) { p *= rot(60.*PI/180.); p.y=-p.y; } float rdx = .2875; // set vectors vec2 p0 = p - vec2(-.5/SQ3, .5); vec2 p1 = p - vec2(.8660254*2./3., 0); vec2 p2 = p - vec2(-.5/SQ3, -.5); // find closest point 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; // draw truchet path float circle = length(pp)-rdx; circle=abs(circle)-.1; float cntr = circle; float cntrShade = circle; cntr = smoothstep(.03,.02,cntr); circle=abs(circle)-.001; circle=smoothstep(.01,.00,circle); float amt = 12.; // hex background float tileform = max(abs(hex.x)*.8660254 + abs(hex.y)*.5, abs(hex.y)) - .5; float edges = abs(tileform); edges=abs(abs(edges)-.02)-.01; edges=smoothstep(.03, .02, edges); float cells=smoothstep(.051, .05, tileform); float cellshadow = (rnd>.5) ? 1.-d3.x : d3.x; //animation //d3 = abs(d3 - SQ3/6.) - .125; vec3 a3=vec3(atan(p0.x, p0.y),atan(p1.x, p1.y),atan(p2.x, p2.y)); vec2 da = vec2(0); if(d3.x>d3.y) da = vec2(d3.y, a3.y); if(d3.y>d3.z) da = vec2(d3.z, a3.z); if(d3.z>d3.x && d3.y>d3.x) da = vec2(d3.x, a3.x); float speed = T; // make coords on truchet path float d = length(pp); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0