移动粒子

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var canvas = undefined,
    ctx = undefined;
var count = 100;
var particles = [];
var screenPos = undefined,
    lastScreenPos = undefined;

function setup() {
	canvas = createCanvas(windowWidth, windowHeight);
	ctx = canvas.drawingContext;
	colorMode(HSB, 255, 255, 255, 255);

for (var i = 0; i < count; i++) {
		var p = new Particle();
		p.randomize();
		particles.push(p);
	}

screenPos = createVector(screenX, screenY);
	lastScreenPos = screenPos.copy();
}

function draw() {
	// background(0);
	fill(0, 20);
	rect(0, 0, width, height);

stroke(255);
	noFill();

lastScreenPos = screenPos.copy();
	screenPos = createVector(screenX, screenY);

var screenForce = screenPos.copy().sub(lastScreenPos);

var center = createVector(width / 2, height / 2);
	// let centerScreen = center.copy().add(screenForce);
	// line(center.x, center.y, centerScreen.x, centerScreen.y);

screenForce.mult(0.1).limit(1);

particles.forEach(function (n) {
		stroke((n.vel.heading() + PI) / TAU * 255, 255, 255);
		n.show();
		var noiseForce = p5.Vector.fromAngle(map(noise(n.pos.x / 300, n.pos.y / 300, frameCount / 300), 0.3, 0.7, 0, TAU));

n.applyForce(screenForce);
		n.applyForce(noiseForce.limit(0.06));

n.update();
		n.vel.limit(12);
		n.edges();
	});

stroke(255, 40);

var averageVelocity = particles.reduce(function (p, n) {
		return p.add(n.vel);
	}, createVector(0, 0)).div(particles.length);
	var centerAverageVelocity = center.copy().add(averageVelocity.mult(10));
	line(center.x, center.y, centerAverageVelocity.x, centerAverageVelocity.y);
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

var Particle = function () {
	function Particle() {
		_classCallCheck(this, Particle);

this.reset();
	}

Particle.prototype.applyForce = function applyForce() {
		var _acc;

(_acc = this.acc).add.apply(_acc, arguments);
	};

Particle.prototype.reset = function reset() {
		this.pos = createVector(0, 0);
		this.acc = createVector(0, 0);
		this.vel = createVector(0, 0);
	};

Particle.prototype.randomize = function randomize() {
		this.pos.set(random(width), random(height));
	};

Particle.prototype.update = function update() {
		this.vel.add(this.acc);
		this.acc.mult(0);
		this.pos.add(this.vel);
		this.vel.mult(0.99);
	};

Particle.prototype.edges = function edges() {
		if (this.pos.x < 0) this.pos.x += width;else if (this.pos.x > width) this.pos.x -= width;
		if (this.pos.y < 0) this.pos.y += height;else if (this.pos.y > height) this.pos.y -= height;
	};

Particle.prototype.show = function show() {
		var i = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];

ellipse(this.pos.x, this.pos.y, 6);
	};

Particle.prototype.showVel = function showVel() {
		var pVel = this.pos.copy().add(this.vel);
		line(this.pos.x, this.pos.y, pVel.x, pVel.y);
	};

return Particle;
}();

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