Coding Challenge #78: Simple Particle System

References:

Videos:

Related Coding Challenges:

Timestamps:
00:00 Introduction
00:31 Define a particle system
01:12 Make a Particle class
02:11 Draw a particle
03:05 Add multiple particles
04:05 Move particles
05:04 Add particles over time
05:48 Fade particles
06:49 Remove particles
09:10 Remove particles in the correct order
11:40 Experiment with parameters
12:08 Conclusion

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#particlesystem #oop #javascript #p5js

[ingrate]

I've been programming for a couple of years and I dunno about anyone else, but I often find myself losing motivation or if I hit a plateau I get a bit down and question whether its really what I want to do with my life. Then I come to this guy and he just re-energizes me every time.

Education at every level needs people like this chap. Absolute legend, never a dull moment, always keeps me engaged and excited.

[jasonyung]

ah... really great insight about removing the particles from the array once they're off screen. Very elegant.

[Krondelo]

Thanks Dan! This is exactly the kind of coding I love, because it's so much easier to understand how things work when you have a visual product of said code!

[tycreate]

Thank you so much I finally got my particle system working I SPENT DAYS TRYING TO GET THIS WORKING

[maskman]

I like this smoking particle idea, "this.vy = random(-5, -1)" inside class is the key element to make it looks like smoking....

[amanmahendroo]

you only have 51 'bubbles' (which I find a good alternative for the word Particle ;D) if you're removing them on complete transparency... so, just to have little brevity in your code, try this:
while (particles.length > 51) {
particles.shift();
}
.shift() removes the first element from a stack. If you add 5 bubbles per frame, just change the number to 255 ;) Prost!

Edit: Thanks for the love!

[bokkenka]

I program in Python, but still like to watch these videos. In Python, a list is iterable... "for item in list". It will check *every* item in the list. You don't need to use an index and you don't need to work backwards through the list to keep from skipping items.

[AmrendraKumar-koyf]

Awesome coding, bug fixing approach explanation everything, you are great sir.

[ShaharNacht]

One thing I always do in my classes is put particles.push(this) straight in the (bottom of the) constructor. Another thing I tend to do is name the array that contains all particles Particle.all - this way I know exactly the how to reference any array of instances of a class, given that I set MyClass.all=[] for every class I make, without having to memorize all the names I gave them. =)

Amazing video BTW! ♥

[yarz]

I love your videos, they always teach me new stuff and make me smile. Thank you

[alessandrosantini]

With this base code, I've managed to create a flame and a bubble effect, using lerpColor between two colors.
Moreover I've used mouse X and Y ad input for the constructor of each particle. I think I've just created a nice animation for my website!

[dellikins]

I love your work and thank you so much for the git repos as well! CHEERS!!!

[BlueMrDragoN]

We need you at my school our teachers cant explain and give examples and then they just code a lot of errors xD and don't let us find a fix for the problem they do it theirselves

[owenliu]

I would recommend using linked list data structure here because we are deleting elements with O(N) complexity.

[NameGoesHere]

I have a challenge: make a pixel art program that allows you to select a color from a color palette and draw on the canvas, I did this for a coding project recently and it took me about two weeks, (I'm fairly new to code), and I'm curious to see how long it would take you and what things you would do differently and just how you would go about it in general

[kevnar]

Random radii would have made a big difference, too.

[XoreLP]

Btw, you can use .shift to erase the first element of an array

[lujainshyyah]

That's really amazing
Thank you

[spiderous]

Filter function would be better to remove items without the problem of shifting because it checks every element in an array and then returns a new filtered one.

[GasimovTV]

I like the way you teach! Keep up the good work! :)