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!
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!!!
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.
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)
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.
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.
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)
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(); } }
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.
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..
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)
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.
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.
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!
7 ปีที่แล้ว +1
How to make the trailing effect in processing for 3D?
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
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
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.
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
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!
I am binging all of these. Oddly satisfying category for me😛.
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!
OMG I stumbled across the video with the birth of the this dot song
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
14:00 and that's how you make the matrix
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
Love this one, fireworks was the first thing I tried myself when I discovered p5
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!!!
what a great challenge! learnt so many new things, class which is an object of another class. thanks Dan!
This has become my new favourite TH-cam channel
Love the video! Managed to recreate this in Python using PyGame without too much trouble. Keep it up!
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!
looks like you like coding, singing and dancing. i like coding, running and cubing
Cubing? Yayy. Cool.
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.
superb as per usual
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!
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.
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)
Damn, I love this series
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 🙏
Another great tutorial! I slowed Dan down to 0.75x and found it a little easier to follow along.
Dude! You are awesome! I like all your vids!
I'm going to try heart shaped fireworks for my New Years Eve fireworks animation
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've learned to use p5.js thanks to you
gonna do this, this week, thanks! happy 4th
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.
cool, gonna try to make this on my own for new year celebration.lol
that was so fun
Thank you for watching!
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!
I cant use this code because «Firework» wich is only used once in this code is undefined? PLEASE ANSWER!
Idea: Make your own version of the "SL" program in Bash.
your videos are amazing man! keep up the great work :)
Thank you!
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();
}
}
that looked like shooting stars.
Jasmine Death 9:07
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.
You are so talented..
this is awesomeeee!! thanks Daniel son!
your rainbow background has the colours the wrong way around haha
Yesterday I've found out about your channel, insta-sub! Your videos are amazing, keep the good work going.
3>.
+Nitzan thank you!
Hearts + fireworks in kotlin: imgur.com/a/LFRVNNd
How did you made this can you help me how can I give it the shape of any letters??
13:55, its not a bug its the Matrix 🤣
Did he really make "if(true) return true; else return false;" functions ...
Hey, you rock everyone's kasbah. How about the batman equation..
Hi! So how would I code it to explode where my mouse is when I click it (no seed particles)?
Yay, finally found the original this dot!
:)
Ahh, so that's where the This-Dot song came from.
I love these vids
So this is where the this . Song came from!!
GENIUS
it should be 0-1 range for the trail to work
helpful video!
HSB alpha values are from 0 to 1 instead of the 0 to 255 that RGB uses.
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..
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.
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
very nice job !
i've set the x velocity to Math.random() * 2 - 1 so they don't go in a straigt line
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"
Is there a way to transform it into a screen saver? Awesome video man!
Supershape fireworks would ve interesting
indeed!
The Coding Train
How long have you been coding
Tye Ouellette he teaches ITP in NYU :)
Dude, your like-dislike ratio is insane. Just thought i'd mention. Keep it up, love what you do.
I NEVER NEW THAT THIS LANGUAGE WAS THIS POPULAR!
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! 🎉
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
It's good for health !!!! I will try convert it to C++
Great vids Thank u so much!! :)
«Firework» is not defined?
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.
Never too late, thanks for the feedback!
24:35 why makes adding alpha to background a trail on the particle?
Is Daniel going to add color before the end? Hue guessed it!
What if all the new explosions made more explosions as an infinite loop?
Thanks for sharing! But why you don't use snippets!?
Using that boolean exploded insted of using null doesn't cause a lot of memory leak?
Bruh u are awesome I want to be like u in programing.
i love how Atom editor has that
hack code xD
I have never coded in any language, but this is soooo coool. Can I start learning java from your vids or I should learn something else at first?
For Java you can start with Processing from here: th-cam.com/users/shiffmanplaylists?view=50&shelf_id=2&sort=dd
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.
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!
How to make the trailing effect in processing for 3D?
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
BEST TUTOR EVERRRRRRRRRRRRRRRRRRRRR THISDOT LOL
why does it say "Framebuffer objects are not supported by this hardware or driver"?
12:28 bro said it first
Hey Daniel! You wanted a new song? Here it is: soundcloud.com/fl00per/this-dot :D
Haha, nice! I made a playlist for Coding Rainbow remixes: soundcloud.com/kristianpedersen/sets/coding-rainbow-remixes
If I didn't say it before thank you again, I love these!
OHHH So this is where it came from! hahaha
That was one of the strangest two minutes of my life. I liked it.
Nice channel, I've watched a few videos now and enjoyed all of them.
What color scheme do you use in this video?
I have a question! What, if ever, would p5js be used for in an actual website and how often would it be used?
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 :)
In this video your voice reminds me the hungarian dub voice of Zach Galifianakis.
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
This is the "THIS DOT SONE" come from.......
begin on 7: 30
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
How exactly works the trailing effect in fireworks? I don't get it.