Question

当用户点击任何粒子时，我希望它扩展和淡化，并在与任何其他粒子碰撞时，粒子也会膨胀和褪色。现在我的问题是我想知道是否有一种方法可以让我们在碰撞时获得这些粒子（在这种情况下由构造函数构成）。链接到Codepen

var bubbles = [];

function setup() {
	frameRate(25);
	// Creates Canvas
	createCanvas(windowWidth, windowHeight);
	//Genrates 100 Particles with random a & y
	for (var i = 0; i < 80; i++) {
		var x = random(width);
		var y = random(height);
		bubbles[i] = new Bubble(x, y);
	}
}

function mousePressed() {
	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].clicked();
	}
}

function draw() {
	clear();
	//Adds color and motion
	for (var bubble of bubbles) {
		fill(bubble.color.red, bubble.color.green, bubble.color.blue);
		bubble.move();
		bubble.display();
	}
}

function Bubble(x, y) {
	this.x = x;
	this.y = y;
	this.wh = 15;
	this.speedX = random(1, 5);
	this.speedY = random(1, 5);

	//Individual Particle Creation
	this.display = function() {
		noStroke();
		ellipse(this.x, this.y, this.wh, this.wh);
	};

	//Interactivity
	this.clicked = function() {
		var d = dist(this.x, this.y, mouseX, mouseY);
		if (d < 8) {
			this.wh = 100;
		}
	};

	//Randomizes colors
	this.color = {
		red: random(255),
		green: random(255),
		blue: random(255)
	};

	//Particle Motion
	this.move = function() {
		//Motion in X direction
		this.x += this.speedX;

		//Bouncing back on X-axis
		if (this.x > windowWidth || this.x < 0) {
			this.speedX = -this.speedX;
		}
		//Motion in Y Direction
		this.y += this.speedY;
		//Bouncing back on Y-axis
		if (this.y > windowHeight || this.y < 0) {
			this.speedY = -this.speedY;
		}
	};
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

::-webkit-scrollbar{
	display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>

Answer 1

使用嵌套的for循环。

第1步：循环泡泡。使用for循环执行此操作。

第2步：对于每个气泡，循环其余气泡（如果您在气泡4上，请从气泡5开始）。在第一个循环中使用另一个for循环执行此操作。

第3步：现在您有两个气泡，请在它们之间进行碰撞。

如果您无法正常工作，请从小处开始。从一个简单的程序开始，该程序只显示两个硬编码的气泡，并在它们之间collision detection。

粒子（由构造函数制成）在碰撞时膨胀并褪色

1 个答案: