canvas蚂蚁动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let mouse,
	antImage,
	c = 0,
	WIDTH,
	HEIGHT;

const n = 40,
	drag = 0.97,
	minDist = 200,
	ants = [],
	canvas = document.getElementById("canvas"),
	ctx = canvas.getContext("2d");

const requestAnimationFrame =
	window.requestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.msRequestAnimationFrame;

function init() {
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;

canvas.setAttribute("width", WIDTH);
	canvas.setAttribute("height", HEIGHT);
	mouse = new Vector(WIDTH / 2, HEIGHT / 2);

canvas.addEventListener("mousemove", (e) => {
		if (c % 10 === 0) {
			mouse.set(e.clientX, e.clientY);
		}
		c++;
	});

for (let i = 0; i < n; i++) {
		const pos = new Vector(random(WIDTH), random(HEIGHT));
		const vel = Vector.random().setMag(random(3, 4));
		ants.push(new Ant(pos, vel, Math.round(random(30, 50))));
	}

ctx.clearRect(0, 0, WIDTH, HEIGHT);
	ctx.fillStyle = "#FFDEAD";
	// ctx.imageSmoothingEnabled = false;
	ctx.beginPath();
	ctx.fillRect(0, 0, WIDTH, HEIGHT);
	ctx.closePath();

ani();
}

function ani() {
	ctx.fillRect(0, 0, WIDTH, HEIGHT);

for (const ant of ants) {
		if (Vector.dist(ant.pos, mouse) <= minDist) {
			ant.applyForce(Vector.sub(ant.pos, mouse).setMag(0.5));
		}
		ant.update();
		ant.borders();
		ant.draw();
	}
	requestAnimationFrame(ani);
}

antImage = new Image();
antImage.src =
	"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+UlEQVRYR+2VT0pDMRDG+6pUXIhu3EgVFMS9F/AkXXgND+A1XPQkXsC9FBS0uHGjuBCL9snETokxk28yifAQ36bty/z55fsmadPr+NPU4GvHw7YZTX/Ukt7n9CwGRBBoHcH+A3ZCQbbJn0MCi71HlobrRRYv1HE12/HQfc7v+73+7tx9b0bT5VrsEGlgqwISHD2dAmQVGM5XhUEXaprEMCUxBM9ZDI5jPDVNvUxJPmAKLrDb1MuU5Nv4cb63PK3S0K+c3Zn7mBNDyPfJ6ze+1cN197sEzs1u6qi/nW63axePMCZVQ5OfioEKEiQBSEV4XYJEeWgDEJAaS0oiOIaOQWjcgRb7qsSUtAAiR0InVArGQDV/U7EYZGkxIBfQqpeyWbPJbAV9wIebmaZHb+dgIB4yVCAb8PZkE17Mqab7l89ZPdXB4XDngjLYrxwS6UrQQsZUq3bNoB0jSMlSVJfHBP6Naa4FCVIzb0hJ9QymBr8EsPopDgtaLUZgKoulItfHW+6qGWzobpzZy5dRR1dP2Y5lJbBaPFv0m5tLm6FN+PEUp5nNLAVDME5mJZFdoXJSvVgdqCAVk3ZsBWSQVO0sBdEs5iqI4v11qGCqWKmCGtC/DUgKIBUtV0s1i9FpLoWj+kUW+zsNlawBVxVQM/CWmGoKWpprcjoP+AkzIyM4D7EpowAAAABJRU5ErkJgggAA";

class Ant {
	constructor(pos, vel, size) {
		this.pos = pos;
		this.vel = vel;
		this.maxVel = vel.mag();
		this.acc = new Vector(0, 0);
		this.size = size;
		this.img = antImage;
	}

update() {
		this.pos.add(this.vel);
		this.vel.add(this.acc);
		const m = this.vel.mag();
		if (m > this.maxVel) {
			this.vel.setMag(m * drag);
		}
		this.acc.set(0, 0);
	}

applyForce(force) {
		this.acc = force;
	}

borders() {
		if ((this.pos.x > WIDTH) | (this.pos.x < 0)) {
			this.vel.x = -this.vel.x;
		} else if ((this.pos.y > HEIGHT) | (this.pos.y < 0)) {
			this.vel.y = -this.vel.y;
		}
	}

draw() {
		ctx.save();
		const { width } = antImage;
		ctx.translate(this.pos.x, this.pos.y);
		const ang = this.vel.heading();
		ctx.rotate(ang + Math.PI / 2);
		ctx.translate(-width / 2, -width / 2);
		ctx.drawImage(antImage, 0, 0, this.size, this.size);
		ctx.restore();
	}
}

class Vector {
	constructor(x = 0, y = 0) {
		this.x = x;
		this.y = y;
		this.m = this.mag();
		this.dir = this.heading();
	}

copy() {
		return new Vector(this.x, this.y);
	}

set(x, y) {
		this.x = x;
		this.y = y;

this.update();

return this;
	}

static add(v0, v1) {
		const r = new Vector(v0.x + v1.x, v0.y + v1.y);
		return r;
	}

add(s0, s1 = null) {
		if (s0 instanceof Vector) {
			this.x += s0.x;
			this.y += s0.y;

this.update();

return this;
		}
		this.x += s0;
		this.y += s1;

this.update();

return this;
	}

static sub(v0, v1) {
		const r = new Vector(v0.x - v1.x, v0.y - v1.y);
		return r;
	}

sub(s0, s1) {
		if (s0 instanceof Vector) {
			this.x -= s0.x;
			this.y -= s0.y;

this.update();

return this;
		}
		this.x -= s0;
		this.y -= s1;

this.update();

return this;
	}

mult(e) {
		if (e instanceof Vector) {
			this.x *= e.x;
			this.y *= e.y;
		} else {
			this.x *= e;
			this.y *= e;
		}

this.update();

return this;
	}

div(e) {
		if (e instanceof Vector) {
			this.x /= e.x;
			this.y /= e.y;
		} else {
			this.x = this.x / e;
			this.y = this.y / e;
		}

this.update();

return this;
	}

static dist(v1, v2) {
		const { sqrt, pow } = Math;
		const d = sqrt(pow(v1.x - v2.x, 2) + pow(v1.y - v2.y, 2));

return d;
	}

mag() {
		const { sqrt, pow } = Math;
		const i = sqrt(pow(this.x, 2) + pow(this.y, 2));

this.m = i;

return this.m;
	}

setMag(m) {
		this.m = m;
		this.x = Math.cos(this.dir) * m;
		this.y = Math.sin(this.dir) * m;

return this;
	}

heading() {
		this.dir = Math.atan2(this.y, this.x);

return this.dir;
	}

static random() {
		// Random unit (m=1) vector
		const ang = random(-Math.PI, Math.PI);

const x = Math.cos(ang);
		const y = Math.sin(ang);

return new Vector(x, y);
	}

static fromAngle(a) {
		const x = Math.cos(a);
		const y = Math.sin(a);

return new Vector(x, y);
	}

limit(max) {
		if (this.m > max) {
			this.setMag(max);
		}
	}

equals(v) {
		if (!v instanceof Vector) {
			return false;
		}
		return (
			this.x == v.x &&
			this.y == v.y &&
			this.mag() == v.mag() &&
			this.heading() == v.heading()
		);
	}

update() {
		this.mag();
		this.heading();
	}
}

function random(min = 0, max = 1) {
	if (arguments.length === 1) {
		if (min != 0) {
			return Math.random() * min;
		} else {
			return Math.random();
		}
	}

return Math.random() * (max - min) + min;
}

init();

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