Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
Public
Edited
Nov 8
1 star
Also listed in…
regl
canvas = DOM.canvas(height, height)
regl.frame(() => {
//////////// update data via buffer
const step = +document.querySelector("#step").value;
data.forEach((d) => {
const targetR = step === 1 ? d.radius : d.radius2;
d.currentR += 0.002 * Math.sign(targetR - d.currentR);
});
updateBuffer(
currentRBuffer,
data.map((d) => d.currentR)
);
//////////// update rendering
regl.clear({
color: [0, 0, 0, 1],
depth: 1
});
drawParticles();
})
updateBuffer = (buffer, data) => {
buffer(data);
}
drawParticles = regl({
vert: `
precision mediump float;
attribute float theta, speed, currentR;
varying float cntR;
uniform float pointSize;
uniform float time;
void main() {
cntR = currentR;
float xPos = currentR * cos(-time * speed + theta);
float yPos = currentR * sin(-time * speed + theta);
gl_Position = vec4(xPos, yPos, 0, 1.0);
gl_PointSize = currentR < 0.5 ? 2.6 : pointSize;
}`,
frag: `
precision mediump float;
varying float cntR;
void main() {
gl_FragColor = cntR >= 0.5 ? vec4(1, 1, 1, 0.88) : vec4(0.682, 0.859, 0.278, 0.95);
}`,
attributes: {
// radius: radiusBuffer,
theta: thetaBuffer,
speed: speedBuffer,
// radius2: radius2Buffer,
currentR: currentRBuffer
},
uniforms: {
pointSize: 1.3,
time: ({ tick }) => tick * 0.4
},
count: count,
primitive: "points",
blend: {
enable: true,
func: {
src: "src alpha",
dst: "one minus src alpha"
},
equation: "add",
color: [0, 0, 0, 0]
}
// blend: {
// enable: true,
// func: {
// srcRGB: "src alpha",
// srcAlpha: "src alpha",
// dstRGB: "one minus src alpha",
// dstAlpha: "one minus src alpha"
// },
// equation: {
// rgb: "add",
// alpha: "add"
// },
// color: [0, 0, 0, 0]
// }
})
height = 480
radius = 0.70
currentRBuffer = regl.buffer(data.map((d) => d.currentR))
radius2Buffer = regl.buffer(data.map(d => d.radius2));
speedBuffer = regl.buffer(data.map(d => d.speed));
thetaBuffer = regl.buffer(data.map(d => d.theta));
radiusBuffer = regl.buffer(data.map(d => d.radius));
data = d3.range(count).map((i) => {
const currentR = radius + (Math.random() * 2 - 1) * 0.1;
return {
radius: currentR,
theta: 2 * Math.PI * Math.random(), // y0 고정
speed: Math.random() * 0.02,
radius2:
i % 7 < 1
? 0.35 + (Math.random() * 2 - 1) * 0.1
: radius + (Math.random() * 2 - 1) * 0.1,
currentR: currentR
};
})
count = 3000
regl = (await import("https://cdn.skypack.dev/regl@2")).default({ canvas })
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.
