A series of hacks. Previously @GitHub.
Published
Edited
May 7, 2018
3 forks
25 stars
{
return regl.frame(({ tick }) => {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
});
drawPoints({ points });
})
}
drawPoints = regl({
depth: { enable: false },
stencil: { enable: false },
frag: `
precision mediump float;
varying vec4 fill;
void main() {
vec2 cxy = 2.0 * gl_PointCoord - 1.0;
float r = dot(cxy, cxy);
if (r > 1.0) discard;
gl_FragColor = vec4(fill);
}
`,
vert: `
precision mediump float;
attribute vec2 position;
attribute vec2 velocity;
attribute vec4 color;
uniform float tick;
varying vec4 fill;
void main() {
vec2 newpos = vec2(position.x + velocity.x * tick, position.y + velocity.y * tick);
gl_PointSize = 2.0;
gl_Position = vec4(newpos, 0, 1);
fill = color;
}
`,
attributes: {
// stride represents the byte length of the buffer (GL_FLOAT is 4.0 bytes)
// offset represents the byte offset used to find the target information
// Starting x,y position of each point
position: {
buffer: points,
stride: vertSize,
offset: 0
},
// The x,y travel velocity
velocity: {
buffer: points,
stride: vertSize,
offset: 8
},
// Frag color
color: {
buffer: points,
stride: vertSize,
offset: 16
}
},
uniforms: {
tick: ({ tick }) => tick
},
// specify the number of points to draw
count: numPoints,
// specify that each vertex is a point (not part of a mesh)
primitive: "points"
})
points = {
// create initial set of points
return regl.buffer(
Array(numPoints)
.fill()
.map(() => {
return [
rng(), // x
rng(), // y
rngv(), // x velocity
rngv(), // y velocity
Math.random(), // red
Math.random(), // green
0.5, // blue
1.0 // alpha
];
})
)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
