Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
precision lowp float;
varying vec3 fragColor;
void main() {
if (length(gl_PointCoord.xy - 0.5) > 0.5) {
discard;
}
gl_FragColor = vec4(fragColor, 1);
}
require('./scatter');
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
})()
{
"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"
}
}
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()
})
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)
#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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.