vlandham · September 25, 2017 01:43
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <title>Simple regl Dots Example</title>
 <body>
  <script src="https://npmcdn.com/[email protected]/dist/regl.js"></script>
 	<script src="index.js"></script>
 </body>
diff --git a/index.js b/index.js
 // 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 drawDots = regl({

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

  vert: `
  precision mediump float;
  attribute vec2 position;
  // @change acquire the pointWidth uniform
  //  this is set by the uniforms section below
  uniform float pointWidth;
  void main () {
    // @change Set gl_PointSize global to
    //  configure point size
    gl_PointSize = pointWidth;
    gl_Position = vec4(position, 0, 1);
  }`,

  attributes: {
    position: function(context, props) {
      // @change I tweaked the constants here so
      //  the dots are not off the screen
      return [
        [-1 * Math.cos(context.tick / 100), 0.2],
        [Math.sin(context.tick / 100), -0.8],
        [Math.sin(context.tick / 100), 0.8]
      ];
    }
  },

  uniforms: {
    color: function(context, props) {
      return props.color;
    },
    // @change: Add a pointWidth uniform -
    //  set by a prop
    pointWidth: regl.prop('pointWidth')
  },

  count: 3,
  // @change: Set our primitive to points
  primitive: 'points'

 })

 regl.frame(function(context) {
  drawDots({
    color: [0.208, 0.304, 1.000, 1.000],
    // @change: Pass in the pointWidth prop
    pointWidth: 10.0
  });
 });
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<title>Simple regl Dots Example</title>
	<body>
	<script src="https://npmcdn.com/[email protected]/dist/regl.js"></script>
	<script src="index.js"></script>
	</body>
	// 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 drawDots = regl({

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

	vert: `
	precision mediump float;
	attribute vec2 position;
	// @change acquire the pointWidth uniform
	// this is set by the uniforms section below
	uniform float pointWidth;
	void main () {
	// @change Set gl_PointSize global to
	// configure point size
	gl_PointSize = pointWidth;
	gl_Position = vec4(position, 0, 1);
	}`,

	attributes: {
	position: function(context, props) {
	// @change I tweaked the constants here so
	// the dots are not off the screen
	return [
	[-1 * Math.cos(context.tick / 100), 0.2],
	[Math.sin(context.tick / 100), -0.8],
	[Math.sin(context.tick / 100), 0.8]
	];
	}
	},

	uniforms: {
	color: function(context, props) {
	return props.color;
	},
	// @change: Add a pointWidth uniform -
	// set by a prop
	pointWidth: regl.prop('pointWidth')
	},

	count: 3,
	// @change: Set our primitive to points
	primitive: 'points'

	})

	regl.frame(function(context) {
	drawDots({
	color: [0.208, 0.304, 1.000, 1.000],
	// @change: Pass in the pointWidth prop
	pointWidth: 10.0
	});
	});