Estoy tratando de implementar un grupo de objetos que caerán desde la parte superior del lienzo en lugares aleatorios, y luego, cuando toquen la parte inferior del lienzo, reaparecerán en la parte superior del lienzo. Idealmente, quiero cambiar este código en el futuro para usar sprites que caerán desde la parte superior del lienzo y explotarán cuando toquen la parte inferior del lienzo, pero luego reaparecerán nuevamente en la parte superior.
Tengo el siguiente código que funciona cuando se presiona el mouse, pero me gustaría volver a escribir este código para que el evento ocurra automáticamente sin que sea necesario presionar el mouse para que los objetos caigan.
ver el código a continuación.
var x, y; var particle = []; function setup() { createCanvas(720, 400); // Starts in the middle x = width / 2; y = height; } function draw() { background(0); if (mouseIsPressed){ stroke(50); fill(100); ellipse(x, y, 24, 24); } x = x + 0; // Moving up at a constant speed y = y + 2; // Reset to the bottom if (y >= height) { y = 0; } }Use mousePressed() para agregar nuevas partículas a la lista. Las partículas se agregan en la posición actual del mouse ( mouseX , mouseY ). Mueve y dibuja las partículas en un bucle:
var particles = []; function setup() { createCanvas(720, 400); } function mousePressed() { particles.push([mouseX, mouseY]); } function draw() { background(0); stroke(50); for (let i=0; i < particles.length; i++) { particles[i][1] += 2; if (particles[i][1] > height) { particles[i][1] = 0; } fill(100); ellipse(particles[i][0], particles[i][1], 24, 24); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script> Alternativamente, puede generar las partículas con un intervalo de tiempo. Obtenga la cantidad de milisegundos (milésimas de segundo) desde que comenzó el boceto con millis() . La coordenada y de una nueva partícula es 0 y la coordenada x es random() :
var particles = []; function setup() { createCanvas(720, 400); } function mousePressed() { particles.push([mouseX, mouseY]); } function draw() { let max_no_of_particles = 40; let expected_no_of_praticles = min(max_no_of_particles, millis() / 100); if (particles.length < expected_no_of_praticles) { particles.push([random(12, width-12), 0]); } background(0); stroke(50); for (let i=0; i < particles.length; i++) { particles[i][1] += 2; if (particles[i][1] > height) { particles[i][1] = 0; } fill(100); ellipse(particles[i][0], particles[i][1], 24, 24); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>