html5 canvas迷幻水波浪流动背景动画特效免费下载

html5 canvas迷幻水波浪流动背景动画特效,反正我看久了头会晕,不知道大家什么感觉。

JS代码

<script id="fragmentShader" type="x-shader/fragment"> 
precision mediump float; 
 
uniform float time; 
uniform float width; 
uniform float height; 
uniform float red; 
uniform float green; 
uniform float blue; 
uniform float zoom; 
uniform float rotation; 
   
const float PI = 3.141592654; 
 
vec2 rotate(vec2 p, float a) { 
  return vec2(p.x * cos(a) - p.y * sin(a), 
                p.x * sin(a) + p.y * cos(a)); 
} 
   
   
void main () { 
   
  vec2 p0 = vec2(gl_FragCoord) * zoom; 
  float a = rotation * PI / 180.0; 
  vec2 p = rotate(p0, a) + 
           vec2(sin(time * .2) * 200.0, cos(time * .2) * 200.0); 
  vec3 c = vec3(red, green, blue); 
   
  vec3 color = (c * (.5 + 0.5 * sin(time + sin(sin(time * 4.0 + (p.x - p.y) * .02) + p.x * p.y * 1e-4)))); 
  gl_FragColor = vec4(vec3(color), 1.0); 
} 
</script> 
<script id="vertexShader" type="x-shader/vertex"> 
precision mediump float; 
attribute vec2 position; 
 
void main () { 
  gl_Position = vec4(position, 0, 1); 
}  
</script> 
 
<script src='js/regl.js'></script> 
<script src='js/react.production.min.js'></script> 
<script src='js/react-dom.production.min.js'></script> 
<script src="js/index.js"></script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录