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
];
})
)
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.