import * as THREE from "https://cdn.skypack.dev/three@0.148.0";

// THREE.js particle system
const PARTICLE_COUNT = 10000; // not too much faster than canvas, slow at 100k
const PARTICLE_SIZE = 5;

const canvas = document.getElementById('particles');
const width = window.innerWidth;
const height = window.innerHeight;

// initialize a THREE renderer & scene
const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
const scene = new THREE.Scene();

const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
camera.position.z = 0;
camera.position.x = width/2;
camera.position.y = height/2;
scene.add( camera );

// initialize particle geometry
const geo = new THREE.PlaneGeometry(PARTICLE_SIZE, PARTICLE_SIZE);
const mat = new THREE.MeshBasicMaterial({ color: 0xffffff });

// an empty array to hold particles
const container = [];

// spawn particles
for(let i = 0; i < PARTICLE_COUNT; i++) {
  
  // create a particle
  let p = new THREE.Mesh(geo, mat);
  
  // 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
  p.position.z = -10;
  // add it to the scene
  container.push(p);
  scene.add(p);
}

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

    // some shorthand local vars we'll use a lot
    let c = container[i];
    let d = c.userData;
    
    // 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;
    
    // set mesh position
    c.position.x = d.pos[0];
    c.position.y = d.pos[1];
    
 
  }
  
  // render the scene
  renderer.render(scene, camera);
  
  window.requestAnimationFrame(loop);
}

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