canvas实现彩色旋转眩晕惊人的轮子动画效果代码-html代码-BFW代码库

canvas实现彩色旋转眩晕惊人的轮子动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现彩色旋转眩晕惊人的轮子动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {
	background-color: #000;
	margin: 4;
	overflow: hidden;
}
</style>

</head>

<body>

        <canvas id="canvas" width="1700" height="700"></canvas>
 
    <!-- partial -->
    <script>
        var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext("webgl");

//Time
var dt = 0.0004;
var time = 0.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 = time;
  t = mod(t, 6.0*PI)+5.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 = (t)*(4.0*PI+d)+(5.0*theta);
   
	

	//motion
  for(float i = 1.0; i < 9.0; i+=1.0){ 
    	pos.x -= .05 * (PI*id+t+(7.0*i)*pos.y);
			uv.x += .05*((t+id+2.0*i)*uv.y);
      uv -= .5*(2.0*t-d*.2);
   }
	 
	//colors
  vec3 col = -0.5 + 0.5*(cos(id-rot+pos.xyx+vec3(0,2,4)));
  vec3 col2 = id + 0.5*sin(id+sin(uv.xyx+vec3(0,2,4)));
  col = col * step(.002, d);/*singularity*/
	vec3 col3 = mix(col, col2, sin(id+rot+uv.x+uv.y));
  col2 = id-col2;
  
  //finally, set the fragment colour
  gl_FragColor = vec4((col2*col)/col3,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);
}

function com.........完整代码请登录后点击上方下载按钮下载查看