Coding Challenge #27: Fireworks!

Подписаться 1,7 млн

Просмотров 323 тыс.

50% 1

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: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #26: ...
🎥 Next video: • Coding Challenge #28: ...
🎥 All videos: • Coding Challenges
References:
🎇 PixelPyros: seb.ly/work/pixelpyros/
🎥 PeasyCam Website: mrfeinberg.com/peasycam/
Videos:
🔴 Livestream Archive: • Coding Train Live Stre...
Related Coding Challenges:
🚂 #78 Simple Particle System: • Coding Challenge #78: ...
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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#fireworks #natureofcode #oop #3d #forces #gravity #particlesystems #javascript #p5js #processing

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 340

@Holobrine 5 лет назад

7:21 Origin of “this dot” song.

@kluplau 5 лет назад

Holobrine Heard "Somebody compose this" and went to the comments to find out if this was the origin.

@piotrdanisz148 4 года назад

De Staat :D

@gabrielaltwarg-peel7057 4 года назад

So cool

@lelepao 4 года назад

new drinking game: oneThisDot() {Return OneShot}

@2001herne 4 года назад

@@lelepao Personal opinion for a better function name: onThisDot() { return oneShot}. Makes it seem a little more like an event handler.

@azvio8823 8 лет назад

Is it just me or is watching someone really good at coding really satisfying?

@joshuaadriaanse699 7 лет назад

Azvio you're not alone bro. I love watching these videos

@marionikolov7798 6 лет назад

Azvio yeah, it makes me feel like I know programming

@PumpiPie 6 лет назад

i get depressed sins i am never going to get that good xD

@EclipseKing52k 6 лет назад

It's satisfying but am like god can ever get this good and how can I get this good.

@panunurmilaukas5519 5 лет назад

He is actually quite bad.. I cant watch these videos without cringing.

@listen4159 7 лет назад

I've always thought coding was cool, then this popped up into my news feed. This is now my 4th video ( my first was the rain one and the second one was the invaders one). I love your enthusiasm! Great videos ! keep it up!

@TheCodingTrain 7 лет назад

+Kalani Schofield thanks for watching!

@gabrielaltwarg-peel7057 4 года назад

Wow this channel is amazing. So fun to watch, very therapeutic and helps a lot with my own projects. Dan deserves all the thanks he gets and more for all of the inspiration. Thank you from us all!!!

@jorgeramos637 7 лет назад

im NOWHERE near being this good at coding. Lately ive lost my learning momentum. This video just pumped me 110% to keep going. Thank you so much!

@toastom 5 лет назад

I'm definitely there with you

@tushargoyal8262 5 лет назад

what a great challenge! learnt so many new things, class which is an object of another class. thanks Dan!

@Wirelesstaco 8 лет назад

Woo, Challenge complete! I'm challenging myself to do these challenges with you. I've been skirting around creative coding for years now and I'm finally digging in. Thank you for all of your content , enthusiasm and love for this work.

@TheCodingTrain 8 лет назад

Thanks for watching! Share what you make!

@MagnoVJ10 7 лет назад

The heart curve in function of "i" if someone is interested var x = 16 * pow(sin(i), 3); var y = 13 * cos(i) - 5 * cos(2 * i) - 2 * cos(3 * i) - cos(4 * i); Don't forget to invert "y" as "-y" once the y coordinate used in p5 is inverted in relation of what we use in math.

@utsavshrestha9725 7 лет назад

would you please elaborate a little, where am I supposed to put that code? :D

@MagnoVJ10 7 лет назад

+Utsav Shrestha In this.explode function in Fireworks.js, when you pushing the 100 particles into this.particles. "i" is in the "for" that goes from 0 to 99 and then you use"i" in the equations and generate the x and y positions for each one of the particles. At least that's the best way I found for doing this. You can find your own. But the equations for x and y remain the same.

@kevinfox2413 6 лет назад

You would need to convert those to angles as it goes through the i values.

@Night4Blade 6 лет назад

MagnoVJ10 щ

@ethanjensen661 6 лет назад

Utsav Shrestha those go in the vector!

@CosteaMelniciuc 7 лет назад

I am so inspired and amazed on how you're doing things! I really love your work. Btw subbed just a few days ago! Thank you very very much!

@ElBellacko1 2 года назад

Great lesson. I love video. Many of the concepts with vectors that you teach, you demonstrated in this video, which re-enforced me learning it.

@TheCodingTrain 2 года назад

Glad it was helpful!

@jjcya7607 7 лет назад

Love the video! Managed to recreate this in Python using PyGame without too much trouble. Keep it up!

@joesharp3580 6 лет назад

Love this one, fireworks was the first thing I tried myself when I discovered p5

@m65917 7 лет назад

Great video ! I love the final version (3D). Might be interesting to get interested in "how to make particles (the rocket flying up) coming from random position, not only from 'the floor' " (you can see that all particles are flying up in the same direction) Great work. Subscribed (youtube and github)

@modiddymo 7 лет назад

This has become my new favourite RU-vid channel

@J12NBANews 4 года назад

This is why I fell in love with coding! But still a beginner at JavaScript!

@aniketmehendale 7 лет назад

I am binging all of these. Oddly satisfying category for me😛.

@KhanhTheLearner 6 лет назад

I came here from the this dot song O.o and now I'm learning how to code!!! Coding is contagious... I love it!

@notuntrue8569 7 лет назад

14:00 and that's how you make the matrix

@yayaskurt 7 лет назад

Dude! You are awesome! I like all your vids!

@rtpHarry 7 лет назад

Daniel you are using your powers for evil! Every time you name a variable badly and ignore best practices I feel myself becoming a slightly worse programmer, but you are just so entertaining I keep coming back for more! :) You should have split this up into more objects rather than creating the spaghetti code in this lesson.

@realcygnus 7 лет назад

superb as per usual

@richardj.rustleshyman2026 8 лет назад

Damn, I love this series

@IronHeel 6 лет назад

Another great tutorial! I slowed Dan down to 0.75x and found it a little easier to follow along.

@nsk8ter524 7 лет назад

gonna do this, this week, thanks! happy 4th

@2mbst1 8 лет назад

When you write "if(statement) {return true} else {return false};" you should rather write "return statement", boom ~4 lines saved.

@TheCodingTrain 8 лет назад

yes, yes good point!

@nicolasmaniotto368 7 лет назад

He could have written "return this.lifespan < 0;" at 22:05, right?

@2mbst1 7 лет назад

Correct!

@tonkamanage5799 6 лет назад

What root directory are you using?

@sebastianmestre8971 6 лет назад

Another cool tip: If (statement){ return expression1}else{return expression2} Can be replaced with return statement ? Expression1 : expression2

@falicer 6 лет назад

Had to make this for school and this helped me a lot! Subbed and I will try to remake all you challenges (be patient I started like 1-2 weeks ago with this)

@TheCodingTrain 6 лет назад

take your time!

@matija92 8 лет назад

your videos are amazing man! keep up the great work :)

@TheCodingTrain 8 лет назад

Thank you!

@eemelilehtonen8628 7 лет назад

looks like you like coding, singing and dancing. i like coding, running and cubing

@simonmaracine4721 5 лет назад

Cubing? Yayy. Cool.

@lopamudraghosh7475 4 года назад

Another reason the JS version is slow could be because every particle and firework system has its own copy of show and update functions. Those can just be attached to the prototype chain instead.

@tvk270 7 лет назад

I love these vids

@alhdlakhfdqw 7 лет назад

Great vids Thank u so much!! :)

@endofmysteries 8 лет назад

this is awesomeeee!! thanks Daniel son!

@LeRouxBel 8 лет назад

First of all, thanks to all the ones making This Dot songs. They are fantastic. I also wanted to recommend a new challenge to you Daniel. I worked out a "zoom out" system for a 2D representation of the solar system. Here is the source code : tinyurl.com/hvk5ld8 Now I just thought, how about doing an "infinite" Fibonacci sequencer using that zoom system. As the spiral progresses, you simply scale things down to fit the screen, giving the impression of zooming out. Hope you find this interesting.

@TheCodingTrain 8 лет назад

cool ideas! suggest here: github.com/CodingRainbow/Rainbow-Topics/issues

@lorenzoraschi8877 7 лет назад

GENIUS

@Tea-Spin 6 лет назад

cool, gonna try to make this on my own for new year celebration.lol

@kenan2386 3 года назад

I've learned to use p5.js thanks to you

@Xfacta12482 7 лет назад

OMG I stumbled across the video with the birth of the this dot song

@mohammedjafaraqiq2119 6 лет назад

You are so talented..

@Reyfild 7 лет назад

very nice job !

@vincentcleaver1925 5 лет назад

I'm going to try heart shaped fireworks for my New Years Eve fireworks animation

@pdsmart 3 года назад

WOW! Javascript has come a LONG way in 4 years. I vaguely remember setting up objects like this. Now it's so much closer to C# or Java. yay! 🎉

@FJProject 7 лет назад

There is not a bug with colorMode(HSB) ! As in p5 reference says: By default, this is colorMode(HSB, 360, 100, 100, 1). So the alpha values must be between 0 and 1 or set the range explicitly.

@friendlytrader4812 5 лет назад

Thank you I know someone will have an answer 🙏

@user-fr5rt7wc9t 5 лет назад

this dot~ this dot~ this dot~~ i'll never forget this.

@mauriciopereyra3339 8 лет назад

that was so fun

@TheCodingTrain 8 лет назад

Thank you for watching!

@huongpham3580 5 лет назад

helpful video!

@dnetne5508 6 лет назад

Please do python I watch you over a year and some videos twice love it . Because of you processing seems easier than easiest language to learn-python..

@mtbtechfilms1215 6 лет назад

HSB alpha values are from 0 to 1 instead of the 0 to 255 that RGB uses.

@koinos_bacon 7 лет назад

Dude, your like-dislike ratio is insane. Just thought i'd mention. Keep it up, love what you do.

@kevinfox2413 6 лет назад

I changed the lifespan countdown from "-4" to "random(-1, 10)" and it makes them fade away much more naturally.

@alext1686 5 лет назад

thanks for the idea :)

@Kitulous 5 лет назад

so you've made that there's a chance for particle to slightly light up instead of fading out?

@bs_blackscout 6 лет назад

this.pos.x * this.pos.y % 256 in HSB mode looks really nice

@manavbajaj218 6 лет назад

Bruh u are awesome I want to be like u in programing.

@huyvole9724 5 лет назад

It's good for health !!!! I will try convert it to C++

@aryan_karim 5 лет назад

BEST TUTOR EVERRRRRRRRRRRRRRRRRRRRR THISDOT LOL

@6754bettkitty 4 года назад

The HSB thing is not a bug. It does not make sense for an HSB value to have an alpha, since the brightness would take care of that. With RGB, it makes sense to have the alpha.

@mishuptm 7 лет назад

Yay, finally found the original this dot!

@TheCodingTrain 7 лет назад

@matrixgeg Месяц назад

nice

@circuitguru4554 3 года назад

Hi! So how would I code it to explode where my mouse is when I click it (no seed particles)?

7 лет назад

How to make the trailing effect in processing for 3D?

@nosuchthing8 4 года назад

Hey, you rock everyone's kasbah. How about the batman equation..

@bhuwansharmaa 2 года назад

it should be 0-1 range for the trail to work

@MiloItz 7 лет назад

Is there a way to transform it into a screen saver? Awesome video man!

@HarryBallsOnYa345 5 лет назад

The animation reminds me of the Happy99 worm featured on danooct1's channel

@Patryk-Smith 7 лет назад

Is there a 3D webcam interface like the PeasyCam library that is used in p5.js?

@avidcoder3901 6 лет назад

Patryk Smith i know i am late but you can look on the p5.js refrence. Im sure it does because processing and p5 are like twins

@m.justinbueno 5 лет назад

can someone tell me the where I can find the files in order to complete the project because I have an error code saying im missing the indexes?? and is there another way or language i can use to make this sound responsive

@nitzan3984 8 лет назад

Yesterday I've found out about your channel, insta-sub! Your videos are amazing, keep the good work going. 3>.

@TheCodingTrain 8 лет назад

+Nitzan thank you!

@alext1686 5 лет назад

how do you get the trail effect to work in processing, it just stays the same color?

@dominicrann6699 5 лет назад

So this is where the this . Song came from!!

@thelavagod 4 года назад

i love how Atom editor has that hack code xD

@likeyou3317 5 лет назад

Ohh so thats how u make a faded line in p5, just write background(0,40), and I tried to implement it with array of cricles following a moving point fading and decreasing the radius as time passess.. I wonder how they implemented with such great optimalization. 50 fading long lines and my pc would freeze :o

@matthiaswei5145 7 лет назад

Nice channel, I've watched a few videos now and enjoyed all of them. What color scheme do you use in this video?

@hachiman9950 8 лет назад

Just subbed

@TheCodingTrain 8 лет назад

thank you!

@som3d3wd 6 лет назад

Hi, Really inspiring videos! I have an issue when trying to run this code in p5.js - all of the particles appear black regardless of what is inside stroke() any help is greatly appreciated

@maybit9091 7 лет назад

I have a question! What, if ever, would p5js be used for in an actual website and how often would it be used?

@obiwac 6 лет назад

great video, but id like to point out 3 things: 1. why did you not just reset colour mode to hsb after background()? 2. i think you screwed up your alpha for the particles, as they only fade away after the particle dies 3. return ; not if () return true; else return false;

@olasoderlind5685 7 лет назад

make a fysic class/object ( you colud at angel and speed as driectoin instad for speedx and speedy if you make random x,y in all direction you culd end up whit 0,0 but not if you use rnd angel , and put speed at 1 .. ) i tryed ones to make objects move whit only angels and speed in java but there whass a bug wheere obj waned to stik to x=0 and y=0 and the corner baunsing what hard to fither out i dit not useing canvise or matrix translation

@MathRTD 7 лет назад

Using that boolean exploded insted of using null doesn't cause a lot of memory leak?

@edwinstam2603 2 года назад

i've set the x velocity to Math.random() * 2 - 1 so they don't go in a straigt line

@Ash-td4sx 4 года назад

U code like its just another task to do... Great man... I've never seen that level of mastery in coding and yet that humble ❤ Me too a programmer btw, any tips for me to achieve that fluency in it?

@Ash-td4sx 4 года назад

Btw love from india ❤

@9006Derrick 8 лет назад

nice video

@TheCodingTrain 8 лет назад

Thanks for watching!

@halvorhansen 7 лет назад

your rainbow background has the colours the wrong way around haha

@juliandominguez4308 5 лет назад

I NEVER NEW THAT THIS LANGUAGE WAS THIS POPULAR!

@bennievaneeden2720 5 лет назад

can someone please explain to me why he is adding the force to the accelaration...? did he not just say the formula is F=m*a => F=a

@chlorisR 2 года назад

💎

@isen1 Год назад

24:35 why makes adding alpha to background a trail on the particle?

@FLooper 8 лет назад

Hey Daniel! You wanted a new song? Here it is: soundcloud.com/fl00per/this-dot :D

@KristianPedersen 8 лет назад

Haha, nice! I made a playlist for Coding Rainbow remixes: soundcloud.com/kristianpedersen/sets/coding-rainbow-remixes

@TheCodingTrain 8 лет назад

If I didn't say it before thank you again, I love these!

@nahueljo 7 лет назад

OHHH So this is where it came from! hahaha

@IBWatchinUrVids 7 лет назад

That was one of the strangest two minutes of my life. I liked it.

@WarpedSpectrumMusic 3 года назад

What if all the new explosions made more explosions as an infinite loop?

@jackiexu2840 6 лет назад

Can I ask a question? If I wanna show a letter, what am I supposed to make it? I've no idea which part should I change? Thanks

@tzisorey 7 лет назад

Ahh, so that's where the This-Dot song came from.

@ncot_tech 3 года назад

I'm glad this type of JavaScript was soon replaced by actual classes. Now, if they could fix the whole "this." nonsense everywhere, it'd be great.

@tomato7443 5 лет назад

Hey can you make a processing version of this?

@sikseike8701 4 года назад

I cant use this code because «Firework» wich is only used once in this code is undefined? PLEASE ANSWER!

@jasminedeath1767 7 лет назад

that looked like shooting stars.

@cassandradawn780 5 лет назад

Jasmine Death 9:07

@fodorbarnabas6983 6 лет назад

In this video your voice reminds me the hungarian dub voice of Zach Galifianakis.

@siddharthjoshi7779 3 года назад

Can anyone please help me about how can I create shape of letters during the explosion???

@eotikurac 8 лет назад

wow none of this worked until i got to about 7:30. couldn't get the canvas to show on the screen and i had no errors :S why is fireworks not fading out after explosion?

@amberjohnson6027 2 года назад

I dont understand how he got to the stage before he starts coding where the library is imported and he can somehow see the code running on localhost, can someone help? I cant find anything online

@SugarFreeKill 5 лет назад

I know this video is about 3 years old at this point, but if you set the color mode to be colorMode(HSB, 255); the hue property works without having to change any other of the code in the video :)

@knodelcrafter6888 8 лет назад

Supershape fireworks would ve interesting

@TheCodingTrain 8 лет назад

indeed!

@tyeouellette6363 7 лет назад

The Coding Train How long have you been coding

@sadhlife 6 лет назад

Tye Ouellette he teaches ITP in NYU :)

@doa8831 5 лет назад

what is tie hu variable, for what is it used at 25:11?

@joshuabarr5427 7 лет назад

When creating " this.update = function()" the word update turns blue for me and the same for the "this.show" function. I think this is an issue as for the particle does not show in browser. One other difference i noticed between his code and mine is in the "this.show" function the position related to x "this.pos.x" the x stays red and does not turn yellow like his. Am I not loading something or is there a missing library? It creates the canvas with no issues.

@TheCodingTrain 7 лет назад

Syntax highlighting really depends on the editor you are using, I would suggest asking this at forum.processing.org in the p5.js category for discussion!