Coding Challenge #27: Fireworks!

In this 4th of July themed coding challenge, I build an HTML5 canvas fireworks simulation from scratch using the p5.js JavaScript library. I also show how to use Processing to create 3D Fireworks. Code: https://thecodingtrain.com/challenges... 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s... 🎥 Previous video:    • Coding Challenge #26: 3D Supershapes   🎥 Next video:    • Coding Challenge #28: Metaballs   🎥 All videos:    • Coding Challenges   References: 🎇 PixelPyros: http://seb.ly/work/pixelpyros/ 🎥 PeasyCam Website: http://mrfeinberg.com/peasycam/ Videos: 🔴 Livestream Archive:    • Coding Train Live Stream 48 - Computer Vis...   Related Coding Challenges: 🚂 #78 Simple Particle System:    • Coding Challenge #78: Simple Particle System   Timestamps: 00:00 Welcome to Another Coding Challenge! 00:35 Code! Create a Particle constructor 03:45 Launch the Particle from a Random position 04:12 Add some Gravity 05:29 Create a Firework constructor 07:19 🎶 This Dot! Never Forget the This Dot! 🎶 08:08 Randomize the Velocity 08:32 Figure out When the Particle goes Down 11:23 Make the Fireworks burst 18:56 Make the Fireworks fade out 20:47 Get rid of Particles when they're Done 22:46 Get rid of Fireworks when they're Done 24:30 Add a Trail and Color to Fireworks 27:51 Back to Processing, making it 3D! 29:83 Rotate the Scene with PeasyCam 32:13 Start Fireworks at a Random Z Location Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/pas... 🚩 Suggest Topics: https://github.com/CodingTrain/Sugges... 💡 GitHub: https://github.com/CodingTrain 💬 Discord:   / discord   💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter:   / thecodingtrain   📸 Instagram:   / the.coding.train   🎥 Coding Challenges:    • Coding Challenges   🎥 Intro to Programming:    • Start learning here!   🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-o... This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod... #fireworks #natureofcode #oop #3d #forces #gravity #particlesystems #javascript #p5js #processing