Last active
August 29, 2015 14:03
-
-
Save forresto/074e426928fb19ac7e0f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Canvas stuff | |
| canvas = document.getElementById 'fireworks' | |
| context = canvas.getContext '2d' | |
| width = canvas.width = window.innerWidth | |
| w2 = Math.floor width/2 | |
| height = canvas.height = window.innerHeight | |
| h2 = Math.floor height/2 | |
| TAU = Math.PI*2 | |
| context.font = "50px verdana" | |
| # Emoji stuff | |
| emojiStringToArray = (str) -> | |
| split = str.split(/([\uD800-\uDBFF][\uDC00-\uDFFF])/); | |
| arr = [] | |
| for char in split | |
| unless char is "" | |
| arr.push char | |
| return arr | |
| emoji = emojiStringToArray "🌚🌘🌗🌖🌝🌔🌓🌒" | |
| # Boom | |
| particles = [] | |
| recycle = [] | |
| index = 0 | |
| GRAVITY = 0.1 | |
| addParticle = (char, x, y, xSpeed, ySpeed, rocket) -> | |
| if recycle.length > 0 | |
| part = particles[recycle.shift()] | |
| else | |
| part = {} | |
| particles.push part | |
| part.char = char | |
| part.x = x | |
| part.y = y | |
| part.xSpeed = xSpeed | |
| part.ySpeed = ySpeed | |
| part.rocket = rocket | |
| part.live = true | |
| return part | |
| removeParticle = (index) -> | |
| part = particles[index] | |
| part.live = false | |
| recycle.push index | |
| return part | |
| fire = (count) -> | |
| # Make rockets | |
| for i in [0...count] | |
| addParticle(emoji[index], Math.random()*width, height, Math.random()*6 - 3, Math.random()*-8 - 5, true) | |
| index = (index+1)%emoji.length | |
| fire(1) | |
| boom = (index) -> | |
| # Make particles | |
| exploding = particles[index] | |
| removeParticle(index) | |
| for i in [0...50] | |
| addParticle(exploding.char, exploding.x, exploding.y, Math.random()*10 - 5, Math.random()*10 - 5, false) | |
| animate = () -> | |
| requestAnimationFrame animate | |
| for part, i in particles | |
| continue unless part.live | |
| context.fillText part.char, part.x-26, part.y+20 | |
| if part.rocket and -0.1 < part.ySpeed < 0.1 | |
| boom(i) | |
| fire(1) | |
| continue | |
| if part.x < -100 or part.x > width+100 or part.y > height+100 | |
| # Kill it | |
| removeParticle(i) | |
| if part.rocket | |
| fire(1) | |
| continue | |
| part.ySpeed += GRAVITY | |
| part.y += part.ySpeed | |
| part.x += part.xSpeed | |
| requestAnimationFrame animate |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #fireworks { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| footer { | |
| font: 10px verdana; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Emoji Fireworks</title> | |
| </head> | |
| <body> | |
| <footer> | |
| Text art. Only works in Firefox and Safari on Mac. Chrome doesn't like emoji 👎. | |
| </footer> | |
| <canvas id="fireworks"></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment