|
1 | 1 | # javascript-skyrocket |
2 | 2 | Create fireworks on HTML canvas with Skyrocket.js |
| 3 | + |
| 4 | +## Description |
| 5 | +Skyrocket.js is a JavaScript library which displays skyrocket fireworks on HTML canvas. |
| 6 | + |
| 7 | +Skyrockets launch from the bottom center of the screen, fly up, explode, then fade. Currently the rockets are Font Awesome icons. |
| 8 | + |
| 9 | +Rocket properties are defined in rocket_definitions.js with rockets being picked at random. |
| 10 | + |
| 11 | +Also there is a code generated background of a city skyline which is different each time the page is loaded. |
| 12 | + |
| 13 | +GreenSock's Animation Platform (GSAP) is used to power the rocket and explosion animations. |
| 14 | + |
| 15 | +## Example |
| 16 | +For an example, load the included index.html file in your browser. |
| 17 | + |
| 18 | +As you will see there is a function called addFirework() which is called repeatedly to spawn new fireworks at a random interval. |
| 19 | + |
| 20 | +## Tutorials and other documentation |
| 21 | +Sorry, there are none at this time. Currently this library is in a pre-release state, the v0.1 was created in one day during a coding hackathon. |
| 22 | + |
| 23 | +## Maintainer |
| 24 | +Douglas McKechie https://github.com/zarocknz |
| 25 | + |
| 26 | +Keep informed about my JavaScript libraries by following https://twitter.com/dougtesting |
| 27 | + |
| 28 | +## Credits |
| 29 | +Special thanks to these people who collaborated with me on this during the hackday... |
| 30 | + |
| 31 | +* Jaque van der Berg https://github.com/jaque777 |
| 32 | + |
| 33 | +* David Malone https://github.com/soulrolll |
| 34 | + |
| 35 | +Also a big thank you to Catalyst http://www.catalyst.net.nz/ for having a hackday to celebrate 20 years and allowing us to get this open source library off off the ground. |
| 36 | + |
| 37 | +## TODO |
| 38 | +Heaps, which may include the following (not in any particular order)... |
| 39 | + |
| 40 | +* Remove jQuery dependancy for the backdrop/skyline, use pure JS |
| 41 | +* Stop sky from changing colour, ensure is nice and dark so can see fireworks |
| 42 | +* Define more and better firework explosion shapes and colours |
| 43 | +* Perhaps de-couple firework explosion shapes from the colours so users can pick a shape and specify any colour |
| 44 | +* Remove Font Awesome and code-draw some skyrocket rockets |
| 45 | +* Allow images to be used for the rockets |
| 46 | +* Add launch and explosion sounds, either pre-recorded or perhaps audio API generated |
| 47 | +* Lighten sky slightly when rockets explode |
| 48 | +* Allow explosion particles to have tails (will aid in creating different looking explosions) |
| 49 | +* Fade rocket trail particles from the bottom up over time |
| 50 | +* Allow the user to specify where along the screen (x axis) the rocket launches from rather than always in the center, perhaps there is an option for this to be random |
| 51 | +* Stop the timeout adding fireworks when the browser tab has lost focus (when the user returns 100's of fireworks can be launched at once) |
| 52 | +* Sort backdrop building height being the same at mobile width |
| 53 | +* Ensure that backdrop is optional and there are some config parameters for it |
| 54 | +* Allow the user to click/tap to launch additional skyrockets, perhaps to the x,y location of the click |
| 55 | +* Create some documentation and examples |
0 commit comments