流场盘旋生成

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

console.clear();
class Particle {
	constructor(x, y, radius) {
		this.position = createVector(x, y);
		this.velocity = createVector(0, 0);
		this.acceleration = createVector(0, 0);
		this.maxspeed = 3;
		this.radius = radius;
		this.radiusDecrement = 1;
	}
	draw(s, f) {
		strokeWeight(0.8);
		stroke(s);
		fill(`${f}`);
		this.radius -= this.radiusDecrement;
		ellipse(this.position.x, this.position.y, this.radius);
	}
	update() {
		this.position.add(this.velocity);
		this.velocity.add(this.acceleration);
		this.acceleration.mult(0);
		this.velocity.limit(this.maxspeed);
	}
	applyForce(force) {
		this.acceleration.add(force);
	}
	follow(vectors) {
		let x = floor(this.position.x / scale);
		let y = floor(this.position.y / scale);
		let index = x + y * cols;
		let force = vectors[index];
		this.applyForce(force);
	}
}

const GUI = new dat.GUI();

let colorConfig = {
	background: "rgb(0,0,0)",
	stroke: 0,
	fill: "rgb(0,0,0)",
};

let cols,
	 scale,
	 rows,
	 particles = [],
	 flowFields;

let canvas;

function setup() {
	canvas = createCanvas(innerWidth, innerHeight);
	resetAndInit();
}

let increment = 0.1,
	 start = 0,
	 zoffset = 0,
	 framecount = 0;

framecount++;
}

function windowResized() {
	resizeCanvas(innerWidth, innerHeight);
	resetAndInit();
}

function resetCanvas() {
	background(`${colorConfig.background}`);
	framecount = 0;
	particles = [];
}

function resetAndInit() {
	resetCanvas();
	init();
}

// All dat.GUI Code ----------
let typesFolder = GUI.addFolder("Types");
addCheckbox(typesFolder, settings.types, "type_1", "Full");
addCheckbox(typesFolder, settings.types, "type_2", "circle");

let colorFolder = GUI.addFolder("Color Config");
addCheckbox(colorFolder, settings.colorConfig, "whiteOnBlack", "White On Black");
addCheckbox(colorFolder, settings.colorConfig, "blackOnWhite", "Black On White");

GUI.add(settings, "totalNumberOfParticles", 10, 360 * 2)
	.name("Particles")
	.onChange(resetAndInit);
GUI.add(settings, "scale", 10, 50)
	.name("Scale")
	.onChange(resetAndInit);
GUI.add(settings.radius, "initial", settings.radius.min, settings.radius.max)
	.step(10)
	.name("Radius")
	.onChange(resetAndInit);
GUI.add(settings, "randomRadius")
	.name("Random Radius")
	.onChange(resetAndInit);
GUI.add(settings, "redraw").name("RE-DRAW");
GUI.add(settings, "save").name("SAVE");

function addCheckbox(container, object, prop, name = prop) {
	container
		.add(object, prop)
		.name(name)
		.listen()
		.onChange(function() {
		setChecked(object, prop);
		resetAndInit();
		checkColorConfig();
	});
}

// UTILS ----------

function setChecked(parameter, prop) {
	for (let param in parameter) {
		if (typeof param != Function || typeof param != Number) {
			parameter[param] = false;
		}
	}
	parameter[prop] = true;
}

function saveCanvas(canvas) {
	saveCanvas(canvas, "flowfield_art", "jpg");
}

function randomIntegerFromRange(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

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