Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
canvas = DOM.canvas(width, 460)
regl.frame(function () {
regl.clear({
color: [0, 0, 0, 1]
});
// This tells regl to execute the command once for each object
// draw 함수가 각각 다른 offset으로 여러번 호출됨
draw([
{ offset: [-1, -1] },
{ offset: [-1, 0] },
{ offset: [-1, 1] },
{ offset: [0, -1] },
{ offset: [0, 0] },
{ offset: [0, 1] },
{ offset: [1, -1] },
{ offset: [1, 0] },
{ offset: [1, 1] }
]);
})
draw = regl({
frag: `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,
//rotation matrix + translation
vert: `
precision mediump float;
attribute vec2 position;
uniform float angle;
uniform vec2 offset;
void main() {
gl_Position = vec4(
cos(angle) * position.x + sin(angle) * position.y + offset.x,
-sin(angle) * position.x + cos(angle) * position.y + offset.y, 0, 1);
}`,
attributes: {
position: [0.5, 0, 0, 0.5, 1, 1] // 3개의 정점을 정의하여 삼각형을 형성
},
uniforms: {
// the batchId parameter gives the index of the command
color: ({ tick }, props, batchId) => [
Math.sin(0.02 * ((0.1 + Math.sin(batchId)) * tick + 3.0 * batchId)),
Math.cos(0.02 * (0.02 * tick + 0.1 * batchId)),
Math.sin(0.02 * ((0.3 + Math.cos(2.0 * batchId)) * tick + 0.8 * batchId)),
1
],
angle: ({ tick }) => 0.01 * tick,
offset: regl.prop("offset")
},
depth: {
enable: false
},
count: 3
})
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.
