title
Coding Challenge #27: Fireworks!
description
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
detail
{'title': 'Coding Challenge #27: Fireworks!', 'heatmap': [{'end': 1503.087, 'start': 1473.654, 'weight': 1}], 'summary': 'Features a coding challenge in javascript to program a fireworks simulation, covering particle physics, optimization, particle explosions, simulating and optimizing particle systems, and 3d webgl programming for fireworks simulation, encouraging experimentation and sharing of variations.', 'chapters': [{'end': 36.973, 'segs': [{'end': 36.973, 'src': 'embed', 'start': 0.59, 'weight': 0, 'content': [{'end': 3.076, 'text': 'Hello, and welcome to another coding challenge.', 'start': 0.59, 'duration': 2.486}, {'end': 5.862, 'text': "In this coding challenge, I'm going to program a fireworks simulation.", 'start': 3.156, 'duration': 2.706}, {'end': 13.381, 'text': "and I'm going to program it from scratch in JavaScript in the browser.", 'start': 9.7, 'duration': 3.681}, {'end': 17.803, 'text': "the version that's running actually behind me is a version that I made in processing a Java based platform.", 'start': 13.381, 'duration': 4.422}, {'end': 24.747, 'text': 'the code for the one behind me and the one that I will make in this video will both be available in links in the description and at the end of this video.', 'start': 17.803, 'duration': 6.944}, {'end': 29.669, 'text': "I'm hoping to return back to this processing one and also turn it into 3d fireworks.", 'start': 24.747, 'duration': 4.922}, {'end': 33.571, 'text': "this might have a three-dimensional like quality to it, but it's really just two dimensions.", 'start': 29.669, 'duration': 3.902}, {'end': 36.973, 'text': 'Okay, so here we go.', 'start': 34.711, 'duration': 2.262}], 'summary': 'A coding challenge to program a fireworks simulation in javascript and potentially in 3d.', 'duration': 36.383, 'max_score': 0.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI590.jpg'}], 'start': 0.59, 'title': 'Fireworks simulation coding challenge', 'summary': 'Features a coding challenge in javascript to program a fireworks simulation, with plans for a 3d version, and provides code links.', 'chapters': [{'end': 36.973, 'start': 0.59, 'title': 'Fireworks simulation coding challenge', 'summary': 'Features a coding challenge where the presenter programs a fireworks simulation from scratch in javascript, with plans to eventually convert it into a 3d version, and provides links for the code.', 'duration': 36.383, 'highlights': ['The presenter is conducting a coding challenge to program a fireworks simulation from scratch in JavaScript, with plans to eventually convert it into a 3D version.', 'The current version is in processing, a Java-based platform, with the presenter making the code available in the video description and at the end of the video.']}], 'duration': 36.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI590.jpg', 'highlights': ['The presenter is conducting a coding challenge to program a fireworks simulation from scratch in JavaScript, with plans to eventually convert it into a 3D version.', 'The current version is in processing, a Java-based platform, with the presenter making the code available in the video description and at the end of the video.']}, {'end': 455.144, 'segs': [{'end': 93.93, 'src': 'embed', 'start': 62.38, 'weight': 1, 'content': [{'end': 64.702, 'text': 'The particle should have a position which will be a vector.', 'start': 62.38, 'duration': 2.322}, {'end': 67.104, 'text': 'I need to use physics here.', 'start': 64.721, 'duration': 2.383}, {'end': 68.185, 'text': "It's going to have a velocity.", 'start': 67.124, 'duration': 1.061}, {'end': 72.706, 'text': 'which will right now be just zero, and the particle is also going to have an acceleration.', 'start': 68.945, 'duration': 3.761}, {'end': 75.046, 'text': "so I'm going to kind of custom bake a physics engine.", 'start': 72.706, 'duration': 2.34}, {'end': 79.487, 'text': "that's the same sort of model that I use in all my nature of code, tutorials and videos about physics.", 'start': 75.046, 'duration': 4.441}, {'end': 82.868, 'text': "but I'm just going to kind of bake this from scratch, really quickly.", 'start': 79.487, 'duration': 3.381}, {'end': 93.93, 'text': "and then I'm going to add a function called update, and that function does what it takes the velocity and adds it to the position,", 'start': 82.868, 'duration': 11.062}], 'summary': 'Creating a custom physics engine with position, velocity, and acceleration.', 'duration': 31.55, 'max_score': 62.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI62380.jpg'}, {'end': 136.151, 'src': 'embed', 'start': 106.425, 'weight': 2, 'content': [{'end': 109.007, 'text': "And in that function, I'm going to get some sort of force.", 'start': 106.425, 'duration': 2.582}, {'end': 112.03, 'text': "And I'm going to add that force to the acceleration.", 'start': 109.488, 'duration': 2.542}, {'end': 114.031, 'text': 'This is the idea of force accumulation.', 'start': 112.07, 'duration': 1.961}, {'end': 121.598, 'text': 'Force equals mass times acceleration, or acceleration equals mass times acceleration, or acceleration equals force divided by mass.', 'start': 114.812, 'duration': 6.786}, {'end': 129.945, 'text': "but I'm going to eliminate mass for simplicity, so acceleration equals force, or all the forces of a moment added together.", 'start': 124.5, 'duration': 5.445}, {'end': 136.151, 'text': 'So, once I do that I also need to make sure that after I update the particle each frame,', 'start': 130.305, 'duration': 5.846}], 'summary': 'Force accumulation concept: acceleration equals force, or all forces added together.', 'duration': 29.726, 'max_score': 106.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI106425.jpg'}, {'end': 321.938, 'src': 'embed', 'start': 289.659, 'weight': 3, 'content': [{'end': 290.379, 'text': 'Let me refresh.', 'start': 289.659, 'duration': 0.72}, {'end': 294.698, 'text': "Didn't make it very high, but that's sort of reasonable.", 'start': 292.232, 'duration': 2.466}, {'end': 299.701, 'text': "So let's make the particle's velocity a lot bigger, like negative 10.", 'start': 294.738, 'duration': 4.963}, {'end': 300.422, 'text': "Okay, so that's good.", 'start': 299.701, 'duration': 0.721}, {'end': 303.664, 'text': 'So we can see, so this is the start of our fireworks simulation.', 'start': 301.022, 'duration': 2.642}, {'end': 309.128, 'text': "Something shooting up from the bottom, and then at some point it's going to explode and make a lot of particles.", 'start': 304.064, 'duration': 5.064}, {'end': 313.652, 'text': 'But before I could do that, what I want to have is just have a lot of things shooting up from the bottom continuously.', 'start': 309.349, 'duration': 4.303}, {'end': 315.033, 'text': "So let's get that going.", 'start': 313.852, 'duration': 1.181}, {'end': 321.938, 'text': 'So instead of having one single firework, what I really want is to have an array of them.', 'start': 315.373, 'duration': 6.565}], 'summary': 'Simulating fireworks with an array of particles shooting up continuously.', 'duration': 32.279, 'max_score': 289.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI289659.jpg'}, {'end': 412.192, 'src': 'embed', 'start': 385.237, 'weight': 0, 'content': [{'end': 391.561, 'text': 'But the firework object is also going to, in a moment, not just be the particle moving up, but suddenly all the particles that explode from it.', 'start': 385.237, 'duration': 6.324}, {'end': 396.104, 'text': 'So I need this object to keep track of that individual particle and then also an array of particles.', 'start': 391.881, 'duration': 4.223}, {'end': 403.409, 'text': 'But this should at least get me now if I say firework.push.', 'start': 396.425, 'duration': 6.984}, {'end': 412.192, 'text': 'new firework and then I should be able to say firework dot.', 'start': 405.49, 'duration': 6.702}], 'summary': 'Developing a firework object to track individual particles and an array of particles for more realistic explosions.', 'duration': 26.955, 'max_score': 385.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI385237.jpg'}], 'start': 36.973, 'title': 'Creating and simulating particle physics in javascript', 'summary': 'Covers the creation of a particle constructor function in javascript for a physics engine, including position, velocity, and acceleration concepts, as well as the progression of a particle simulation from a single particle to a firework display.', 'chapters': [{'end': 146.053, 'start': 36.973, 'title': 'Creating particle physics engine in javascript', 'summary': 'Discusses the process of creating a particle constructor function in javascript for a physics engine, including the concepts of position, velocity, and acceleration, and the application of force to the acceleration.', 'duration': 109.08, 'highlights': ['The particle constructor function includes properties for position, velocity, and acceleration, and a function called update, which modifies the position and velocity based on the acceleration.', 'The concept of force accumulation is implemented through the apply force function, where a force is added to the acceleration, and the accumulated force is cleared out after each frame update.', 'The chapter emphasizes the custom baking of a physics engine in JavaScript, highlighting the application of force to the acceleration for simulating particle behavior.']}, {'end': 455.144, 'start': 146.053, 'title': 'Particle simulation progression', 'summary': 'Details the creation and progression of a particle simulation, starting with a single particle moving upwards, adding gravity, and transitioning to multiple particles forming a firework display.', 'duration': 309.091, 'highlights': ['The creation of a single particle moving upwards and testing its functionality. The chapter begins by creating a single particle that starts at a random width and the bottom of the window, with a velocity pointing upwards, showcasing its functionality and movement.', 'Addition of gravity to the particle simulation. The chapter adds gravity as a global variable, pointing downwards, and applies it to the particle, simulating the effect of gravity on its movement.', 'Transitioning to multiple particles forming a firework display. The chapter progresses to transitioning from a single particle to an array of particles, forming a firework display, with the introduction of a firework object, its update and show functions, and the utilization of an array to manage multiple fireworks.']}], 'duration': 418.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI36973.jpg', 'highlights': ['The chapter progresses from a single particle to a firework display', 'The particle constructor function includes properties for position, velocity, and acceleration', 'The concept of force accumulation is implemented through the apply force function', 'The creation of a single particle moving upwards and testing its functionality', 'Addition of gravity to the particle simulation', 'Transitioning to multiple particles forming a firework display']}, {'end': 652.417, 'segs': [{'end': 518.991, 'src': 'embed', 'start': 476.53, 'weight': 0, 'content': [{'end': 481.976, 'text': 'So every frame, there is a 10% chance of making a new firework.', 'start': 476.53, 'duration': 5.446}, {'end': 482.797, 'text': "Let's try that.", 'start': 482.236, 'duration': 0.561}, {'end': 485.497, 'text': "that's a little bit better.", 'start': 484.636, 'duration': 0.861}, {'end': 487.559, 'text': "so it's making them kind of randomly every so often.", 'start': 485.497, 'duration': 2.062}, {'end': 489.161, 'text': "so that's a good start.", 'start': 487.559, 'duration': 1.602}, {'end': 493.866, 'text': 'and now what I also want to do is, you know, I think this should be a random value.', 'start': 489.161, 'duration': 4.705}, {'end': 502.656, 'text': "so let's say random between negative 15 and negative 5, so that way they don't all go home, and so that the range might be off there,", 'start': 493.866, 'duration': 8.79}, {'end': 504.939, 'text': 'we make the range a little bit calmer.', 'start': 502.656, 'duration': 2.283}, {'end': 508.164, 'text': "let's do this.", 'start': 506.923, 'duration': 1.241}, {'end': 509.665, 'text': "so anyway you get the idea that they're not.", 'start': 508.164, 'duration': 1.501}, {'end': 512.386, 'text': "they're also not all going to just go up to exactly the same height.", 'start': 509.665, 'duration': 2.721}, {'end': 513.767, 'text': "so now we're pretty good.", 'start': 512.386, 'duration': 1.381}, {'end': 518.991, 'text': "we've got our system of the fireworks going up over time,", 'start': 513.767, 'duration': 5.224}], 'summary': '10% chance of new firework per frame, random height -15 to -5', 'duration': 42.461, 'max_score': 476.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI476530.jpg'}, {'end': 602.749, 'src': 'embed', 'start': 546.487, 'weight': 2, 'content': [{'end': 548.448, 'text': 'its velocity is negative in the y direction.', 'start': 546.487, 'duration': 1.961}, {'end': 549.648, 'text': "now It's zero now.", 'start': 548.448, 'duration': 1.2}, {'end': 550.309, 'text': "It's positive now.", 'start': 549.688, 'duration': 0.621}, {'end': 554.51, 'text': "It's positive, I want it to explode the moment it reaches that top point.", 'start': 550.349, 'duration': 4.161}, {'end': 565.488, 'text': 'so I can say if this dot firework, dot Velocity is pointing down is greater than or equal to 0..', 'start': 554.51, 'duration': 10.978}, {'end': 568.552, 'text': 'This is the moment where I want it to explode.', 'start': 565.488, 'duration': 3.064}, {'end': 571.515, 'text': "So what I'm actually going to do is I'm going to say this.firework equals null.", 'start': 568.572, 'duration': 2.943}, {'end': 581.974, 'text': "So I'm just going to set the firework to null so that that will make it disappear, essentially.", 'start': 572.608, 'duration': 9.366}, {'end': 587.098, 'text': "And I'm going to have to say if this.firework.", 'start': 582.975, 'duration': 4.123}, {'end': 591.541, 'text': 'So I only want to apply force and update it if it exists.', 'start': 587.398, 'duration': 4.143}, {'end': 595.704, 'text': 'And I also only want to show it if it exists.', 'start': 592.542, 'duration': 3.162}, {'end': 602.749, 'text': "So let's just see, there's lots of other ways I could do this, but this is just going to be a sort of way of me tracking.", 'start': 596.584, 'duration': 6.165}], 'summary': 'Tracking fireworks velocity and exploding at top point.', 'duration': 56.262, 'max_score': 546.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI546487.jpg'}], 'start': 455.144, 'title': 'Firework system optimization and creating firework explosion', 'summary': 'Demonstrates optimizing the firework system by introducing a 10% chance of creating a new firework each frame and adding random vertical movement, while also discussing the process of triggering a firework explosion based on velocity and updating its state.', 'chapters': [{'end': 518.991, 'start': 455.144, 'title': 'Firework system optimization', 'summary': "Demonstrates how to optimize the firework system by introducing a 10% chance of creating a new firework each frame and adding a random value to the firework's vertical movement within a specified range.", 'duration': 63.847, 'highlights': ['Introducing a 10% chance of creating a new firework each frame improves the optimization of the firework system.', "Adding a random value between -15 and -5 to the firework's vertical movement ensures variability and prevents all fireworks from reaching the same height."]}, {'end': 652.417, 'start': 518.991, 'title': 'Creating firework explosion', 'summary': 'Discusses the process of triggering a firework explosion when it reaches the top point, based on the velocity of the firework, and updating its state accordingly.', 'duration': 133.426, 'highlights': ['The firework explosion is triggered when its velocity in the y direction changes from positive to negative.', 'The firework object is set to null to make it disappear upon explosion.', 'An issue with accessing the velocity of the firework object is resolved by placing the relevant code inside a conditional check for its existence.']}], 'duration': 197.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI455144.jpg', 'highlights': ['Introducing a 10% chance of creating a new firework each frame improves the optimization of the firework system.', "Adding a random value between -15 and -5 to the firework's vertical movement ensures variability and prevents all fireworks from reaching the same height.", 'The firework explosion is triggered when its velocity in the y direction changes from positive to negative.', 'The firework object is set to null to make it disappear upon explosion.', 'An issue with accessing the velocity of the firework object is resolved by placing the relevant code inside a conditional check for its existence.']}, {'end': 1039.807, 'segs': [{'end': 681.098, 'src': 'embed', 'start': 652.417, 'weight': 4, 'content': [{'end': 658.741, 'text': "I'm going to say this dot exploded is false as long as Not this dot exploded.", 'start': 652.417, 'duration': 6.324}, {'end': 659.482, 'text': 'fly force.', 'start': 658.741, 'duration': 0.741}, {'end': 670.23, 'text': "if it's, then say this dot exploded equals false, because as long as this, As long as not this dot exploded,", 'start': 659.482, 'duration': 10.748}, {'end': 676.575, 'text': 'I think I would prefer to use a boolean variable If it equals.', 'start': 670.45, 'duration': 6.125}, {'end': 681.098, 'text': "true, so this should be the same exact result, but I'm not doing this sort of null thing, okay,", 'start': 676.575, 'duration': 4.523}], 'summary': "The statement 'this dot exploded' is false as long as 'not this dot exploded'.", 'duration': 28.681, 'max_score': 652.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI652417.jpg'}, {'end': 740.888, 'src': 'embed', 'start': 704.962, 'weight': 0, 'content': [{'end': 705.903, 'text': "Let's make 100 of them.", 'start': 704.962, 'duration': 0.941}, {'end': 711.446, 'text': 'So for var i equals 0, i is less than 100, i plus plus.', 'start': 706.263, 'duration': 5.183}, {'end': 714.008, 'text': 'What I need to do is say var p equals a new particle.', 'start': 711.566, 'duration': 2.442}, {'end': 718.491, 'text': "And where should that particle start? So it's about to explode.", 'start': 714.648, 'duration': 3.843}, {'end': 728.417, 'text': 'Where should that particle start? It should start where? This dot fireworks position dot x, and this dot fireworks dot position dot y.', 'start': 718.511, 'duration': 9.906}, {'end': 731.32, 'text': 'So I need to make a whole lot of these particles.', 'start': 729.659, 'duration': 1.661}, {'end': 732.962, 'text': 'And now I need an array.', 'start': 731.42, 'duration': 1.542}, {'end': 740.888, 'text': 'The firework object, in addition to keeping track of this seed firework, should keep track of this.particles and array.', 'start': 733.002, 'duration': 7.886}], 'summary': 'Creating 100 new particles at fireworks position', 'duration': 35.926, 'max_score': 704.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI704962.jpg'}, {'end': 802.873, 'src': 'embed', 'start': 771.592, 'weight': 3, 'content': [{'end': 773.414, 'text': 'And this has to be this dot particles.', 'start': 771.592, 'duration': 1.822}, {'end': 777.176, 'text': 'And this has to be this dot particles index i dot show.', 'start': 774.915, 'duration': 2.261}, {'end': 784.941, 'text': "So what I've added here is the moment the particle reaches the top, it makes 100 new particles and then draws all those.", 'start': 777.376, 'duration': 7.565}, {'end': 786.242, 'text': "So let's see what this looks like.", 'start': 785.181, 'duration': 1.061}, {'end': 792.309, 'text': 'Oops, cannot read show of undefined FireworkJS index 30.', 'start': 788.188, 'duration': 4.121}, {'end': 799.652, 'text': "Oh, this should be this.particles.length, because I don't want it to show nonexistent particles.", 'start': 792.309, 'duration': 7.343}, {'end': 802.873, 'text': "That array's only going to have 100 as soon as it is exploded.", 'start': 799.852, 'duration': 3.021}], 'summary': 'When the particle reaches the top, it creates 100 new particles and draws them. the array will only have 100 particles once it is exploded.', 'duration': 31.281, 'max_score': 771.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI771592.jpg'}, {'end': 846.052, 'src': 'embed', 'start': 817.02, 'weight': 1, 'content': [{'end': 822.222, 'text': 'I forgot that I also should call here in update.', 'start': 817.02, 'duration': 5.202}, {'end': 829.946, 'text': 'I should also call for all of those particles, apply force gravity.', 'start': 824.403, 'duration': 5.543}, {'end': 833.968, 'text': 'And for all those particles, I have to update them.', 'start': 831.267, 'duration': 2.701}, {'end': 836.389, 'text': 'So I need those particles to experience physics as well.', 'start': 834.028, 'duration': 2.361}, {'end': 840.01, 'text': "Oh, look what's happening.", 'start': 839.09, 'duration': 0.92}, {'end': 846.052, 'text': "It's making those fireworks, but they're all why? What happens when you make a new particle? It shoots straight up.", 'start': 840.33, 'duration': 5.722}], 'summary': 'Particles experiencing physics create fireworks, shooting straight up when new.', 'duration': 29.032, 'max_score': 817.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI817020.jpg'}, {'end': 999.746, 'src': 'embed', 'start': 976.696, 'weight': 2, 'content': [{'end': 986.484, 'text': 'so what if you could figure out if I draw a heart like this from the center vectors pointing out to the edges of a heart?', 'start': 976.696, 'duration': 9.788}, {'end': 990.984, 'text': "so you could actually, or you could use you've got a fireworks that display letters or particular kinds of shapes.", 'start': 986.484, 'duration': 4.5}, {'end': 996.205, 'text': 'so the way that you pick those initial velocities of that explosion can really make hearts, or rainbows,', 'start': 990.984, 'duration': 5.221}, {'end': 999.746, 'text': 'or Unicorns or whatever kind of shapes you can imagine that you might like to make.', 'start': 996.205, 'duration': 3.541}], 'summary': 'Using vectors to create shapes like hearts, rainbows, and unicorns in fireworks.', 'duration': 23.05, 'max_score': 976.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI976696.jpg'}], 'start': 652.417, 'title': 'Creating particle explosions', 'summary': 'Covers creating exploding particles in fireworkjs, generating 100 particles, applying physics for movement, implementing 2d random movement, and customizing initial velocities for creating shapes like hearts, rainbows, and unicorns in a computer vision tutorial.', 'chapters': [{'end': 900.412, 'start': 652.417, 'title': 'Creating exploding particles in fireworkjs', 'summary': 'Explains the process of creating exploding particles in fireworkjs, including using a boolean variable to track explosions, generating 100 particles, and applying physics to the particles for movement.', 'duration': 247.995, 'highlights': ['Using a boolean variable to track when the firework explodes and ensuring it results in the same outcome. The speaker uses a boolean variable to track when the firework explodes, ensuring consistent outcomes.', 'Generating 100 particles and displaying them when the firework explodes. The process involves generating 100 particles and displaying them when the firework explodes.', 'Applying force of gravity and updating the particles to ensure they experience physics and move accordingly. The particles are subjected to the force of gravity and are updated to ensure they experience physics and move accordingly.']}, {'end': 948.358, 'start': 900.452, 'title': 'Implementing 2d random movement', 'summary': 'Demonstrates implementing 2d random movement for particles in a firework object in javascript, allowing them to explode in a perfect circle with the use of boolean variables and undefined values.', 'duration': 47.906, 'highlights': ['The chapter demonstrates implementing 2D random movement for particles in a firework object in JavaScript.', 'Particles are configured to explode in a perfect circle with the use of boolean variables and undefined values.', 'In JavaScript, passing nothing in for a variable will have the value of undefined, which will evaluate to false.']}, {'end': 1039.807, 'start': 948.358, 'title': 'Computer vision tutorial notes', 'summary': 'Discusses customizing initial velocities for explosions to create shapes like hearts, rainbows, and unicorns in a computer vision tutorial, while also addressing the issue of slow running.', 'duration': 91.449, 'highlights': ['Customizing initial velocities for explosions can create shapes like hearts, rainbows, and unicorns, encouraging experimentation (e.g. heart fireworks).', 'Addressing the issue of slow running in the tutorial, indicating a need for optimization.', "Considering keeping track of whether it's the original firework or the particle in the particle object for performing different actions."]}], 'duration': 387.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI652417.jpg', 'highlights': ['Generating 100 particles and displaying them when the firework explodes. The process involves generating 100 particles and displaying them when the firework explodes.', 'Applying force of gravity and updating the particles to ensure they experience physics and move accordingly. The particles are subjected to the force of gravity and are updated to ensure they experience physics and move accordingly.', 'Customizing initial velocities for explosions can create shapes like hearts, rainbows, and unicorns, encouraging experimentation (e.g. heart fireworks).', 'The chapter demonstrates implementing 2D random movement for particles in a firework object in JavaScript.', 'Using a boolean variable to track when the firework explodes and ensuring it results in the same outcome. The speaker uses a boolean variable to track when the firework explodes, ensuring consistent outcomes.']}, {'end': 1645.419, 'segs': [{'end': 1122.132, 'src': 'embed', 'start': 1069.582, 'weight': 0, 'content': [{'end': 1076.464, 'text': 'This dot velocity multiply, oh, random, a random value between one and six.', 'start': 1069.582, 'duration': 6.882}, {'end': 1083.326, 'text': "Okay, so you can see now they're really exploding kind of like wildly.", 'start': 1079.545, 'duration': 3.781}, {'end': 1086.607, 'text': "There's also too many of them, so I can't really see what's going on that well.", 'start': 1083.506, 'duration': 3.101}, {'end': 1090.348, 'text': "So I'm gonna go back to the sketch and make them like quite a bit less often.", 'start': 1086.867, 'duration': 3.481}, {'end': 1094.276, 'text': "Lost power, but I'm back now.", 'start': 1092.515, 'duration': 1.761}, {'end': 1095.877, 'text': 'And where I just was is.', 'start': 1094.436, 'duration': 1.441}, {'end': 1104.742, 'text': "I was saying if this is not one of the seed fireworks particles, if it's not one of the seed firework particles,", 'start': 1095.877, 'duration': 8.865}, {'end': 1114.468, 'text': "let's take its velocity and multiply it by something like 8.85, so that it slows down every frame.", 'start': 1104.742, 'duration': 9.726}, {'end': 1117.25, 'text': 'And you can see that kind of gives it this sort of like burst.', 'start': 1114.948, 'duration': 2.302}, {'end': 1119.151, 'text': 'out that sort of slows down and stops.', 'start': 1117.95, 'duration': 1.201}, {'end': 1122.132, 'text': "Now, there's sort of a funny thing happening where they're still there.", 'start': 1119.191, 'duration': 2.941}], 'summary': 'Adjusting velocity and frequency of particle bursts for better visualization and control.', 'duration': 52.55, 'max_score': 1069.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1069582.jpg'}, {'end': 1399.367, 'src': 'embed', 'start': 1366.985, 'weight': 3, 'content': [{'end': 1374.487, 'text': 'So what I want to do now is add over in the firework object also a function that says this.done.', 'start': 1366.985, 'duration': 7.502}, {'end': 1392.741, 'text': 'And how do I know if that thing is done? Well, it is done if that particle is exploded and this.particles.length equals 0.', 'start': 1376.485, 'duration': 16.256}, {'end': 1399.367, 'text': "The particle system itself is done as long as it's in a state of having exploded and all those particles have faded out.", 'start': 1392.741, 'duration': 6.626}], 'summary': 'Adding a function to the firework object to check if particles are exploded and the particle system is done.', 'duration': 32.382, 'max_score': 1366.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1366985.jpg'}, {'end': 1507.948, 'src': 'heatmap', 'start': 1473.654, 'weight': 4, 'content': [{'end': 1476.437, 'text': 'For example, I could add oops.', 'start': 1473.654, 'duration': 2.783}, {'end': 1479.039, 'text': 'I could add a little bit of alpha to the background,', 'start': 1476.837, 'duration': 2.202}, {'end': 1485.365, 'text': "meaning have the background Transition into and we'll have each firework draw a little bit of trail.", 'start': 1479.039, 'duration': 6.326}, {'end': 1487.787, 'text': "Let's see how this looks right.", 'start': 1485.365, 'duration': 2.422}, {'end': 1490.189, 'text': 'that has a little bit more firework like quality to it.', 'start': 1487.787, 'duration': 2.402}, {'end': 1491.33, 'text': "That's nice.", 'start': 1490.769, 'duration': 0.561}, {'end': 1503.087, 'text': 'then of course I could say, well, let me give it a color mode and of HSB and I could say for each firework,', 'start': 1491.33, 'duration': 11.757}, {'end': 1507.948, 'text': "let's for each firework system is going to get its own color.", 'start': 1503.087, 'duration': 4.861}], 'summary': 'Adding alpha to background and trails for each firework system with hsb color mode.', 'duration': 28.909, 'max_score': 1473.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1473654.jpg'}, {'end': 1610.612, 'src': 'embed', 'start': 1579.795, 'weight': 5, 'content': [{'end': 1583.457, 'text': "It's because I changed it to use the color mode to HSB.", 'start': 1579.795, 'duration': 3.662}, {'end': 1586.98, 'text': 'And the background is now doing something weird.', 'start': 1584.718, 'duration': 2.262}, {'end': 1590.082, 'text': 'So this should fix that, I think.', 'start': 1587.06, 'duration': 3.022}, {'end': 1594.744, 'text': 'Whoops Look at that.', 'start': 1590.582, 'duration': 4.162}, {'end': 1597.686, 'text': "I wonder if this is a bug in p5.js that we've just found.", 'start': 1595.004, 'duration': 2.682}, {'end': 1602.108, 'text': "Well, I'm going to do something here, which might make things run quite a bit slow.", 'start': 1597.966, 'duration': 4.142}, {'end': 1605.029, 'text': "But I'm going to just change the color mode to RGB here.", 'start': 1602.588, 'duration': 2.441}, {'end': 1610.612, 'text': "And in each particle, right before the particle is drawn, I'm going to change the color mode to HSB.", 'start': 1605.59, 'duration': 5.022}], 'summary': 'Experimented with color modes in p5.js, may have found a bug, considering performance impact.', 'duration': 30.817, 'max_score': 1579.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1579795.jpg'}], 'start': 1040.007, 'title': 'Simulating and optimizing particle systems', 'summary': 'Presents simulating fireworks through adjusting code variables, while optimizing a particle system in javascript, resulting in visually appealing displays and improved performance.', 'chapters': [{'end': 1224.912, 'start': 1040.007, 'title': 'Fireworks particle simulation', 'summary': 'Presents the process of simulating fireworks using code, adjusting variables such as velocity and lifespan, and visual enhancements, aiming to create a realistic and visually appealing fireworks display.', 'duration': 184.905, 'highlights': ['Adjusting velocity by multiplying a random value between 1 and 6 to create exploding effect The velocity of the particles is scaled by a random value between 1 and 6, resulting in an explosive effect.', 'Decelerating non-seed firework particles by multiplying their velocity by 8.85 to create a burst effect Non-seed firework particles are slowed down by multiplying their velocity by 8.85, creating a burst effect.', 'Implementing a fading effect by decreasing the lifespan of non-seed firework particles The lifespan of non-seed firework particles is reduced by four each frame, creating a fading effect for the fireworks.']}, {'end': 1645.419, 'start': 1224.912, 'title': 'Optimizing particle system in javascript', 'summary': 'Discusses optimizing a particle system in javascript, including looping through particles, deleting particles based on condition, and implementing color and alpha transitions, resulting in improved performance and visual quality.', 'duration': 420.507, 'highlights': ["The system's performance is optimized by looping through particles in reverse order, deleting particles that meet a condition, and ensuring the system is in a state of having exploded and all particles have faded out.", "Implementing color transitions and alpha values to the background and particles improves visual quality and creates a 'firework-like' effect.", 'Changing the color mode to RGB and then to HSB resolves a potential bug in p5.js and enables the alpha functionality in the HSB color mode, enhancing the visual output.']}], 'duration': 605.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1040007.jpg', 'highlights': ['The velocity of the particles is scaled by a random value between 1 and 6, resulting in an explosive effect.', 'Non-seed firework particles are slowed down by multiplying their velocity by 8.85, creating a burst effect.', 'The lifespan of non-seed firework particles is reduced by four each frame, creating a fading effect for the fireworks.', "The system's performance is optimized by looping through particles in reverse order, deleting particles that meet a condition, and ensuring the system is in a state of having exploded and all particles have faded out.", "Implementing color transitions and alpha values to the background and particles improves visual quality and creates a 'firework-like' effect.", 'Changing the color mode to RGB and then to HSB resolves a potential bug in p5.js and enables the alpha functionality in the HSB color mode, enhancing the visual output.']}, {'end': 2073.772, 'segs': [{'end': 1682.021, 'src': 'embed', 'start': 1645.459, 'weight': 0, 'content': [{'end': 1649.501, 'text': 'I could use something called additive blending to make things appear more glow-like.', 'start': 1645.459, 'duration': 4.042}, {'end': 1653.823, 'text': "But you can see here, here's the basic idea.", 'start': 1649.921, 'duration': 3.902}, {'end': 1657.805, 'text': 'So I encourage you to take my JavaScript code and make some improvements on it.', 'start': 1654.003, 'duration': 3.802}, {'end': 1667.01, 'text': "And I want to make a 3D WebGL version of this, but before I'm ready to do that, this kind of concludes this video, but I'm just going to keep going.", 'start': 1658.306, 'duration': 8.704}, {'end': 1669.993, 'text': "I'm going to go back to my processing one.", 'start': 1667.63, 'duration': 2.363}, {'end': 1670.954, 'text': "I'm going to close this.", 'start': 1670.053, 'duration': 0.901}, {'end': 1682.021, 'text': "I'm going to go back to my processing sketch, which is basically 100% exactly the same code that I just wrote, But it is,", 'start': 1671.755, 'duration': 10.266}], 'summary': 'The transcript discusses using additive blending to create a glow effect and hints at creating a 3d webgl version in the future.', 'duration': 36.562, 'max_score': 1645.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1645459.jpg'}, {'end': 1816.545, 'src': 'embed', 'start': 1785.967, 'weight': 1, 'content': [{'end': 1789.328, 'text': "Now, can you see anything different here? I'm not so sure you can.", 'start': 1785.967, 'duration': 3.361}, {'end': 1793.23, 'text': 'But technically speaking, it should be a random 3D vector.', 'start': 1790.028, 'duration': 3.202}, {'end': 1797.911, 'text': "Let's see if we can now actually start to rotate the scene to see if this really works.", 'start': 1793.53, 'duration': 4.381}, {'end': 1811.336, 'text': "So I'm going to add, I'm going to import a library called PZCam, which I've been doing, which I can now say I can add a PZCam object.", 'start': 1798.351, 'duration': 12.985}, {'end': 1816.545, 'text': 'And I can say a cam equals new PZCam this.', 'start': 1813.103, 'duration': 3.442}], 'summary': 'Demonstrating the use of pzcam library to create a random 3d vector and rotate the scene.', 'duration': 30.578, 'max_score': 1785.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1785967.jpg'}, {'end': 1905.783, 'src': 'embed', 'start': 1877.464, 'weight': 3, 'content': [{'end': 1879.185, 'text': "Can you see, I'm looking at it from above.", 'start': 1877.464, 'duration': 1.721}, {'end': 1886.734, 'text': 'now I, Yeah, so you can see, I need to make a lot more of these to be able to see this more easily.', 'start': 1879.185, 'duration': 7.549}, {'end': 1887.454, 'text': "Let's add,", 'start': 1886.734, 'duration': 0.72}, {'end': 1900.9, 'text': "let's have a lot more being added And let's also make the stroke weight of these particles much bigger and Let's have their lifespan last a little bit longer.", 'start': 1887.454, 'duration': 13.446}, {'end': 1905.783, 'text': "And let's run this.", 'start': 1900.9, 'duration': 4.883}], 'summary': 'Adjustments made to increase visibility: added more particles, increased stroke weight, and extended lifespan.', 'duration': 28.319, 'max_score': 1877.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1877464.jpg'}, {'end': 2050.444, 'src': 'embed', 'start': 2001.816, 'weight': 2, 'content': [{'end': 2006.999, 'text': "yeah, ok, now you can see I've got 3d fireworks.", 'start': 2001.816, 'duration': 5.183}, {'end': 2013.023, 'text': 'so and then you can see that I could probably do something where I have them burst out quite a bit more and I now have upside down.', 'start': 2006.999, 'duration': 6.024}, {'end': 2015.369, 'text': 'So anyway you get the idea.', 'start': 2014.229, 'duration': 1.14}, {'end': 2016.55, 'text': 'You can play with this more.', 'start': 2015.549, 'duration': 1.001}, {'end': 2017.59, 'text': 'So I encourage you.', 'start': 2016.61, 'duration': 0.98}, {'end': 2022.371, 'text': "I'm going to post in the description of this video the processing code.", 'start': 2018.55, 'duration': 3.821}, {'end': 2028.693, 'text': "I'm going to clean this up a little bit, the processing code for the 3D fireworks, as well as the browser JavaScript code.", 'start': 2022.391, 'duration': 6.302}, {'end': 2031.574, 'text': 'I need to get rid of the full screen thing.', 'start': 2028.713, 'duration': 2.861}, {'end': 2032.654, 'text': 'It has to stop.', 'start': 2031.614, 'duration': 1.04}, {'end': 2038.236, 'text': 'Stop As well as the.', 'start': 2033.134, 'duration': 5.102}, {'end': 2039.536, 'text': 'I lost everything.', 'start': 2038.236, 'duration': 1.3}, {'end': 2040.696, 'text': 'Ah! Come on.', 'start': 2039.696, 'duration': 1}, {'end': 2042.077, 'text': 'No Come back.', 'start': 2041.037, 'duration': 1.04}, {'end': 2045.08, 'text': 'Fireworks, fireworks, fireworks.', 'start': 2043.839, 'duration': 1.241}, {'end': 2050.444, 'text': 'Somebody see a fireworks P5? As well as this code, the JavaScript version of the 2D fireworks.', 'start': 2045.16, 'duration': 5.284}], 'summary': 'The transcript discusses creating 3d and 2d fireworks with processing and javascript.', 'duration': 48.628, 'max_score': 2001.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI2001816.jpg'}], 'start': 1645.459, 'title': '3d webgl programming and fireworks simulation', 'summary': 'Covers implementing 3d webgl programming in javascript with p3d and pzcam, including creating a 3d environment and manipulating scenes, alongside creating a 3d fireworks simulation from scratch using processing, adjusting parameters for the desired effect, and encouraging experimentation and sharing of variations.', 'chapters': [{'end': 1877.464, 'start': 1645.459, 'title': '3d webgl programming in javascript', 'summary': 'Explores implementing 3d webgl programming using javascript, demonstrating the use of p3d and pzcam to create a 3d environment and manipulate scenes, with a mention of potential improvements and the desire to create a full-screen application.', 'duration': 232.005, 'highlights': ['The chapter explores implementing 3D WebGL programming using JavaScript. The speaker discusses the use of additive blending and demonstrates the basic idea of 3D WebGL programming.', 'Demonstrating the use of P3D and PZCam to create a 3D environment and manipulate scenes. The speaker showcases the process of utilizing P3D and PZCam to create a 3D environment and manipulate scenes, emphasizing the use of translate to add a z-axis and the creation of random 3D vectors.', 'Mention of potential improvements and the desire to create a full-screen application. The speaker encourages making improvements on the JavaScript code and expresses a desire to create a full-screen application, highlighting the potential for speed optimization in a desktop environment.']}, {'end': 2073.772, 'start': 1877.464, 'title': 'Creating 3d fireworks simulation', 'summary': 'Explores the process of creating a 3d fireworks simulation from scratch using processing, adjusting parameters such as particle quantity, stroke weight, lifespan, and initial random velocity to achieve the desired 3d effect, and encourages viewers to experiment and share their creative variations.', 'duration': 196.308, 'highlights': ['Adjusting parameters such as particle quantity, stroke weight, lifespan, and initial random velocity to achieve the desired 3D effect The speaker discusses the need to make a lot more particles, increase stroke weight, extend particle lifespan, and enhance initial random velocity to create a more visually appealing 3D effect.', 'Encouraging viewers to experiment and share their creative variations The speaker urges viewers to play with the code, add angles, and think of different ways to create a unique take on the fireworks simulation, emphasizing the importance of sharing their creations on various platforms.', 'Sharing the processing code for the 3D fireworks and the browser JavaScript code for the 2D fireworks simulation The speaker plans to share the processing code for the 3D fireworks and the browser JavaScript code for the 2D fireworks simulation, inviting viewers to utilize and modify the code to create their own visual interpretations.']}], 'duration': 428.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CKeyIbT3vXI/pics/CKeyIbT3vXI1645459.jpg', 'highlights': ['Covers implementing 3D WebGL programming using JavaScript and additive blending.', 'Demonstrates using P3D and PZCam to create a 3D environment and manipulate scenes.', 'Encourages experimentation and sharing of variations in the 3D fireworks simulation.', 'Adjusting parameters such as particle quantity, stroke weight, lifespan, and initial random velocity for the desired 3D effect.', 'Sharing the processing code for the 3D fireworks and the browser JavaScript code for the 2D fireworks simulation.']}], 'highlights': ['The presenter is conducting a coding challenge to program a fireworks simulation from scratch in JavaScript, with plans to eventually convert it into a 3D version.', 'Covers implementing 3D WebGL programming using JavaScript and additive blending.', 'The chapter progresses from a single particle to a firework display', 'Introducing a 10% chance of creating a new firework each frame improves the optimization of the firework system.', 'The velocity of the particles is scaled by a random value between 1 and 6, resulting in an explosive effect.', "The system's performance is optimized by looping through particles in reverse order, deleting particles that meet a condition, and ensuring the system is in a state of having exploded and all particles have faded out."]}