// In practice, you would probably import/require regl
// const regl = require('regl')();

// In this block, it is already loaded, so we just
// initialize it. For more info, see:
// https://github.com/regl-project/regl#standalone-script-tag

var regl = createREGL();

var drawTriangle = regl({

  frag: `
  precision mediump float;
  uniform vec4 color;
  void main () {
    gl_FragColor = color;
  }`,

  vert: `
  precision mediump float;
  attribute vec2 position;
  void main () {
    gl_Position = vec4(position, 0, 1);
  }`,

  attributes: {
    position: function(context, props) {
      return [
        [-1 * Math.cos(context.tick / 100), 0],
        [Math.sin(context.tick / 100), -1],
        [Math.sin(context.tick / 100), 1]
      ];
    }
  },

  uniforms: {
    color: function(context, props) {
      return props.color;
    }
  },

  count: 3,
})

regl.frame(function(context) {
  drawTriangle({
    color: [0.208, 0.304, 1.000, 1.000]
  });
});