canvas+webgl实现信号发送雷达波动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas+webgl实现信号发送雷达波动画效果代码
代码标签: canvas webgl 信号 发送 雷达波 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <STYLE> body { margin: 0; overflow: hidden; background: black; } canvas { display: block; width: 100%; height: 100%; } </STYLE> </head> <body> <canvas id="PulseCanvas"></canvas> <script> const vertexShaderSource = `#version 300 es in vec4 aVertexPosition; void main() { gl_Position = aVertexPosition; } `; const fragmentShaderSource = `#version 300 es precision highp float; out vec4 fragColor; uniform float uTime; uniform vec2 uResolution; vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); } void main() { vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / uResolution.y; float t = uTime * 0.5; float angle = t * 2.0; mat2 rotation = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); uv = rotation * uv; vec2 p = uv * 8.0; float a = atan(p.y, p.x); float r = length(p); float d = r - t + sin(a * 5.0 + t * 2.0) * 0.1; float f = smoothstep(0.0, 0.5, sin(d * 10.0 - t * 5.0)); float pulse = sin(t * 40.0) * 0.5 + 0.5; f *= pulse; vec3 col = vec3(0.0); for (int i = 0; i < 10; i++) { vec2 particlePos = vec2(random(vec2(float(i), t)), random(vec2(t, float(i)))) * 2.0 - 1.0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0