canvas粒子动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const _C = document.getElementById('c') /* canvas element */, 
			C = _C.getContext('2d') /* 2L canvas context */, 
			D = _C.width /* edge length of canvas square */, 
			O = -.5*D /* vertical offset */, 
			RC = .015*D /* a polygon's max circumradius */, 
			UA = 2*Math.PI/360 /* unit angle */, 
			AE = Math.PI/36 /* maximum angular deviation (error) */, 
			VMAX = .2 /* max absolute value of velocity */, 
			NHI = 6 /* number of hue intervals */, 
			AHI = 360/NHI /* angular span of hue interval */, 
			NV = 6 /* number of hue variations within an interval */, 
			UAH = AHI/NV /* unit hue angle */, 
			SL = [95, 65].map(c => `${c}%`) /* saturation and lightness */, 
			K = 2 /* decimal precision */, 
			M = 10**K, IM = 1/M, 
			N = 200 /* number of polygons */, 
			POLY = Array(N) /* array of polygons */, 
			FN = ['line', 'move'] /* drawing functions */;

let rID = null /* request ID */, 
		aho = 0 /* angular hue offset */, 
		δ /* angular start point of curve */, 
		m0, m1, m2, sgn, sum,
		rb, rs, dd, t;

function randsgn() { return Math.pow(-1, Math.round(Math.random())) }

function rand(max = 1, min = 0, dec = 0) {
	return +(min + (max - min)*Math.random()).toFixed(dec)
};

function fgcd(a, b) { return b === 0 ? a : fgcd(b, a%b) };

function flcm(a, b) { return a*b/fgcd(a, b) };

function draw() {
	POLY.forEach(p => p.update());
	
	let inview = POLY.filter(c => c.t >= 0 && c.o > 0), 
			hidden = POLY.filter(c => c.t < 0);
	
	if(inview.length) {
		C.clearRect(O, O, D, D);
		
		for(let i = 0; i < NV; i++) {
			let shade_bucket = inview.filter(c => c.c === i);

if(shade_bucket.length) {
				let ha = aho + i*UAH;
				
				C.fillStyle = `hsla(${ha}, ${SL}, .25)`;
				C.strokeStyle = `hsl(${ha}, ${SL})`;

for(let j = 1; j <= M; j++) {
					let alpha_bucket = shade_bucket.filter(c => c.o === j);

if(alpha_bucket.length) {
						C.globalAlpha = +(IM*j).toFixed(2);
						C.beginPath();

alpha_bucket.forEach(p => {
							let coords = p.coords;

for(let k = 0; k <= p.n; k++) {
								C[`${FN[0**k]}To`](...coords[k%p.n])
							}
						});

C.closePath();
						C.fill();
						C.stroke();
					}
				}
			}
		}
	}
	else if(!hidden.length) reset();
	
	rID = requestAnimationFrame(draw)
};

class RandPoly {
	constructor(i) {
		/* SHAPE PROPERTIES */
		this.n = rand(8, 3); /* number of vertices */
		this.β = 2*Math.PI/this.n; /* base angle corresp to an edge */
		this.f = 0; /* scaling factor */
		
		/* POSITION PROPERTIES */
		this.dx = rand(.5*RC, -.5*RC); /* initial x offset from accurate curve */
		this.dy = rand(.5*RC, -.5*RC); /* initial y offset from accurate curve */
		this.α = δ + i/N*t + rand(AE, -AE, K); /* current point angular offset */
		this.φ = Math.random()*2*Math.PI; /* polygon rotation */
		
		/* MOTION PROPERTIES */
		this.t = Math.round(rand(10) - i*100/N); /* delay in showing up */
		this.vx = rand(VMAX, -VMAX, K); /* velocity along x axis */
		this.vy = rand(VMAX, -VMAX, K); /* velocity along x axis */
		this.ψ = rand(2, -3, .2)*UA; /* rotation speed */
		
		/* PAINT PROPERTIES */
		this.c = rand(NV - 1);
		this.o = M;
	}
	
	update() {
		this.t++;
		
		if(this.t > 0 && this.o > 0) {
			if(this.f < 1) this.f += IM;
			else if(this.t > 1.5*M) this.o--
			
			this.vx *= .99;
			this.vy *= .99;
			
			this.dx += this.vx;
			this.dy += this.vy;
			this.φ += this.ψ;
		}
	}
	
	get coords() {
		let vx = [], 
				cx = sum*Math.cos(this.α) - sgn*dd*Math.cos(sum/rs*this.α) + this.dx, 
				cy = sum*Math.sin(this.α) - dd*Math.sin(sum/rs*this.α) + this.dy;
		
		for(let k = 0; k < this.n; k++) {
			let γ = this.φ + k*this.β;
			
			vx.push([cx + this.f*RC*Math.cos(γ), cy + this.f*RC*Math.sin(γ)])
		}
		
		return vx
	}
}

function init() {
	C.translate(-O, -O);
	reset()
};

init();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg