var container, camera, scene, renderer, lines = [], items = [];
var numItems = 30;
var xspeed;
var yspeed;
var lineGeom = new THREE.Geometry();
var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight - 75;

init();
animate();

function init() {

  // CAMERA, SCENE, ETC

  var geometry = new THREE.CircleBufferGeometry(15, 15);
  var center = new THREE.Vector3();
  for (var i = 0; i < numItems; i++) {
    var item = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
      color: 0x000000
    }));
    item.position.x = (Math.random()) * WIDTH / 2 - WIDTH / 4;
    item.position.y = (Math.random()) * HEIGHT / 2 - HEIGHT / 4;
    item.xspeed = (Math.random()) * 0.5 - 0.25;
    item.yspeed = (Math.random()) * 0.5 - 0.25;
    items.push(item);
    scene.add(item);
  }

  for (var x = 0; x < items.length; x++) {
    for (var y = 0; y < items.length; y++) {
      var start = x;
      var end = x + y;
      var t1 = items[start].position;
      var t2 = items[end].position;
      var d = t1.distanceTo(t2);
      if (d <= 100) {
        lineGeom.vertices.push(items[x].position);
        lineGeom.vertices.push(items[end].position);
      }
      if (end === items.length - 1) {
        break;
      }
    }
  }

  var lineMat = new THREE.LineBasicMaterial({
    color: 0x000000,
  })

  line = new THREE.LineSegments(lineGeom, lineMat);
  line.position.z = -1;
  scene.add(line);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  items.forEach((circle) => {
    circle.position.x += circle.xspeed;
    circle.position.y += circle.yspeed;

    if (circle.position.x > WIDTH / 2 || circle.position.x < -WIDTH / 2) {
      circle.xspeed *= -1;
    }

    if (circle.position.y > HEIGHT / 2 || circle.position.y < -HEIGHT / 2) {
      circle.yspeed *= -1;
    }
  });
  line.geometry.verticesNeedUpdate = true;
  camera.position.x = 0;
  camera.position.z = 1000;
  renderer.render(scene, camera);
}