canvas粒子引力

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

//vector class
class Vector {

constructor ( x = 0, y = 0 ) {
		this.x = x;
		this.y = y;
		this.magnitude = Math.sqrt( ( x * x ) + ( y * y ) );
		this.angle = Math.atan2(y, x);
	}

add (v) {
		this.x = this.x + v.x;
		this.y = this.y + v.y;
		this.magnitude = Math.sqrt( ( this.x * this.x ) + ( this.y * this.y ) );
		this.angle = Math.atan2(this.y, this.x);
		return this;
	}

subtract (v) {
		this.x = this.x - v.x;
		this.y = this.y - v.y;
		this.magnitude = Math.sqrt( ( this.x * this.x ) + ( this.y * this.y ) );
		this.angle = Math.atan2(this.y, this.x);
		return this;
	}

setAngle (angle) {
		this.angle = angle;
		this.x = this.magnitude*Math.cos(angle);
		this.y = this.magnitude*Math.sin(angle);
		return this;
	}

setMagnitude (magnitude) {
		this.magnitude = magnitude;
		this.x = Math.cos(this.angle) * magnitude;
		this.y = Math.sin(this.angle) * magnitude;
		return this;
	}

}

//particle class
class Particle {

constructor ( opts ) {
		this.x               = opts.x               || Math.random()*cW;
		this.y               = opts.y               || Math.random()*cH;
		this.radius          = opts.radius          || 15;
		this.v               = opts.v               || new Vector();
		this.acc             = opts.acc             || new Vector();
		this.mass            = opts.mass            || 40;
		this.color           = opts.color           || 320;
		this.maxV            = opts.maxV            || 8;
		this.maxA            = opts.maxA            || 0.5;
		this.tasteTheRainbow = opts.tasteTheRainbow || false;
		if(opts.trail){
			this.trail       = true;
			this.trailLength = opts.trailLength || 10;
			this.trajPoints  = new Queue([]);
		}
	}

accelerate () {
		this.acc.magnitude = this.acc.magnitude > this.maxA ? this.acc.setMagnitude(this.maxA) : this.acc.magnitude;
		this.v.add(this.acc);
	}

isOnScreen () {
		return this.x <= cW || this.x >= 0 || this.y <= cH || this.y >= 0;
	}

update () {
		if(this.acc.magnitude) { this.accelerate(); }
		if(this.trail) {
			let point = {
				x: this.x,
				y: this.y
			}
			this.trajPoints.enqueue(point);
			if(this.trajPoints.getLength()>=this.trailLength){ this.trajPoints.dequeue(); }
		}
		this.v.magnitude = this.v.magnitude > this.maxV ? this.v.setMagnitude(this.maxV) : this.v.magnitude;
		this.x += this.v.x;
		this.y += this.v.y;
		if(this.tasteTheRainbow){ this.color = this.color <= 360 ? ++this.color : 1; }
	}

render (context, trailContext = null) {
		context.beginPath();
		context.fillStyle = `hsl(${this.color}, 100%, 50%)`;
		context.arc(this.x, this.y, this.radius, 0, Math.PI*2);
		context.fill();
		context.closePath();
		if(this.trail && trailContext) {
			let trajectory = this.trajPoints;
			trailContext.beginPath();
			trailContext.strokeStyle = `hsl(${this.color}, 100%, 50%)`;
			trailContext.lineWidth = 0.2;
			trailContext.moveTo(trajectory.queue[0].x, trajectory.queue[0].y);
			for(let i=1, len=trajectory.getLength(); i<len; i++){
				trailContext.lineTo(trajectory.queue[i].x, trajectory.queue[i].y);
			}
			trailContext.stroke();
			trailContext.closePath();
		}
	}

}

class Planet extends Particle {

gravitate (p) {
		if( Particle.prototype.isPrototypeOf(p) ) {
			const d = Math.sqrt( ( this.x - p.x ) * ( this.x - p.x ) + ( this.y - p.y ) * ( this.y - p.y ) );
			const attractiveForce = p.mass*this.mass/(d*d);
			this.acc.setAngle(Math.atan2( p.y - this.y, p.x - this.x)).setMagnitude(attractiveForce);
		} else {
			throw new Error("The argument passed to the gravitate function must be a particle");
		}
		this.update();
	}

gravitateStarCluster (cluster) {
		let gV = new Vector();
		for(let i=0; i < cluster.length; i++){
			let star = cluster[i];
			if( Particle.prototype.isPrototypeOf(star) ){
				let v = new Vector();
				const d = Math.sqrt( ( this.x - star.x ) * ( this.x - star.x ) + ( this.y - star.y ) * ( this.y - star.y ) );
				const attractiveForce = star.mass*this.mass/(d*d);
				v.setAngle(Math.atan2( star.y - this.y, star.x - this.x)).setMagnitude(attractiveForce);
				gV = gV.add(v);
			} else {
				throw new Error("The argument supplied to the gravitateStarCluster function must be an array of particles");
			}
		}
		this.acc.setAngle(gV.angle).setMagnitude(gV.magnitude);
		this.update();
	}

}

class Queue {

constructor (array) { this.queue = array; }

getLength () { return this.queue.length; }

enqueue (element) { this.queue.unshift(element); }

dequeue () { this.queue.pop(); }

display () {
		for(let i=0; i<this.getLength; i++){
			console.log(this.queue[i]);
		}
	}

}

//util function to paint entire canvas of specified color
function paintCanvas(color, context) {
	const W = context.canvas.clientWidth;
	const H = context.canvas.clientHeight;
	context.save();
	context.fillStyle = color;
	context.fillRect(0, 0, W, H);
	context.restore();
}

//util function that returns a random number in a given range
function randomInRange(min, max){
	const result = min + Math.random() * ( max - min );
	return result;
}

//////////////////////////////////////
// -- THIS ANIMATION'S VARIABLES -- //
//////////////////////////////////////

//canvas
const trailCanvas = document.getElementById('trails');
const particlesCanvas = document.getElementById('particles');
const trailCtx = trailCanvas.getContext('2d');
const particleCtx = particlesCanvas.getContext('2d');

let cW = particlesCanvas.width  = trailCanvas.width  = window.innerWidth;
let cH = particlesCanvas.height = trailCanvas.height = window.innerHeight;

//animation constants
const settings = {

STAR_MASS       : 1500,
	PLANET_MASS     : 20,
	PLANET_V_X      : 2,
	P_TRAIL         : true,
	P_MAX_VELOCITY  : 8,
	P_MAX_ACC       : 0.5,
	P_MIN_VELOCITY  : 5,
	PARTICLE_NUM    : 70,
	BOUNDS          : false,
	TRAIL_LENGTH    : 90,
	TRAIL_CNVS      : trailCanvas,
	PARTICLE_CNVS   : particlesCanvas,
	COLOR           : 320,
	TRAIL_CTXT      : trailCtx,
	TASTETHERAINBOW : true,
	PARTICLE_CTXT   : particleCtx

}

window.addEventListener('resize', function(){
	cW = particlesCanvas.width  = trailCanvas.width  = window.innerWidth;
	cH = particlesCanvas.height = trailCanvas.height = window.innerHeight;
});

//mouse events and stuff
let mX = -1;
let mY = -1;
let draggingStar = false;

document.addEventListener('mousemove', function(e){
	mX = e.clientX;
	mY = e.clientY;
});

settings.PARTICLE_CNVS.addEventListener('click', function(){
	draggingStar = !draggingStar;
});

//stars and particles
let s = [];
let p = [];

let star = new Particle({
	x               : cW/2,
	y               : cH/2,
	radius          : 15,
	color           : settings.COLOR,
	tasteTheRainbow : settings.TASTETHERAINBOW,
	mass            : settings.STAR_MASS
});

for(let i=0; i < settings.PARTICLE_NUM; i++){

const planet = new Planet({
		x               : Math.random()*cW,
		y               : Math.random()*cH,
		radius          : 2,
		mass            : settings.PLANET_MASS,
		trail           : settings.P_TRAIL,
		trailLength     : settings.TRAIL_LENGTH,
		color           : settings.COLOR,
		maxV            : settings.P_MAX_VELOCITY,
		maxA            : settings.P_MAX_ACC,
		tasteTheRainbow : settings.TASTETHERAINBOW,
		v               : new Vector( Math.random() < 0.5 ? -settings.P_MIN_VELOCITY : settings.P_MIN_VELOCITY, 0)
	});

p.push(planet);

}

//animation function
function animate() {

settings.PARTICLE_CTXT.clearRect(0, 0, cW, cH);

settings.TRAIL_CTXT.clearRect(0, 0, cW, cH);
	paintCanvas('black', settings.TRAIL_CTXT);

star.update();
	star.render(settings.PARTICLE_CTXT);

for(let i=0; i< p.length; i++){
		p[i].gravitate(star);
		if(settings.BOUNDS){
			if(p[i].x > cW){ p[i].x = cW; }
			if(p[i].x < 0){ p[i].x = 0; }
			if(p[i].y > cH){ p[i].y = cH; }
			if(p[i].y < 0){ p[i].y = 0; }
		}
		if(p[i].isOnScreen()){
			p[i].render(settings.PARTICLE_CTXT, settings.TRAIL_CTXT);
		}
	}

if(draggingStar){
		star.x += (mX - star.x) * 0.1;
		star.y += (mY - star.y) * 0.1;
	}

requestAnimationFrame(animate);

}

//start loop!
animate();

//instructions panel script
const instructionsPanel = document.querySelector('#instructions');
const closeButton       = document.querySelector('#instructions > i');

closeButton.addEventListener('click', function(){
	instructionsPanel.classList.add('hidden');
});

//datgui thangs
const gui = new dat.GUI();
gui.add(settings, 'STAR_MASS', 500, 10000).name('star mass').onFinishChange(function () {
	star.mass = settings.STAR_MASS;
});
gui.add(settings, 'P_TRAIL').name('particle trail').onFinishChange(function () {
	for(let i=0; i < settings.PARTICLE_NUM; i++){
		p[i].trail = settings.P_TRAIL;
		p[i].trajPoints = new Queue([]);
	}
});
gui.add(settings, 'P_MAX_VELOCITY', 4, 14).name('max velocity').onFinishChange(function () {
	for(let i=0; i < settings.PARTICLE_NUM; i++){
		p[i].maxV = settings.P_MAX_VELOCITY;
	}
});
gui.add(settings, 'P_MAX_ACC', 0.2, 2).name('max acceleration').onFinishChange(function () {
	for(let i=0; i < settings.PARTICLE_NUM; i++){
		p[i].maxA = settings.P_MAX_ACC;
	}
});
gui.add(settings, 'PARTICLE_NUM', 1, 250).name('particles number').onFinishChange(function () {
	p = [];
	settings.TRAIL_CTXT.clearRect(0, 0, cW, cH);
	for(let i=0; i < settings.PARTICLE_NUM; i++){
		const planet = new Planet({
			x               : Math.random()*cW,
			y               : Math.random()*cH,
			radius          : 2,
			mass            : settings.PLANET_MASS,
			trail           : settings.P_TRAIL,
			trailLength     : settings.TRAIL_LENGTH,
			color           : settings.COLOR,
			maxV            : settings.P_MAX_VELOCITY,
			maxA            : settings.P_MAX_ACC,
			tasteTheRainbow : settings.TASTETHERAINBOW,
			v               : new Vector( Math.random() < 0.5 ? -settings.P_MIN_VELOCITY : settings.P_MIN_VELOCITY, 0)
		});
		p.push(planet);
	}
	star.color = settings.COLOR;
});
gui.add(settings, 'BOUNDS').name('bounds');
gui.add(settings, 'TRAIL_LENGTH', 10, 200).name('trail length').onFinishChange(function () {
	settings.TRAIL_CTXT.clearRect(0, 0, cW, cH); 
	for(let i=0; i < settings.PARTICLE_NUM; i++){
		p[i].trajPoints = new Queue([]);
		p[i].trailLength = settings.TRAIL_LENGTH;
	}
});

//for debugging without printing stuff 1000000000 times in the console
//window.setInterval(function(){ console.log(); }, 2000);

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