Coder Dojo London Fireworks

Transcript

1. Fireworks!
2. Who has seen Fireworks?
3. Today we are Making Fireworks!
4. fwdtek.com/fireworks
5. A simple Firework
6. fireworks.display(function() { fireworks.make().launch() })
7. Change the Colour
8. fireworks.display(function() { fireworks.make({ colour:‘red’ }).launch() })
9. Change the Position
10. fireworks.display(function() { fireworks.make({ x:100 }).launch() })
11. Setting The Height
12. fireworks.display(function() { fireworks.make({ x:100, height:400 }).launch() })
13. Tweaking The Direction
14. fireworks.display(function() { fireworks.make({ x:100, height:400, direction:5 }).launch() })
15. Two Fireworks?
16. fireworks.display(function() { fireworks.make({ colour:‘red’ }).launch() fireworks.make({ colour:‘blue’ }).launch() })
17. fireworks.display(function() { fireworks.make({ x: 300, height: 400, direction: 2 }).launch() fireworks.make({ x: 300, height: 400, direction: -2 }).launch() })
18. Adding Timings
19. fireworks.display(function() { fireworks.make({ colour:‘red’ }).launch() fireworks.make({ colour:‘blue’ }).launch_in(3) })
20. Multiple Shots
21. fireworks.display(function() { fireworks.make({ repeat:5 }).launch() })
22. Waiting for Launch
23. fireworks.display(function() { fireworks.make({ repeat:5, wait:2 }).launch() })
24. Putting it all together...
25. fireworks.display(function() { fireworks.make({ colour:‘red’, x: 50, repeat: 5, wait: 4 }).launch() fireworks.make({ colour:‘green’, x: 250, repeat: 5, wait: 4 }).launch_in(2) })
26. Fire!!!
27. 1Minute Long Display fireworks.make({OPTIONS}).launch() fireworks.make({OPTIONS}).launch_in(SECONDS) colour, x, height, direction, repeat, wait fireworks.explode_at({ x:100, y:100 }) fireworks.on_click(function(x,y) { }) fireworks.on_move(function(x,y) { }) fireworks.after(SECONDS, function() { }) fireworks.every(SECONDS, function() { }) red, orange, yellow, green, cyan, blue, violet, magenta, pink
28. onMove & onClick