情人节送给粉丝的礼物

我不是费圆

发布于 2020-09-21 16:45:32

3970

发布于 2020-09-21 16:45:32

文章被收录于专栏：鲸鱼动画鲸鱼动画

怦然心动

今天是七夕，一个牛郎和织女鹊桥相会的日子。还有他们的孩子也跟他们在一起。

感谢你们一直陪伴至今，我不善于表达，我对你们的感激都在这张画布里。

代码不算多，特效也不是很花哨，情人节她更在意的是你口中的甜言蜜语，这个动画是你们交流的开端。祝愿你们心心念念的人也在念着你们，愿你们web学习一帆风顺，无往不利。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>砰砰砰</title>
	<style>
	body {
	  	background: #000800;
	}
	canvas {
	  	margin: 0 auto;
	  	display: block;
	}
	</style>
</head>
<body>
	<canvas></canvas>
	<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</body>
<script>
	let canvas = document.querySelector('canvas'),
		speedSelect = document.querySelector('#speed'),
		width = 300,
		height = 300,
		ctx = canvas.getContext('2d'),
		pSystemSize = 1000,
		deform = {a:100, s:0.4, min:-200, max:200, dir:1}; // a=4 is natural if not animated;

	const mcos = Math.cos,
		  msin = Math.sin,
		  mpow = Math.pow,
		  PI180=Math.PI / 180,
		  tau = Math.PI * 2;

	canvas.width = width;
	canvas.height = height;
	ctx.lineWidth = 1;

	const ParticleSystem = function(num){
		this.scalar = 8;
		this.numParticles = num;
		this.allParticles = [];
		this.x = width * .5;
		this.y = height * .5;
		this.generate();
	}
	ParticleSystem.prototype.generate = function(){
		for(let i=0; i<this.numParticles; i++){
			let vo = {};
			vo.degrees = (360 / this.numParticles) * i * PI180;
			vo.parent = this;
			vo.x = width / 2;
			vo.y = height / 2;
			vo.vx = 0;
			vo.vy = 0;
			this.allParticles.push(new Particle(vo));
		}
	}
	ParticleSystem.prototype.update = function(){
		for(let i=0; i<this.allParticles.length; i++){
			this.allParticles[i].update();
		}
	}

	const Particle = function(vo){
		this.degrees = vo.degrees;
		this.parent = vo.parent;
		this.x = vo.x;
		this.y = vo.y;
		this.vx = 0;
		this.vy = 0;
		this.colour = 'hsl(' + (Math.round((this.degrees * (180/Math.PI)))) + ',100%,50%)';
	}
	Particle.prototype.update = function(){
		// http://mathworld.wolfram.com/HeartCurve.html
		this.vx = 16 * mpow(msin(this.degrees), 3) * deform.dir;
		this.vy = ((13 * mcos(this.degrees)) - 
				   (6 * mcos(2 * this.degrees)) - // 5
				   (2 * mcos(3 * this.degrees)) -
				   (mcos(deform.a * this.degrees))) * -1;
		
		// update position
		this.x = this.vx * this.parent.scalar + this.parent.x;
		this.y = this.vy * this.parent.scalar + this.parent.y;
	}

	function update(){
		if(deform.dir === 1){
			if(deform.a > deform.min){
				deform.a -= deform.s;
			}
			else{
				flipDirection();
			}
		}
		else{
			if(deform.a < deform.max){
				deform.a += deform.s;
			}
			else{
				flipDirection();
			}
		}
		system.update();
	}
	function flipDirection(){
		deform.dir *= -1;
	}

	function draw(){
		ctx.clearRect(0, 0, width, height);
		ctx.save();
		for(let i=0; i<system.numParticles; i++){
			let p = system.allParticles[i];
			ctx.fillStyle = p.colour;
			ctx.beginPath();
			ctx.arc(p.x, p.y, 1, 0, tau, false);
			ctx.fill();
		}
		ctx.restore();
	}
	function animate(){
		update();
		draw();
		requestAnimationFrame(animate);
	}
	let system = new ParticleSystem(pSystemSize);
	animate();
</script>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-08-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

web