Si hago clic en la primera bola, la segunda aparece como seleccionada. si hago clic en el segundo, el tercero aparece como seleccionado y así sucesivamente.
Pero el valor booleano está configurado correctamente.
No encuentro el problema en el código, debe ser algún error de lógica.
Agradezco cualquier ayuda, gracias.
diviértete con esta paradoja ;)
mi boceto.js
let balls = []; let ballAmount = 3; function setup() { let red = color(255, 0, 0); let green = color(0,255,0); let blue = color(0,0,255); let colors = [red, green, blue]; createCanvas(innerWidth, innerHeight); noStroke(); for (let i = 0; i < ballAmount; i++) { let tempX = 200 + (100 * i); balls.push(new Ball(tempX, 200, 20, colors[i])); } } function draw() { background(0); balls.forEach((ball) => { ball.show(); }); } function mousePressed() { print(balls); balls.forEach((ball) => { ball.clicked(); }); }mi bola.js (clase)
class Ball { constructor(x, y, r, color){ this.pos = new p5.Vector(); this.pos.x = x; this.pos.y = y; this.r = r; this.isSelected = false; this.ballFill = color; } show() { fill(this.ballFill); ellipse(this.pos.x, this.pos.y, this.r * 2); if (this.isSelected){ stroke(255, 255, 0); strokeWeight(4); } else { noStroke(); } } clicked() { let d = dist(mouseX, mouseY, this.pos.x, this.pos.y); if (d <= this.r) { this.isSelected = true; } else { this.isSelected = false; } } }tres notas...
Sea más elaborado en su pregunta. Afortunadamente, su código habla por sí mismo, pero de lo contrario no habría tenido idea de lo que realmente estaba preguntando. La descripción de tu publicación era "razonable", pero el título es un poco abominable.
Parece que está dibujando sus elipses con la idea de que r es la mitad del radio, por lo tanto, multiplica la r por 2. En su lugar, debe usar ellipseMode(RADIUS) para que quede más claro que ese es el comportamiento que desea. Eso le permite ingresar el radio como la mitad del ancho del círculo, como si estuviera usando su r . Consulte esta página para obtener más información.
La razón por la que siempre delineas la bola 'siguiente' en lugar de la que hiciste clic es porque dibujas la bola ANTES de cambiar los valores de los trazos:
este
show() { fill(this.ballFill); ellipse(this.pos.x, this.pos.y, this.r); if (this.isSelected){ stroke(255, 255, 0); strokeWeight(4); } else { noStroke(); } }debiera ser
show() { fill(this.ballFill); if (this.isSelected){ stroke(255, 255, 0); strokeWeight(4); } else { noStroke(); } ellipse(this.pos.x, this.pos.y, this.r); }Estabas dibujando la bola seleccionada con el golpe deshabilitado, luego habilitaste el golpe, luego dibujaste la siguiente bola no seleccionada CON el golpe que acabas de habilitar, después de lo cual desactivaste el golpe nuevamente.