js打造螺旋状图案转动动画效果-html代码-BFW代码库

js打造螺旋状图案转动动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Whorlpool</title>
<style>
  body {
  background-color: #000;    
  margin: 0;
  overflow: hidden;
  background-repeat: no-repeat;
}
</style>

</head>
<body translate="no">
<body>
<canvas id="canvas" width="1400" height="600"></canvas>
</body>

<script>
      var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext('webgl');

//Time
var dt = .002;
var time = 3.0;

//************** Shader sources **************
var vertexSource = `
attribute vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

var fragmentSource = `
#define PI 3.14159265358979323846
precision highp float;

uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);
uniform float time;

vec2 rotate(vec2 _st, float _angle) {
    _st -= 0.5;
    _st =  mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st;
    _st.y += 0.5;
		_st.x += .5;
    return _st;
}

void main(){

	//set up positions and time
  vec2 uv = gl_FragCoord.xy/resolution.xy;
	float t = mod(time, 2.6*PI);
  t = t * sin(PI/3.0);
  vec2 pos = uv;
  pos = vec2(0.5, 0.5)-pos;

	//calculate distances and angles
  float d = length(pos);/*distance from center*/
	float id = 1.0 - d;/*inverse d, greater near the center*/
  float theta = (atan(pos.y, pos.x));
	float rot = (PI*(id+1.0))*(t)+(8.0*theta);
   
	//rotate both positions
  pos = rotate(pos, -rot);
  uv = rotate(uv, -rot);

	//motion
  for(float i = 1.0; i < 12.0; i+=1.0){ 
			uv.x += .0.........完整代码请登录后点击上方下载按钮下载查看