Coding Challenge #27: Fireworks!

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=CKeyIbT3vXI


Category:
Tutorial
Duration: 34:35
316,018 views
5,347

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/27-fireworks

πŸ•ΉοΈ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/O2M0SO-WO

πŸŽ₯ Previous video: https://youtu.be/akM4wMZIBWg?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Next video: https://youtu.be/ccYLb7cLB1I?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
πŸŽ‡ PixelPyros: http://seb.ly/work/pixelpyros/
πŸŽ₯ PeasyCam Website: http://mrfeinberg.com/peasycam/

Videos:
πŸ”΄ Livestream Archive: https://youtu.be/ATWOjXdRIoo

Related Coding Challenges:
πŸš‚ #78 Simple Particle System: https://youtu.be/UcdigVaIYAk

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/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
πŸ’‘ GitHub: https://github.com/CodingTrain
πŸ’¬ Discord: https://discord.gg/hPuGy2g
πŸ’– Membership: http://youtube.com/thecodingtrain/join
πŸ›’ Store: https://standard.tv/codingtrain
πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain
πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/

πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

πŸ”— 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-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#fireworks #natureofcode #oop #3d #forces #gravity #particlesystems #javascript #p5js #processing



Other Videos By The Coding Train


2016-07-169.14: Loading Animation - p5.js Tutorial
2016-07-15Coding Challenge #28: Metaballs
2016-07-14Live Stream #50: Loading Animation, Metaballs and 2D Arrays in JS
2016-07-13Q&A #2: What is WEBGL in p5.js?
2016-07-1311.8: Computer Vision: Improved Blob Detection - Processing Tutorial
2016-07-13Coding Train Live 49b - Blob Detection Addendum and Q&A
2016-07-12Coding Train Live 49a: Q&A on WebGL and Improved Blob Detection
2016-07-0711.7: Computer Vision: Blob Detection - Processing Tutorial
2016-07-0611.6: Computer Vision: Motion Detection - Processing Tutorial
2016-07-0511.5: Computer Vision: Color Tracking - Processing Tutorial
2016-07-02Coding Challenge #27: Fireworks!
2016-06-30Coding Train Live Stream 48 - Computer Vision and Fireworks!
2016-06-30Coding Challenge #26: 3D Supershapes
2016-06-29Coding Challenge #25: Spherical Geometry
2016-06-28Live Stream #47 - 3D Supershapes and Spherical Geometry
2016-06-27Coding Challenge #24: Perlin Noise Flow Field
2016-06-26I.6: noiseDetail() - Perlin Noise and p5.js Tutorial
2016-06-24I.5: 2D Noise - Perlin Noise and p5.js Tutorial
2016-06-24I.4: Graphing 1D Perlin Noise - Perlin Noise and p5.js Tutorial
2016-06-23I.3: noise() vs random() - Perlin Noise and p5.js Tutorial
2016-06-23I.2: Introduction - Perlin Noise and p5.js Tutorial


Tags:
coding challenge
p5js
processing
creative coding
3d
daniel shiffman
fireworks
p5.js
javascript
tutorial
processing tutorial
programming challenge
nature of code
oop
p3d
coding
4th of july
p5.js tutorial
object oriented programming
forces
gravity
nature coding
independance day
fireworks simulation
javascript fireworks
html5 fireworks
html5 canvas fireworks
processing fireworks
fireworks tutorial
particle systems
particle systems tutorial