Programul principal [liniile 5-31] declară mai întâi variabilele și apoi creează un array de obiecte tip artificie. Fiecare artificie va avea propriile coordonate x și y, vârstă (timpul scurs de la explozie), fază (zbor/explozie) și un array de scântei.
Fiecare scânteie, la rândul ei, are propria viteză orizontală (vx) și verticală (vy), greutate, care determină cât de repede cade, și o culoare (determinată de componentele roșu, verde și albastru).
În [31], pornim funcția principală de animație - explode [40-75].
Această funcție actualizează și desenează fiecare scânteie a fiecărei artificii.
[44-62] este faza de explozie. În această fază, fiecare scânteie are o urmă de 10 dreptunghiuri. Calculăm poziția fiecărui dreptunghi [45-48] pe baza coordonatelor artificiei, vitezei scânteii, 'vârstei' exploziei și indexului dreptunghiului. Nu am folosit formule balistice, în schimb, am inventat această ciudățenie [48] prin încercare și eroare.
[49-52] calculează culoarea fiecărui dreptunghi, luând în considerare factorul de estompare, care este derivat din 'vârsta' exploziei - cu cât explozia este mai veche, cu atât culoarea este mai întunecată.
[53-56] desenează dreptunghiul
În [60-61], există o șansă de 5% de a reseta artificia dacă explozia este mai veche de 100 de cadre.
Funcția de resetare [33-37] pune artificia înapoi într-un loc aleatoriu în partea de jos a ecranului și faza de 'zbor' începe din nou.
În această fază [64-71], artificia se deplasează în sus pe ecran [64] și este desenată o coadă extrem de rudimentară de scântei [65-69].
Există o șansă de .001 ca artificia să explodeze (faza sa se schimbă) într-un anumit cadru [71]. Va exploda cu siguranță odată ce coordonata y ajunge la 200.
Distracție plăcută!
| <html> |
| <body style='background-color:black'> |
| <canvas id='myCanvas' width='800' height='800'></canvas> |
| <script> |
| const max_fireworks = 5, |
| max_sparks = 50; |
| let canvas = document.getElementById('myCanvas'); |
| let context = canvas.getContext('2d'); |
| let fireworks = []; |
| for (let i = 0; i < max_fireworks; i++) { |
| let firework = { |
| sparks: [] |
| }; |
| for (let n = 0; n < max_sparks; n++) { |
| let spark = { |
| vx: Math.random() * 5 + .5, |
| vy: Math.random() * 5 + .5, |
| weight: Math.random() * .3 + .03, |
| red: Math.floor(Math.random() * 2), |
| green: Math.floor(Math.random() * 2), |
| blue: Math.floor(Math.random() * 2) |
| }; |
| if (Math.random() > .5) spark.vx = -spark.vx; |
| if (Math.random() > .5) spark.vy = -spark.vy; |
| firework.sparks.push(spark); |
| } |
| fireworks.push(firework); |
| resetFirework(firework); |
| } |
| window.requestAnimationFrame(explode); |
| function resetFirework(firework) { |
| firework.x = Math.floor(Math.random() * canvas.width); |
| firework.y = canvas.height; |
| firework.age = 0; |
| firework.phase = 'fly'; |
| } |
| function explode() { |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| fireworks.forEach((firework,index) => { |
| if (firework.phase == 'explode') { |
| firework.sparks.forEach((spark) => { |
| for (let i = 0; i < 10; i++) { |
| let trailAge = firework.age + i; |
| let x = firework.x + spark.vx * trailAge; |
| let y = firework.y + spark.vy * trailAge + spark.weight * trailAge * spark.weight * trailAge; |
| let fade = i * 20 - firework.age * 2; |
| let r = Math.floor(spark.red * fade); |
| let g = Math.floor(spark.green * fade); |
| let b = Math.floor(spark.blue * fade); |
| context.beginPath(); |
| context.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',1)'; |
| context.rect(x, y, 4, 4); |
| context.fill(); |
| } |
| }); |
| firework.age++; |
| if (firework.age > 100 && Math.random() < .05) { |
| resetFirework(firework); |
| } |
| } else { |
| firework.y = firework.y - 10; |
| for (let spark = 0; spark < 15; spark++) { |
| context.beginPath(); |
| context.fillStyle = 'rgba(' + index * 50 + ',' + spark * 17 + ',0,1)'; |
| context.rect(firework.x + Math.random() * spark - spark / 2, firework.y + spark * 4, 4, 4); |
| context.fill(); |
| } |
| if (Math.random() < .001 || firework.y < 200) firework.phase = 'explode'; |
| } |
| }); |
| window.requestAnimationFrame(explode); |
| } |
| </script> |
| </body> |
| </html> |