粒子掉落

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let canvas, ctx;

let arr = [];
let walkerCount = 500;
let t;

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

colorMode(HSB);

for (let i = 0; i < walkerCount; i++) {
		let w = new Walker();
		w.pos.set(0, -height / 5 * 2);
		w.applyForce(0, 3);
		arr.push(w);
	}
}

function draw() {
	// background(0);
	image(canvas, -4, 2, width + 8, height + 4);

noStroke();
	fill(0, 0.05);
	rect(0, 0, width, height);

translate(width / 2, height / 2);

t = Date.now() / 60;

// let h = cos(t / 40) * 30 + 210;
	// fill(h, 255, 255, 1);
	arr.forEach((n, i) => {
		// fill((h + i / 30) % 360, 255, 255, 1);
		let r = random(0.06, 0.1);
		n.applyForce(p5.Vector.random2D().mult(r));
		// let d = n.pos.magSq();
		let h = (n.pos.heading() + PI) / TAU * 360 + t;
		fill(h % 360, 255, 255, 1);
		n.applyForce(n.pos.copy().rotate(PI).limit(0.002));
		n.draw();
		n.update();
		n.edges();
	});
}

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

class Walker {
	constructor() {
		this.pos = createVector(0, 0);
		this.acc = createVector(0, 0);
		this.vel = createVector(0, 0);
		this.radius = 4;
	}
	applyForce(...force) {
		this.acc.add(...force);
	}
	update() {
		this.vel.add(this.acc);
		this.acc.set(0, 0);
		this.vel.mult(0.99);
		this.pos.add(this.vel);
	}
	edges() {
		if (this.pos.x < -width / 2) {
			this.pos.x += width;
		} else if (this.pos.x > width / 2) {
			this.pos.x -= width;
		}
		if (this.pos.y < -height / 2) {
			this.pos.y += height;
		} else if (this.pos.y > height / 2) {
			this.pos.y -= height;
		}
	}
	draw() {
		ellipse(this.pos.x, this.pos.y, this.radius * 2);
	}
}

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