let width= 0, height= 0, cx= 0, cy= 0;
let svg, group, blurF, colorMatrixF;
let conf = {
  blur: 8,
  redMult: 1,
  greenMult: 0,
  blueMult: 0,
  alphaMult: 20,
  alphaAdd: -8,
  randomColors: true,
  numElements: 70,
  circleMinRadius: 15,
  circleMaxRadius: 40,
  attraction: 0.02,
  repulsion: 1000,
};
let elements= [];
let mouseX= 0, mouseY= 0;

function init() {
  svg = document.getElementById('svg');
  colorMatrixF = document.getElementById('colorMatrixF');
  blurF = document.getElementById('blurF');

  onResize();
  initElements();
  //shuffle();
  initGui();
  updateColorMatrixF();
  resetMouse();

  window.addEventListener('resize', onResize, false);
  svg.addEventListener('mousemove', onMouseMove, false);
  svg.addEventListener('mouseleave', resetMouse, false);
  svg.addEventListener('click', shuffle, false);

  animate();
}

function initGui() {
  let gui = new dat.GUI();
  let guif = gui.addFolder('Blur');
  guif.add(conf, 'blur', 1, 30, 1).onChange(updateBlurF);;

  guif = gui.addFolder('ColorMatrix');
  guif.add(conf, 'redMult', 0, 5).onChange(updateColorMatrixF);
  guif.add(conf, 'greenMult', 0, 5).onChange(updateColorMatrixF);
  guif.add(conf, 'blueMult', 0, 5).onChange(updateColorMatrixF);
  guif.add(conf, 'alphaMult', 1, 30).onChange(updateColorMatrixF);
  guif.add(conf, 'alphaAdd', -10, -1).onChange(updateColorMatrixF);

  guif = gui.addFolder('Misc');
  guif.add(conf, 'attraction', 0.001, 0.9);
  guif.add(conf, 'repulsion', 500, 2000, 50);
  guif.add(conf, 'randomColors').onChange(initElements);
  guif.add(conf, 'numElements', 20, 300, 10).onChange(initElements);
  guif.add(conf, 'circleMaxRadius', conf.circleMinRadius, 100, 5).onChange(initElements);
  gui.close();
}

function initElements() {
  elements = [];

  if (group) {
    svg.removeChild(group);
  }
  group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  svg.appendChild(group);

  let fill = randomColor({ luminosity: 'light', format: 'rgb' });
  let x, y, r;
  for (let i = 0; i < conf.numElements; i++) {
    if (conf.randomColors) fill = randomColor({ format: 'rgb' });
    x = rnd(width);
    y = rnd(height);
    r = conf.circleMinRadius + rnd(conf.circleMaxRadius - conf.circleMinRadius);
    let e = { x, y, ox: x, oy: y, r, fill };

    e.elt = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    updateElement(e);
    group.appendChild(e.elt);
    elements.push(e);
  }
}

function shuffle() {
  let e;
  for (let i = 0; i < conf.numElements; i++) {
    e = elements[i];
    e.ox = rnd(width);
    e.oy = rnd(height);
  }
}

function resetMouse() {
  mouseX = cx;
  mouseY = 5 * cy;
}

function animate() {
  requestAnimationFrame(animate);
  let dx, dy, dist, angle, x, y;
  elements.forEach((e, i) => {
    dx = e.x - mouseX;
    dy = e.y - mouseY;
    angle = Math.atan2(dy, dx);
    dist = conf.repulsion / Math.sqrt(dx * dx + dy * dy);
    e.x += Math.cos(angle) * dist;
    e.y += Math.sin(angle) * dist;
    e.x += (e.ox - e.x) * conf.attraction;
    e.y += (e.oy - e.y) * conf.attraction;
    updateElementPos(e);
  });
}

function updateElement(e) {
  updateElementPos(e);
  e.elt.setAttribute('r', e.r);
  e.elt.setAttribute('style', estyle(e));
}

function updateElementPos(e) {
  e.elt.setAttribute('cx', e.x);
  e.elt.setAttribute('cy', e.y);
}

function estyle(e) {
  return `fill: ${e.fill};`;
}

function updateColorMatrixF() {
  colorMatrixF.setAttribute('values', colorMatrixValues());
}

function updateBlurF() {
  blurF.setAttribute('stdDeviation', conf.blur);
}

function onResize() {
  const r = svg.getBoundingClientRect();
  width = r.width;
  height = r.height;
  cx = width / 2;
  cy = height / 2;
  if (elements.length>0) shuffle();
}

function onMouseMove(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
}

function colorMatrixValues() {
  return `${conf.redMult} 0 0 0 0 0 ${conf.greenMult} 0 0 0 0 0 ${conf.blueMult} 0 0 0 0 0 ${conf.alphaMult} ${conf.alphaAdd}`;
}

function rnd(max, negative) {
  return negative ? Math.random() * 2 * max - max : Math.random() * max;
}

init();