// DOM/CSS-only particle system
// try 1000, or 10000 and watch performance tank
const PARTICLE_COUNT = 1000;

const container = document.getElementById('particles');

// spawn particles
for(let i = 0; i < PARTICLE_COUNT; i++) {
  
  // create a particle
  let p = document.createElement('div');
  p.classList.add('particle');
  
  // set its initial position + speed
  p.userData = {} || p.userData;
  p.userData.vel = [Math.random()-.5, Math.random()-.5]; // random x/y velocity
  p.userData.pos = [window.innerWidth / 2, window.innerHeight / 2]; // start in the center
  
  // add it to the dom
  container.append(p);
}

// animation loop
const loop = (time) => {
  
  // loop over all particles
  for(let i = 0; i < container.children.length; i++) {

    // some shorthand local vars we'll use a lot
    let c = container.children[i];
    let d = c.userData;
    
    // skip children that aren't particles
    if(!c.classList.contains('particle')) continue;
    
    // update particle position
    d.pos[0] = d.pos[0] + d.vel[0];
    d.pos[1] = d.pos[1] + d.vel[1];
    
    // wrap around the browser window's width
    if(d.pos[0] >= window.innerWidth) d.pos[0] = 0;
    if(d.pos[0] < 0) d.pos[0] = window.innerWidth;
    // and its height
    if(d.pos[1] >= window.innerHeight) d.pos[1] = 0.
    if(d.pos[1] < 0) d.pos[1] = window.innerHeight;
    
    // update css transform with our new location
    c.style.transform = `translate3d(${d.pos[0]}px, ${d.pos[1]}px, 0px)`;
  }
  window.requestAnimationFrame(loop);
}

// make rocket go now
window.requestAnimationFrame(loop);