frag.glsl

precision lowp float;
varying vec3 fragColor;
void main() {
  if (length(gl_PointCoord.xy - 0.5) > 0.5) {
    discard;
  }
  gl_FragColor = vec4(fragColor, 1);
}

index.js

require('./scatter');

kali.js

const regl = require('regl')()

var COUNT = 75;
var elements = [];
for (var i = 0; i < COUNT - 1; i++) {
  for (var j = i + 1; j < COUNT; j++) {
    elements.push([i, j]);
  }
}

var positions = (new Array(COUNT)).fill().map(function (x, i) {
  var theta = 2.0 * Math.PI * i / COUNT
  return [ Math.sin(theta), Math.cos(theta) ]
});

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

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: regl.buffer(positions)
  },

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

  elements: regl.elements(elements),

  lineWidth: 1
})()

package.json

{
  "name": "dvd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "budo index.js --live -o -- -t [ babelify --extensions .babel ] -t glslify",
    "start2": "budo index.js -v --live --host localhost -- -t babelify -t glslify | garnish",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "beefy": "^2.1.6",
    "browserify": "^13.0.1",
    "budo": "^8.2.2",
    "garnish": "^5.2.0",
    "glslify": "^5.0.2",
    "watchify": "^3.7.0"
  },
  "dependencies": {
    "gl-mat4": "^1.1.4",
    "glsl-easings": "^1.0.0",
    "hsv2rgb": "^1.1.0",
    "regl": "^0.4.0"
  }
}

points.js

const regl = require('../regl')()
const mat4 = require('gl-mat4')
const hsv2rgb = require('hsv2rgb')

const NUM_POINTS = 5 * 1e4
const VERT_SIZE = 4 * (3 + 3 + 3)

const pointBuffer = regl.buffer(Array(NUM_POINTS).fill().map(function () {
  const color = hsv2rgb(Math.random() * 360, 0.4, 1)
  return [
    // freq
    Math.random() * 10,
    Math.random() * 10,
    Math.random() * 10,
    // phase
    2.0 * Math.PI * Math.random(),
    2.0 * Math.PI * Math.random(),
    2.0 * Math.PI * Math.random(),
    // color
    color[0] / 255, color[1] / 255, color[2] / 255
  ]
}))

const drawParticles = regl({
  vert: `
  precision mediump float;
  attribute vec4 freq, phase;
  attribute vec3 color;
  uniform float time;
  uniform mat4 view, projection;
  varying vec3 fragColor;
  void main() {
    vec2 position = 8.0 * cos(freq.xy * time);
    gl_PointSize = 2.4 * (1.0 + cos(freq.z * time + phase.z));
    gl_Position = projection * view * vec4(position, 0, 1);
    fragColor = color;
  }`,

  frag: `
  precision lowp float;
  varying vec3 fragColor;
  void main() {
    if (length(gl_PointCoord.xy - 0.5) > 0.5) {
      discard;
    }
    gl_FragColor = vec4(fragColor, 1);
  }`,

  attributes: {
    freq: {
      buffer: pointBuffer,
      stride: VERT_SIZE,
      offset: 0
    },
    phase: {
      buffer: pointBuffer,
      stride: VERT_SIZE,
      offset: 12
    },
    color: {
      buffer: pointBuffer,
      stride: VERT_SIZE,
      offset: 24
    }
  },

  uniforms: {
    view: (props, {count}) => {
      const t = count * 0.0007
      return mat4.lookAt([],
        [0, 0.0, 35],
        [0, 0, 0],
        [0, 1, 0])
    },
    projection: (props, {viewportWidth, viewportHeight}) => {
      return mat4.perspective([],
        Math.PI / 6,
        viewportWidth / viewportHeight,
        0.1,
        1000)
    },
    time: (props, {count}) => {
      return count * 0.001
    }
  },

  count: NUM_POINTS,

  primitive: 'points'
})

regl.frame((props, context) => {
  regl.clear({
    depth: 1,
    color: [255, 255, 255, 255]
  })

  drawParticles()
})

scatter.js

var glslify = require('glslify')

const regl = require('../regl')()
const mat4 = require('gl-mat4')
const hsv2rgb = require('hsv2rgb')

const NUM_POINTS = 5 * 1e5
const VERT_SIZE = 4 * (2 + 3)


const colors = Array(NUM_POINTS).fill().map(function () {
  const c = hsv2rgb(Math.random() * 360, 0.4, 1)
  return [c[0] / 255, c[1] / 255, c[2] / 255 ]
})

let currentPoints = Array(NUM_POINTS).fill().map(function () {
  return [
    // position
    Math.random() * 2 - 1,
    Math.random() * 2 - 1
  ]
})
let prevPoints = currentPoints;

let positions = regl.buffer({
  usage: 'dynamic',
  data: currentPoints
})

let prevPositions = regl.buffer({
  usage: 'dynamic',
  data: prevPoints
})

const updateData = () => {
  prevPoints = currentPoints;
  currentPoints = Array(NUM_POINTS).fill().map(function () {
    return [
      // position
      Math.random() * 2 - 1,
      Math.random() * 2 - 1
    ]
  })

  t = 0;

  positions = positions({
    usage: 'dynamic',
    data: currentPoints
  })

  prevPositions = prevPositions({
    usage: 'dynamic',
    data: prevPoints
  })
}

const drawParticles = regl({
  vert: glslify('./vert.glsl'),

  frag: glslify('./frag.glsl'),

  attributes: {
    position: positions,
    prevPosition: prevPositions,
    color: regl.buffer(colors)
  },

  uniforms: {
    t: regl.prop('t'),
  },

  count: NUM_POINTS,

  primitive: 'points'
})

const durationLength = 750;
let t = 1.0;

regl.frame((props, context) => {
  regl.clear({
    depth: 1,
    color: [255, 255, 255, 255]
  })

  t = Math.min(1.0, t + (regl.stats.dt / durationLength));
  drawParticles({
    t: t
  })
})


setInterval(updateData, 1000)

vert.glsl

#pragma glslify: ease = require(glsl-easings/quadratic-in-out)

precision mediump float;
attribute vec2 position;
attribute vec2 prevPosition;
attribute vec3 color;
uniform float t;
varying vec3 fragColor;
float x;

void main() {
  gl_PointSize = 1.5;
  fragColor = color;

  if (t == 1.0) {
    gl_Position = vec4(position, 0, 1);
  } else {
    x = ease(t);
    gl_Position = vec4(prevPosition.x + (x * (position.x - prevPosition.x)), prevPosition.y + (x * (position.y - prevPosition.y)), 0, 1);
  }

}