vlandham/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Intro to regl

Part of a tutorial by Jim Vallandingham introducing regl for data visualization.
Read it Here: Intro to regl
Blocks associated with this tutorial:

Plain regl triangle
regl triangle in a loop
regl triangle moving
regl triangle using props
Displaying dots with regl
Data Stream with regl


## index.html
<!DOCTYPE html>
<title>Simple regl Triangle Example in a loop </title>
<body>
  <script src="https://npmcdn.com/regl@1.3.0/dist/regl.js"></script>
	<script src="index.js"></script>
</body>

## index.js
// In development, 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: [
      [-1, 0],
      [0, -1],
      [1, 1]
    ]
  },

  uniforms: {
    color: [1, 0, 0, 1]
  },

  count: 3,
})

// Here we put our draw command in a loop!
regl.frame(function(context) {
  drawTriangle();
});

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<title>Simple regl Triangle Example in a loop </title>
	<body>
	<script src="https://npmcdn.com/regl@1.3.0/dist/regl.js"></script>
	<script src="index.js"></script>
	</body>
	// In development, 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: [
	[-1, 0],
	[0, -1],
	[1, 1]
	]
	},

	uniforms: {
	color: [1, 0, 0, 1]
	},

	count: 3,
	})

	// Here we put our draw command in a loop!
	regl.frame(function(context) {
	drawTriangle();
	});