0
Lorsqu'un utilisateur clique sur une particule, je souhaite qu'elle se dilate et se décolore et qu'elle se bloque lors d'une collision avec toute autre particule. Maintenant, mon problème est que je veux savoir s'il y a une façon dont je peux obtenir ces particules (faites avec le constructeur dans ce cas) pour se faire mutuellement quand elles entrent en collision. Lien vers CodepenLes particules (créées avec le constructeur) se dilatent et se dégradent lors d'une collision
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>
Boucle sur les bulles et boucle sur les bulles. Si la bulle n'est pas la même, vérifiez la collision ... –