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 += .05*(cos(t+id+2.0*i)*uv.y*uv.x);
      uv += t+.05*(cos(t*.1)+sin(t)/d-3.0*i);
   }
	 
	//colors
  vec3 col = -d + 0.5*(cos(id-rot+pos.xyx+vec3(0,2,4)));
  vec3 col2 = id + 0.5*cos(id-cos(uv.xyx+vec3(0,2,4)));
  float arg = (d+rot+uv.x);
	vec3 col3 = mix(col, col2, id+cos(arg*4.0));
  col2 = id-col2;
  
  //finally, set the fragment colour
  gl_FragColor = vec4(((col3*col2)+col3)/(col3+col),1.0);
}
`;

//************** Utility functions **************

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.uniform1f(widthHandle, window.innerWidth);
  gl.uniform1f(heightHandle, window.innerHeight);
}


//Compile shader and combine with source
function compileShader(shaderSource, shaderType) {
  var shader = gl.create.........完整代码请登录后点击上方下载按钮下载查看