var ƒ = d3.f

var width = innerWidth, 
    height = innerHeight,
    n = 300,
    r = Math.min(width, height)/2 - 10,
    strokeWidth = 1.5


var lines = d3.range(n).map(function(i){
  var y = (i - n/2)/n*r*2
  var width = r - Math.abs(y)


  return {i, y, width, θ: (Math.random() - .5)/20}
})


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

    // d3.shuffle(lines)[0].θ = randAngle()
    // d3.shuffle(lines)[0].θ = randAngle()

    // flowers = d3.scaleLinear().domain([0, width]).range([1, 8])(pos[0])
    // strokeWidth = d3.scaleLinear().domain([0, height]).range([1, 10])(pos[1])
  })
  .node()

var ctx = canvas.getContext('2d')
ctx.translate(width/2, height/2)


if (window.timer) window.timer.stop()
window.timer = d3.timer(function(t){
  ctx.clearRect(-width/2, -height/2, width, height)

  ctx.strokeStyle = '#000'
  ctx.lineWidth = strokeWidth
  lines.forEach(function(d, i){
    ctx.beginPath() 
    ctx.moveTo(-d.width, d.y - d.width*Math.sin(d.θ))
    ctx.lineTo(d.width,  d.y + d.width*Math.sin(d.θ))
    ctx.stroke()

    var p = lines[i ? i - 1 : n - 1]

    if (!i) return
    if (Math.random() < 1){
      // d.θ = p.θ
      var k = 5
      d.θ = (d.θ + p.θ*(k - 1))/k
    } 
  })

  if (Math.random() < 1){
    lines[0].θ += (Math.random() - .5)/10
  }
    lines[0].θ += .01

})


function randAngle(){ return (Math.random() - .5)/20 }