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.
+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.
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!
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.
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.
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.
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!!!
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.
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)
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.
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.
26:32 I think it's not a bug... by default the max values for HSB color mode are: color(360, 100, 100, 1), so the alpha goes from 0 to 1 (and btw: also you gave this.hu a random value of random(255) where it should be random(360)... and yes, i know, i am a year late commenting on this)
You *can* actually forget the this dot if you use factory functions. Just look at this beautiful blob maker, free from any this dots: function Blob(x, y, r) { const otherVar = `Normally, I'd have to say "this.otherVar" :)`; return { update: function () { x += random(-.5, .5); }, display: function () { ellipse(x, y, r); }, otherVar } } const blobs = []; function setup() { createCanvas(600, 400); // "each" is a global unused variable, but who cares? :) for (each of Array(100)) { let x = random(width); let y = random(height); let r = random(10); blobs.push(Blob(x, y, r)); } console.log(blobs[0].otherVar) } function draw() { background(0); for (const b of blobs) { b.update(); b.display(); } }
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)
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;
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..
Wasn't each particle supposed to fire off 100 new particles when its velocity becomes positive? From the point you created that part of the code to the end of the video, all I did was to wait for the moment when each particle fire off 100 new particles then each of those 100 new particles fire 100 each then it goes on and your browser crashes! Maybe, you checked if the particle was created from the original particle and do not need to fire off 100 more but, forgot to show? By the way, it's been 2 days and I am really appreciating this concept of programming through doing things graphically! Good work, man.
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
Though i know that's its too late to comment,but after you have changed the color mode in the show function of particle class , the dull down effect of the particle has gone. The alpha value in HSB mode varies from 0-1.So you dont need to change the colorMode.
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
I think is because usually background is what clears the screen every frame by drawing a new background, if that background is transparent every frame a new background is drawn in top, which allows you to see the oldest frames, but every new frame makes the oldest backgrounds more opaque until after a certain amount of frames you do not see the firework past position anymore, which creates the illusion of a trail, I think that's how it works I hope I explained myself clearly
7:21 Origin of “this dot” song.
Holobrine Heard "Somebody compose this" and went to the comments to find out if this was the origin.
De Staat :D
So cool
new drinking game: oneThisDot() {Return OneShot}
@@lelepao Personal opinion for a better function name: onThisDot() { return oneShot}.
Makes it seem a little more like an event handler.
Is it just me or is watching someone really good at coding really satisfying?
Azvio you're not alone bro. I love watching these videos
Azvio yeah, it makes me feel like I know programming
i get depressed sins i am never going to get that good xD
It's satisfying but am like god can ever get this good and how can I get this good.
He is actually quite bad.. I cant watch these videos without cringing.
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.
would you please elaborate a little, where am I supposed to put that code? :D
+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.
You would need to convert those to angles as it goes through the i values.
MagnoVJ10 щ
Utsav Shrestha those go in the vector!
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!
I'm definitely there with you
I am binging all of these. Oddly satisfying category for me😛.
When you write "if(statement) {return true} else {return false};" you should rather write "return statement", boom ~4 lines saved.
yes, yes good point!
He could have written "return this.lifespan < 0;" at 22:05, right?
Correct!
What root directory are you using?
Another cool tip:
If (statement){ return expression1}else{return expression2}
Can be replaced with
return statement ? Expression1 : expression2
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!
+Kalani Schofield thanks for watching!
14:00 and that's how you make the matrix
OMG I stumbled across the video with the birth of the this dot song
Love this one, fireworks was the first thing I tried myself when I discovered p5
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.
Thank you I know someone will have an answer 🙏
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.
Thanks for watching! Share what you make!
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.
Love the video! Managed to recreate this in Python using PyGame without too much trouble. Keep it up!
This has become my new favourite UA-cam channel
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!!!
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.
This is why I fell in love with coding! But still a beginner at JavaScript!
looks like you like coding, singing and dancing. i like coding, running and cubing
Cubing? Yayy. Cool.
what a great challenge! learnt so many new things, class which is an object of another class. thanks Dan!
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.
Glad it was helpful!
I came here from the this dot song O.o and now I'm learning how to code!!! Coding is contagious...
I love it!
this dot~ this dot~ this dot~~ i'll never forget this.
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!
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)
Another great tutorial! I slowed Dan down to 0.75x and found it a little easier to follow along.
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.
cool ideas! suggest here: github.com/CodingRainbow/Rainbow-Topics/issues
I changed the lifespan countdown from "-4" to "random(-1, 10)" and it makes them fade away much more naturally.
thanks for the idea :)
so you've made that there's a chance for particle to slightly light up instead of fading out?
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.
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.
26:32 I think it's not a bug... by default the max values for HSB color mode are: color(360, 100, 100, 1), so the alpha goes from 0 to 1 (and btw: also you gave this.hu a random value of random(255) where it should be random(360)... and yes, i know, i am a year late commenting on this)
That's right. You need to set
colorMode(HSB, 255, 255, 255, 255); instread of colorMode(HSB) inside setup function to work as the range he used.
You *can* actually forget the this dot if you use factory functions.
Just look at this beautiful blob maker, free from any this dots:
function Blob(x, y, r) {
const otherVar = `Normally, I'd have to say "this.otherVar" :)`;
return {
update: function () {
x += random(-.5, .5);
},
display: function () {
ellipse(x, y, r);
},
otherVar
}
}
const blobs = [];
function setup() {
createCanvas(600, 400);
// "each" is a global unused variable, but who cares? :)
for (each of Array(100)) {
let x = random(width);
let y = random(height);
let r = random(10);
blobs.push(Blob(x, y, r));
}
console.log(blobs[0].otherVar)
}
function draw() {
background(0);
for (const b of blobs) {
b.update();
b.display();
}
}
I've learned to use p5.js thanks to you
I'm going to try heart shaped fireworks for my New Years Eve fireworks animation
Idea: Make your own version of the "SL" program in Bash.
I cant use this code because «Firework» wich is only used once in this code is undefined? PLEASE ANSWER!
superb as per usual
Yesterday I've found out about your channel, insta-sub! Your videos are amazing, keep the good work going.
3>.
+Nitzan thank you!
i've set the x velocity to Math.random() * 2 - 1 so they don't go in a straigt line
Damn, I love this series
Hey, you rock everyone's kasbah. How about the batman equation..
HSB alpha values are from 0 to 1 instead of the 0 to 255 that RGB uses.
Dude! You are awesome! I like all your vids!
Did he really make "if(true) return true; else return false;" functions ...
nice
13:55, its not a bug its the Matrix 🤣
it should be 0-1 range for the trail to work
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)
take your time!
gonna do this, this week, thanks! happy 4th
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;
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! 🎉
Hi! So how would I code it to explode where my mouse is when I click it (no seed particles)?
this.pos.x * this.pos.y % 256 in HSB mode looks really nice
Yay, finally found the original this dot!
:)
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..
Checkout my implementation here: basic-fireworks.herokuapp.com/
When you mute and then un mute it, it freezes for a couple seconds. Just a heads up :D
Dude, your like-dislike ratio is insane. Just thought i'd mention. Keep it up, love what you do.
Nice shout out to batman
cool, gonna try to make this on my own for new year celebration.lol
your videos are amazing man! keep up the great work :)
Thank you!
why does it say "Framebuffer objects are not supported by this hardware or driver"?
that looked like shooting stars.
Jasmine Death 9:07
your rainbow background has the colours the wrong way around haha
that was so fun
Thank you for watching!
So this is where the this . Song came from!!
Wasn't each particle supposed to fire off 100 new particles when its velocity becomes positive? From the point you created that part of the code to the end of the video, all I did was to wait for the moment when each particle fire off 100 new particles then each of those 100 new particles fire 100 each then it goes on and your browser crashes! Maybe, you checked if the particle was created from the original particle and do not need to fire off 100 more but, forgot to show?
By the way, it's been 2 days and I am really appreciating this concept of programming through doing things graphically! Good work, man.
Lost Veteran I'm late, but the extra particles are called "fireworks" while the original particles are "firework"
helpful video!
«Firework» is not defined?
GENIUS
What if all the new explosions made more explosions as an infinite loop?
this is awesomeeee!! thanks Daniel son!
Supershape fireworks would ve interesting
indeed!
The Coding Train
How long have you been coding
Tye Ouellette he teaches ITP in NYU :)
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
12:28 bro said it first
Though i know that's its too late to comment,but after you have changed the color mode in the show function of particle class , the dull down effect of the particle has gone. The alpha value in HSB mode varies from 0-1.So you dont need to change the colorMode.
Never too late, thanks for the feedback!
Thanks for sharing! But why you don't use snippets!?
You are so talented..
I NEVER NEW THAT THIS LANGUAGE WAS THIS POPULAR!
Ahh, so that's where the This-Dot song came from.
BEST TUTOR EVERRRRRRRRRRRRRRRRRRRRR THISDOT LOL
It's good for health !!!! I will try convert it to C++
Using that boolean exploded insted of using null doesn't cause a lot of memory leak?
I love these vids
Is there a way to transform it into a screen saver? Awesome video man!
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
24:35 why makes adding alpha to background a trail on the particle?
Bruh u are awesome I want to be like u in programing.
How exactly works the trailing effect in fireworks? I don't get it.
💎
The trail was kind of a magic moment to me... (never done p5.js) can you please tell how the trail is being created?
I think is because usually background is what clears the screen every frame by drawing a new background, if that background is transparent every frame a new background is drawn in top, which allows you to see the oldest frames, but every new frame makes the oldest backgrounds more opaque until after a certain amount of frames you do not see the firework past position anymore, which creates the illusion of a trail, I think that's how it works I hope I explained myself clearly
@@kuldeep130 thanks, crystal clear :)
Great vids Thank u so much!! :)
Is there a 3D webcam interface like the PeasyCam library that is used in p5.js?
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
i love how Atom editor has that
hack code xD
Hehehe...
I'm like number 4k
In this video your voice reminds me the hungarian dub voice of Zach Galifianakis.
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
very nice job !
rip atom editor
wont miss u
i just watch this coz this guy typing fast asf !
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