canvas+webgl随机屏保动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas+webgl随机屏保动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; } body, html { overflow: hidden; } </style> </head> <body translate="no"> <canvas id="glcanvas"></canvas> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); } </script> <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform float u_time; float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); } vec3 palette(float t) { vec3 a = vec3(0.0, 0.0, 0.45); vec3 b = vec3(0.5, 0.3, 0.12); vec3 c = vec3(0.23, 0.9, 0.7); vec3 d = vec3(0.6, 0.3, 0.2); return a + b * cos(6.28318 * (c * t + d)); } vec3 palette2(float t, float u_time) { vec3 a = vec3(0.5 + 0.1 * sin(u_time * 6.28318), 0.9, 0.9); vec3 b = vec3(0.9, 0.5 + 0.5 * cos(u_time * 6.28318), 0.5); vec3 c = vec3(0.2, 1.0, 1.0); vec3 d = vec3(0.25, 0.4, 0.55 + 0.45 * sin(u_time * 6.28318)); return a + b * cos(6.28318 * (c * t + d)); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y); } float sdf_circle(vec2 p, vec2 c, float r) { return length(p - c) - r; } float oscillate(float time, float minVal, float maxVal) { float sineWave = sin(time); float normalizedSine = (sineWave + 1.0) / 2.0; return mix(minVal, maxVal, normalizedSine); } vec2 warp(vec2 p, float time) { vec2 offset = vec2(noise(p + oscillate(time/2.0, 1.0, 10.0)), noise(p + oscillate(time, 1.0, 10.0))); return p * offset * oscillate(time, 1.0, 3.0); } void main() { vec2 st = gl_FragCoord.xy / u_resolution.xy * 2.0 - 1.0; st.x *= u_resolution.x / u_resolution.y; float time = u_time / 10.0; st = abs(st); vec2 warpedST = warp(st, time); float noiseFactor = noise(warpedST + time / 1.5) * 0.011; float obj = sdf_circle(warpedST, vec2(0.0), 10.0 / noiseFactor); vec3 finalColor = vec3(0.0); if (obj < 0.0) { float angle = atan(warpedST.y, warpedST.x); float radius = length(warpedST); float spiral = sin(radius * oscillate(time, 1.0, 0.0) - time * .0 + angle * oscillate(time, 0.0, 10.0)); spiral += sin(radius / oscillate(time, 0.01, 0.09) - time * 1.9 + angle * oscillate(time, 1.0, 10.0)); vec3 spiralColors = palette2(spiral, time); vec3 warpedColors = palette(noise(warpedST + exp(-length(warpedST)))); float mixFactor = cos(spiral) * oscillate(time, 5.0, 10.0) + 0.5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0