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

var sel = d3.select('#graph').html('')

c = d3.conventions({
  sel,
  layers: 'ds',
  margin: { left: 0, bottom: 0, right: 0, top: 0 },
  width: 960,
  height: 500
})

var count = 100000
var yScale = d3.scaleLinear()
  .domain([0, 4])
  .range([-0.8, 0.8])

var data = d3.range(count).map(i => {
  var q = Math.floor(Math.random()*5)

  return {
    speed: Math.random() * 2 + 1,
    x: Math.random() * 2 - 1,
    y0: yScale(0),
    y1: yScale(q),
    dy: Math.random() * 0.2,
    isB: i % 2
  }

})


reglLib({ onDone, container: c.layers[0].node() })

function onDone(err, regl) {
  if (err) return console.log(err)
  window.regl = regl

  var drawPoints = regl({
    vert: `
      precision mediump float;
      attribute vec4 p;
      varying float c;
      uniform float interp, y0;      
      void main() {
        float t = mod(p.x + interp*p.w, 1.0);
        // cubic ease
        float ct = t < 0.5
          ? 4.0 * t * t * t
          : -0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0;

        float x = mix(-1.0, 1.0, t);
        float y = mix(y0, p.y, ct);

        gl_Position = vec4(x, y + fract(p.z), 0, 1);
        gl_PointSize = 2.0;

        c = floor(p.z);
      }`,

    frag: `
      precision mediump float;
      varying float c;
      void main() {
        vec4 blue = vec4(0.00, 0.65, 1.00, 1);
        vec4 orng = vec4(0.99, 0.45, .011, 1);

        gl_FragColor = c == 1.0 ? blue : orng;
      }`,

    attributes: {
      p: () => data.map(({x, y1, dy, isB, speed}) => 
        [x, y1, dy + isB, speed]
      ),
    },
    uniforms: {
      interp: (ctx, props) => props.interp,
      y0: yScale(0),
    },
    primitive: 'point',
    count: count
  })

  window.regltick = regl.frame(({ time }) => {
    drawPoints({ interp: time / 40 })
  })
}