Después de algunas horas de trabajo e investigación (acabo de empezar a aprender p5js y javascript) tengo alrededor de 50 líneas de código que crean una cuadrícula de círculos y comienzan a moverlos por el lienzo. Antes de entrar en mi problema, compartiré el código.

 var circles = []; function setup() { createCanvas(500, 500); for (var a = 50; a < width - 300; a += 20) { for (var b = 50; b < height - 300; b += 20) { circles.push(new Circle(a, b)); } } } function draw() { background(50); for (var b = 0; b < circles.length; b++) { circles[b].show(); } } function Circle(x, y) { this.x = x; this.y = y; this.show = function() { fill(255); noStroke(); ellipse(this.x, this.y, 10, 10); if (this.x < 51) { this.x += 1 this.y += 1 } if (this.x < 430) { this.x += 1 this.y += 1 } if (this.x > 430) { this.x -= 1 this.y -= 1 } if (this.x < 51) { this.x += 1 this.y += 1 } } }

Lo que me gustaría hacer es mover esta cuadrícula de círculos que comienza en (50,50) a la esquina inferior derecha. Una vez que llegue (width-50,height-50) , me gustaría que el movimiento retrocediera hasta el punto de partida y luego hacia el otro lado. Este código mueve los círculos a la esquina inferior derecha con éxito, algo sale mal. Los círculos no invierten su movimiento, sino que se desordenan. Pensé que las declaraciones if manejarían esto, pero debo estar perdiendo algo. Solucioné problemas durante aproximadamente una hora y ahora pensé en preguntarle a SO. ¡Gracias!