El objetivo de este ejercicio es que la pelota recorra una distancia menor en cada ciclo, de modo que deje un rastro similar a una espiral y termine en el medio del lienzo.
Mi lógica me dijo que hiciera una variable "del" que se hiciera más grande con cada ciclo y la añadiera al límite de la distancia de viaje. Funciona bien para todos los lados excepto el izquierdo (donde termina el ciclo) si agrego la variable a ese lado, la bola nunca llega a un límite.
¿Cómo puedo arreglarlo? ¡Muchas gracias de antemano!
let speed = 7; let speedX = speed; let speedY = 0; let ellipseD = 50; let ellipseR = ellipseD / 2; let x = 0; let y = ellipseR; let limit = 25; let del = 0; function setup() { createCanvas(500, 500); } function draw() { background(166, 236, 255, 10); fill(255); strokeWeight(2); stroke(21, 171, 212); ellipse(x, y, ellipseD, ellipseD); x = x + speedX; y = y + speedY; if (x >= width - (limit + del)) { speedX = 0; speedY = speed; } if (y >= height - (limit + del)) { speedX = -speed; speedY = 0; } if (y >= height - (limit + del) && x < limit) { speedX = 0; speedY = -speed; } if (y < limit + del && x <= limit) { speedX = speed; speedY = 0; del = del + 50; console.log(del); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>El primer enfoque que probé es cambiar su última rama (la que reduce el espacio cuadrado al incrementar del ) a esto:
if (y < limit + (del + 50) && x <= limit) {El 50 aquí es la cantidad de incremento, lo que asegura que el giro a la derecha ocurra antes de que la serpiente se superponga con el área que ya ha visitado.
El problema es que la condición se vuelve demasiado agresiva y se dispara prematuramente. La solución que usé es agregar una verificación de speedX y speedY en cada rama para asegurarme de que la serpiente se mueva en la dirección correcta antes de activar la condición. Dado que todas las condiciones deben ser disjuntas por cuadro, las hice de else if manera para mayor claridad.
Finalmente, si speed no divide limpiamente ellipseD y ellipseR , es posible que vea algunos artefactos y espacios en el patrón de serpiente, por lo que usé 7, 42 y 21 (42 / 2) respectivamente para limpiar un poco los espacios. Es posible que deba jugar un poco con estos tamaños para obtener el efecto deseado.
const speed = 7; let speedX = speed; let speedY = 0; const ellipseD = 42; const ellipseR = ellipseD / 2; let x = 0; let y = ellipseR; const limit = 25; let del = 0; function setup() { createCanvas(500, 500); } function draw() { background(166, 236, 255, 10); fill(255); strokeWeight(2); stroke(21, 171, 212); ellipse(x, y, ellipseD, ellipseD); x += speedX; y += speedY; if (x >= width - (limit + del) && speedX > 0) { speedX = 0; speedY = speed; } else if (y >= height - (limit + del) && speedY > 0) { speedX = -speed; speedY = 0; } else if (y >= height - (limit + del) && x < (limit + del) && speedX < 0) { speedX = 0; speedY = -speed; } else if (y < limit + ellipseD + del && speedY < 0) { speedX = speed; speedY = 0; del += ellipseD; if (del > width / 2) { noLoop(); } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Creo que el problema más obvio con el comportamiento en el lado izquierdo es que no se tiene en cuenta del al marcar x :
// This checks if the ellipse is in the bottom left if (y >= height - (limit + del) && x < limit) { speedX = 0; speedY = -speed; } El problema con este código es que x < limit debería ser x < limit + del . Y existe un problema similar en la comprobación de cuando la elipse está en la parte superior izquierda.
Sin embargo, una vez que "arregle" eso, comenzará a tener problemas porque la verificación de la parte superior izquierda se activará repetidamente a medida que del aumente más rápido que los movimientos de la elipse. Por lo tanto, es necesario agregar comprobaciones para ver en qué dirección se mueve la elipse antes de actualizar la velocidad y el valor de del .
let speed = 7; let speedX = speed; let speedY = 0; let ellipseD = 50; let ellipseR = ellipseD / 2; let x = ellipseR; let y = ellipseR; let limit = ellipseR; let del = 0; function setup() { createCanvas(500, 500); } function draw() { background(166, 236, 255, 10); fill(255); strokeWeight(2); stroke(21, 171, 212); ellipse(x, y, ellipseD, ellipseD); x = x + speedX; y = y + speedY; if (x >= width - (limit + del) && x >= width - (limit + del) && speedX > 0) { speedX = 0; speedY = speed; console.log('top right'); } if (y >= height - (limit + del) && x >= width - (limit + del) && speedY > 0) { speedX = -speed; speedY = 0; console.log('bottom right'); } if (y >= height - (limit + del) && x <= (limit + del) && speedX < 0) { speedX = 0; speedY = -speed; console.log('bottom left'); } if (y < (limit + del) && x <= limit + del && speedY < 0) { speedX = speed; speedY = 0; del = del + 50; console.log(del); console.log('top left'); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>