<canvas id="view"></canvas>

body {
  background: #FFF;
}

#view {
  position: fixed;
  top: 0;
  left: 0;
}

// Controls
const amt = 500;
const gui = new dat.GUI();
let state = {
  movement: 1
};

gui.add(state, "movement", 0.1, 5, 0.1).listen();

// Pixi
const app = new PIXI.Application({
  view: document.querySelector("#view"),
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0xffffff,
  antialias: true
});

function CreateMolecule() {
  const g = Object.create(new PIXI.Graphics());
  g.beginFill(0xb3dbf4);
  g.lineStyle(2, 0x0069aa, 1);
  g.drawCircle(0, 0, Math.random() * 5 + 5);
  g.endFill();
  g.position.set(
    Math.random() * window.innerWidth,
    Math.random() * window.innerHeight
  );
  return g;
}

let dots = [];
for (let i = 0; i < amt; i++) {
  const dot = CreateMolecule();
  dots = [...dots, dot];
  app.stage.addChild(dot);
}

// Ticker
const ticker = new PIXI.Ticker();
ticker.add(() => {
  for (let i = 0; i < dots.length; i++) {
    dots[i].position.x += (Math.random() < 0.5 ? -1 : 1) * state.movement;
    dots[i].position.y += (Math.random() < 0.5 ? -1 : 1) * state.movement;
  }
}, PIXI.UPDATE_PRIORITY.LOW);
ticker.start();