var ƒ = d3.f

var width = innerWidth*0.7, 
    height = innerHeight,
    n = 96,
    r = Math.min(width, height)/2 - 10,
    ir = r/8,
    flowers = 4,
    strokeWidth = 4
    π = Math.PI


var lines = d3.range(n)


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

    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.scale(2,2);
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.globalAlpha =1;
  ctx.fillStyle = '#28b0ff'
  ctx.lineWidth = strokeWidth
  lines.forEach(function(i){
    var θ = i*Math.PI*2/(n);
    var f = i/90;
    
    var dθ = 0.03,
        dphi = 0.24,
        rs = 0.2 + Math.abs(f%0.2-0.3) * 0.8,
        rs = (i*45454.324234 +'').slice(10, 13)/5000,
        rs = Math.abs(i % 30 - 15)/90 + .2,
        rs = Math.sqrt(i/90),
        rs = Math.abs(i % 24 - 12)/24,
        rs = Math.sin(π/8)/Math.sin(π/2 - π/4 + (θ % (π/2)))
        // dphi = .03 + Math.abs(i % 24 - 12)/24/10

    var x0 = Math.cos(θ)*r;
    var y0 = Math.sin(θ)*r;

    var x1 = Math.cos(θ+dθ)*r;
    var y1 = Math.sin(θ+dθ)*r;

    var x2 = Math.cos(θ+dθ+dphi)*r*rs;
    var y2 = Math.sin(θ+dθ+dphi)*r*rs;

    var x3 = Math.cos(θ+dphi)*r*rs;
    var y3 = Math.sin(θ+dphi)*r*rs;
    
    ctx.beginPath() 
    ctx.moveTo(x0, y0)
    ctx.lineTo(x1, y1)
    ctx.quadraticCurveTo(x2, y2, 0, 0);
    ctx.quadraticCurveTo(x3, y3, x0, y0)
    ctx.fill();

    // ctx.rect(x2, y2, 10, 10)
    // ctx.fill()

  })

  ctx.fillStyle = '#000'
  // ctx.globalAlpha = 0.000648;
  // ctx.rotate(4/2000)
  var s = -t/1000
  var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(r)
    .startAngle(function(i){ return (s + i)*Math.PI*2/n })
    .endAngle(function(i){   return (s + i + .5)*Math.PI*2/n })
    .context(ctx)

  ctx.beginPath()
  lines.forEach(arc)
  ctx.fill()

  ctx.moveTo(ir, 0)
  ctx.arc(0, 0, ir, 0, 2 * Math.PI)
  ctx.fill()

})