Particles with CSS and JavaScript

Question

I'm trying to create something like a very simple particle system. No physics required at this point, just divs that are animated to look like bubbles, or bees, or whatever. The code below creates the divs and through CSS I can make them change position, floating upwards. But I can't seem to workout how to destroy particles. Each particle does it's motion and then returns back to it's original point. I would prefer if it was removed completely.

Thank you.

/* ==================== PARTICLES CONTROLLER ==================== */

/**
 * Particle controller interates through all elements with 
 * CSS class name PARTICLE_CSS and when found a ParticleController is instantiated 
 * for each of the elements.
 */

function ParticleBaseController(){
  var ParticleContainer = document.querySelectorAll(PARTICLE_CSS),
      ParticleContainerLength = ParticleContainer.length;

  for (var i = ParticleContainerLength - 1; i >= 0; i--){
    new ParticleController(ParticleContainer[i]);
  };  
};

 function ParticleController(element) {
  var particleElement, fragment = document.createDocumentFragment();
  var numberOfParticles = 1;

   for (var i = 0; i < numberOfParticles; i ++) {
    particleElement = document.createElement("div");
        particleElement.addClassName(PARTICLE_ELEMENT_CSS_CLASS);
    var Ypos = Math.floor((Math.random()*200)+1);
    var Xpos = Math.floor((Math.random()*200)+1); 
    particleElement.style.top = Ypos + "px";
    particleElement.style.left = Xpos + "px";  
    fragment.appendChild(particleElement);  
  }
  element.appendChild(fragment);

 setTimeout(ParticleBaseController, 3000);
};

Do you miss a JavaScript command to remove an element or did I missunderstood you?! — Lars Knickrehm, Aug 07 '12 at 11:08
Yes. I need to remove, so it doesn't keep instantiating more and more. Some kind of limiter perhaps so it doesn't go over a set number of particles? — glebski, Aug 07 '12 at 11:15
You can use `element.parentNode.removeChild(element)` to remove an element from DOM, but I guess that's not what you're looking for, is it? Or is it more about the logical part in order how to close down ParticleController instances? — Lars Knickrehm, Aug 07 '12 at 12:30

score 0 · Answer 1 · answered Aug 09 '12 at 17:24

This worked for me. I am guessing that the way it works is that particles are only appended to the container as long as there are fewer than 15. Although I do not know how they are actually destroyed. But on screen I can only ever see 15 particles at a time, or however many I set then number to.

/* ==================== PARTICLES CONTROLLER ==================== */
    const NumberOfParticles = 15;

function smoking()
{
    var container = document.getElementById('particleContainer');
    for (var i = 0; i < NumberOfParticles; i++) 
    {
        container.appendChild(createParticle());
    }
}   

function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}

function createParticle()
{
    var particleDiv = document.createElement('div');
    particleDiv.style.top = "-300px";
    particleDiv.style.left = "200px"

    particleDiv.style.webkitAnimationName = 'smoke-rise, smoke-fade';

    var SmokeDuration = randomFloat(5, 10)+"s";
    var FadeDuration = randomFloat(4, 11)+"s";
    var SmokeDelay = randomFloat(0, 5)+"s";
    var FadeDelay = randomFloat(2, 9)+"s";

    particleDiv.style.webkitAnimationDuration = SmokeDuration + ', ' + FadeDuration;       
    particleDiv.style.webkitAnimationDelay = SmokeDelay + ', ' + FadeDelay;

    return particleDiv;
}

window.addEventListener("DOMContentLoaded", smoking, false);

i know this is pretty old, but i was looking for something like this and came across you question and also this link - http://paulmason.name/item/javascript-particle-engine-effects — RenaissanceProgrammer, May 19 '16 at 00:03

Particles with CSS and JavaScript

1 Answers1