try { window.regltick.cancel() } catch(e){}

console.clear()

window.regl ? run(null, regl) : reglLib({onDone: run})
function run(err, regl){
  window.regl = regl

  // regl.clear({color: [0, 0, 0, 1], depth: 1})

  var n = 10000
  var lines = 50


  var data = d3.range(lines).map(d => {
    var i = Math.floor(n*Math.random())
    return d3.range(i, i + 20).map((i) => [i, i + 1])
  })

  var colors = linspace(ndarray([], [n]), 1, 0)

  function circlePoints(n){
    return function(i){
      var theta = 2.0 * Math.PI * i / n
      return [ Math.sin(theta), Math.cos(theta) ]
    }
  }

  function randomPoints(n){
    return function(){
      return [Math.random()*2 - 1, Math.random()*2 - 1]
    }
  }

  var datasets = []
  var curIndex = 0
  var lastSwitchTime = 0
  var switchInterval = 1
  var switchDuration = 1

  function createDatasets(){
    datasets = [circlePoints, randomPoints, randomPoints].map(fn => 
      regl.buffer(vectorFill(ndarray([], [n, 2]), fn(n)))
    )
  }
  createDatasets()

  var drawPoints = regl({
    vert: `
      precision mediump float;
      attribute vec2 xy0, xy1;
      attribute float basis;
      varying float c;
      uniform float interp;      
      void main() {
        c = basis;
        vec2 pos = mix(xy0, xy1, interp);
        gl_Position = vec4(pos, 0, 1);
      }`,

    frag: `
      precision mediump float;
      varying float c;
      void main() {
        gl_FragColor = vec4(c/2.0 + 0.5, 0, 1, 1);
      }`,
    lineWidth: 1,
    attributes: {
      xy0: () => datasets[curIndex % datasets.length],
      xy1: () => datasets[(curIndex + 1) % datasets.length],
      basis: colors,
    },
    uniforms: {
      interp: (ctx, props) => Math.max(0, Math.min(1, props.interp))
    },

    elements: regl.elements({
      data,
      type: 'uint16',
      usage: 'static',
      primitive: 'lines'
    }),
  })


  window.regltick = regl.frame(({time}) => {
    // Check how long it's been since the last switch, and cycle the buffers
    // and reset the timer if it's time for a switch:
    if ((time - lastSwitchTime) > switchInterval) {
      lastSwitchTime = time
      curIndex++
    }

    drawPoints({interp: ease((time - lastSwitchTime) / switchDuration)})
  })


}