console.clear()

var ƒ = d3.f

var width = innerWidth, 
    height = innerHeight,
    ƒ = d3.f

var svg = d3.select('body').html('')
  .append('svg')
  .at({width, height})
  .on('mousemove', function(){
    var pos = d3.mouse(this)

    var x = pos[0] - innerWidth/2
    var y = pos[1] - innerHeight/2
    console.log(x, y, Math.atan2(y, x))
    // minSize = d3.scaleLinear().domain([0, width]).range([.1, 2])(pos[0])
    // change = d3.scaleLinear().domain([0, height]).range([.1, 10])(pos[1])
  })


var turns = [
  {a: Math.PI/2, l: 100},
  {a: -Math.PI/2, l: 60},
  {a: -Math.PI/3,l: 40},
  {a: Math.PI/10,l: 100},
  {a: -Math.PI/1.2, l: 30},
]

var points = [[innerWidth/2,innerHeight/2],[300,520],[394,718],[412,616],[453,195],[609,313],[655,752],[802,727],[817,492],[935,299],[959,431]]
var turns = pointsToTurns(points)


svg.append('path')
  .at({stroke: '#0a0', fill: 'none', strokeWidth: 4, d: 'M' + points.join('L'), opacity: .4})
var path = svg.append('path').at({stroke: '#000', fill: 'none'})
var path1 = svg.append('path').at({stroke: '#f00', fill: 'none'})

if (window.timer) window.timer.stop()
window.timers = d3.timer(function(t){
  var r = 1 - t/4000
  // var r = 1

  points = turnsToPoints(turns.map(d => ({a: d.a*r, l: d.l/3 })))
  path.at({d: 'M' + points.join('L')})

  turns1 = pointsToTurns(points)
  points1 = turnsToPoints(turns1)
  path1.at({d: 'M' + points.join('L')})

  // window.timers.stop()
})




function turnsToPoints(turns){
  var curPos = [width/2, height/2]
  var curA = 0
  var points = [curPos]

  turns.forEach(function(d){
    curA += d.a

    var x = curPos[0] + Math.cos(curA)*d.l
    var y = curPos[1] + Math.sin(curA)*d.l

    curPos = [x, y]
    points.push(curPos)
  })

  return points
}


function pointsToTurns(points){
  var turns = []

  var pPos = [width/2 + 1, height/2]
  var prevA = Math.PI

  points.forEach(function(d, i){
    var nPos = points[i + 1]
    if (!nPos) return

    // if (i == 2) debugger

    var a = calcAngle(pPos, d, nPos)
    var l = calcDist(d, nPos)

    var x = d[0] - nPos[0]
    var y = d[1] - nPos[1]
    var curA = Math.atan2(y, x)

    turns.push({a: curA - prevA, l})

    prevA = curA
  })

  return turns
}

// var points2 = turnsToPoints(turns)
// var turns2 = pointsToTurns(points2)
// var points3 = turnsToPoints(turns2)




function calcAngle(a, b, c){
  var v1 = [b[0] - a[0], b[1] - a[1]]
  var v2 = [c[0] - b[0], c[1] - b[1]]
  
  var dot = v1[0]*v2[0] + v1[1]*v2[1]
  var det = v1[0]*v2[1] + v1[1]*v2[0]

  // return -Math.atan(v2[0]/v2[1]) Math.atan(v1[0]/v1[1])
  return Math.atan(v2[0]/v2[1]) - Math.atan(v1[0]/v1[1])
  // console.log(Math.atan(v1[0]/v1[1]), Math.atan(v2[0]/v2[1]))

}


function calcAngle(a, b, c){
  var v1 = [b[0] - a[0], b[1] - a[1]]
  var v2 = [c[0] - b[0], c[1] - b[1]]
  
  var dot = v1[0]*v2[0] + v1[1]*v2[1]

  var ab = calcDist(a, b)
  var bc = calcDist(b, c)
  var ca = calcDist(c, a)



  // return Math.acos((bc*bc + ab*ab - ca*ca)/(2*bc*ab))//*180/Math.PI
  // return Math.acos((bc*bc + ab*ab - ca*ca)/(2*bc*ab))*180/Math.PI



  var v1 = [b[0] - a[0], b[1] - a[1]]
  var v2 = [c[0] - b[0], c[1] - b[1]]
  
  var dot = v1[0]*v2[0] + v1[1]*v2[1]
  var det = v1[0]*v2[1] + v1[1]*v2[0]

  var ab = calcDist(a, b)
  var bc = calcDist(b, c)
  var ca = calcDist(c, a)

  // console.log(Math.atan(v1[0]/v1[1]), Math.atan(v2[0]/v2[1]))

  var r = Math.atan2(v2[0] - v1[0], v2[1] - v1[1]);
  // return mod(r - Math.PI/2, Math.PI)
  return Math.atan2(det, dot)
}



function calcDist([x0, y0], [x1, y1]){
  var dx = x0 - x1
  var dy = y0 - y1
  return Math.sqrt(dx*dx + dy*dy)
}