const km = kelvinUtil.math;
const width = 600;
const height = 600;
const bgColor = 'black';
const bgOpacity = .4;
const color = {
  red1: '#E74C3C',
  red2: '#C0392B',
  orange1: '#E67E22',
  orange2: '#D35400',
  yellow1: '#F1C40F',
  yellow2: '#F39C12',
  green1: '#2ECC71',
  green2: '#27AE60',
  mint1: '#1ABC9C',
  mint2: '#16A085',
  blue1: '#3498DB',
  blue2: '#2980B9',
  purple1: '#9B59B6',
  purple2: '#8E44AD',
  light1: '#ECF0F1',
  light2: '#BDC3C7',
  grey1: '#95A5A6',
  grey2: '#7F8C8D',
  dark1: '#34495E',
  dark2: '#2C3E50' };


let mouseX = 0;
let mouseY = 0;
let frameCount = 0;
let ss = [];
let ss2 = [];

let stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height });


let layer = new Konva.FastLayer({
  clearBeforeDraw: false });

stage.add(layer);

let bg = new Konva.Rect({
  x: 0,
  y: 0,
  width: width,
  height: height,
  fill: bgColor,
  opacity: bgOpacity });

layer.add(bg);
bg.moveToBottom();

// stats
let stats = new Stats();
stats.showPanel(0);
stats.domElement.className += ' stats';
document.body.appendChild(stats.domElement);

new Konva.Animation(frame => {
  stats.begin();

  let z = 0;

  for (let x = -100; x <= 100; x += 10) {
    for (let y = -100; y <= 100; y += 10) {

      let s1;
      let s2;

      if (typeof ss[z] === 'undefined') {
        s1 = new Konva.Line({
          points: [0, 0, 10, 10],
          stroke: 'rgb(0,150,255)',
          strokeWidth: 2,
          globalCompositeOperation: 'lighter' });

        ss.push(s1);
        layer.add(s1);
      } else
      {
        s1 = ss[z];
      }

      if (typeof ss2[z] === 'undefined') {
        s2 = new Konva.Line({
          points: [0, 0, 10, 10],
          stroke: 'rgb(0,150,255)',
          strokeWidth: 2,
          globalCompositeOperation: 'lighter' });

        ss2.push(s2);
        layer.add(s2);
      } else
      {
        s2 = ss2[z];
      }

      let d = km.dist(x, y, 0, 0);
      let op = km.map(d, 0, 150, 1, 0);
      let r = km.floor(km.map(d, 0, 150, 255, 0));
      let g = 50;
      let b = km.floor(km.map(d, 0, 150, 0, 255));
      let c = `rgb(${r},${g},${b})`;
      let tx = x * 2 + width / 2;
      let ty = y * 2 + height / 2;

      s1.opacity(op);
      s1.x(tx);
      s1.y(ty);
      s1.points([x * 2, y * 2, 0, 0]);
      s1.rotation(frameCount * 1.5);
      s1.stroke(c);

      s2.opacity(op);
      s2.x(tx);
      s2.y(ty);
      s2.points([x / 2, y / 2, 0, 0]);
      s2.rotation(-frameCount * 2);
      s2.stroke(c);

      z++;
    }
  }

  frameCount++;

  stats.end();
}, layer).start();