0
當用戶點擊任何粒子時，我希望它展開並褪色，並與其他粒子發生碰撞並且該粒子也會膨脹並褪色。現在我的問題是，我想知道是否有一種方法可以讓我們在碰撞時得到這些粒子（在這種情況下由構造函數製作）來相互影響。鏈接Codepen粒子（由構造函數製成）在碰撞時展開並褪色
var bubbles = [];
function setup() {
\t frameRate(25);
\t // Creates Canvas
\t createCanvas(windowWidth, windowHeight);
\t //Genrates 100 Particles with random a & y
\t for (var i = 0; i < 80; i++) {
\t \t var x = random(width);
\t \t var y = random(height);
\t \t bubbles[i] = new Bubble(x, y);
\t }
}
function mousePressed() {
\t for (var i = 0; i < bubbles.length; i++) {
\t \t bubbles[i].clicked();
\t }
}
function draw() {
\t clear();
\t //Adds color and motion
\t for (var bubble of bubbles) {
\t \t fill(bubble.color.red, bubble.color.green, bubble.color.blue);
\t \t bubble.move();
\t \t bubble.display();
\t }
}
function Bubble(x, y) {
\t this.x = x;
\t this.y = y;
\t this.wh = 15;
\t this.speedX = random(1, 5);
\t this.speedY = random(1, 5);
\t //Individual Particle Creation
\t this.display = function() {
\t \t noStroke();
\t \t ellipse(this.x, this.y, this.wh, this.wh);
\t };
\t //Interactivity
\t this.clicked = function() {
\t \t var d = dist(this.x, this.y, mouseX, mouseY);
\t \t if (d < 8) {
\t \t \t this.wh = 100;
\t \t }
\t };
\t //Randomizes colors
\t this.color = {
\t \t red: random(255),
\t \t green: random(255),
\t \t blue: random(255)
\t };
\t //Particle Motion
\t this.move = function() {
\t \t //Motion in X direction
\t \t this.x += this.speedX;
\t \t //Bouncing back on X-axis
\t \t if (this.x > windowWidth || this.x < 0) {
\t \t \t this.speedX = -this.speedX;
\t \t }
\t \t //Motion in Y Direction
\t \t this.y += this.speedY;
\t \t //Bouncing back on Y-axis
\t \t if (this.y > windowHeight || this.y < 0) {
\t \t \t this.speedY = -this.speedY;
\t \t }
\t };
}
function windowResized() {
\t resizeCanvas(windowWidth, windowHeight);
}::-webkit-scrollbar{
\t display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
環繞氣泡並環繞氣泡。如果氣泡不一樣，請檢查碰撞... –