Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
<p>Scale: 0 <input type="range" id="scale-input" min="0" max="1" step="0.01" /> 1</p>
canvas = DOM.canvas(width, 460)
regl.frame(function () {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
});
drawTriangle({
scale: +document.querySelector("#scale-input").value
});
})
drawTriangle = regl({
vert: `
precision mediump float;
uniform float scale;
attribute vec2 position;
attribute vec3 color;
varying vec3 fcolor;
void main () {
fcolor = color;
gl_Position = vec4(scale * position, 0, 1); // scale (0 - 1) * position 정점
}`,
frag: `
precision mediump float;
varying vec3 fcolor;
void main () {
gl_FragColor = vec4(sqrt(fcolor), 1); // sqrt 각 성분의 제곱근을 계산 (sqrt(0.25) = 0.5) -> 색상이 원래 값보다 더 밝게 나타나게 됨
// gl_FragColor = vec4(fcolor, 1);
}`,
attributes: {
position: [
[1, 0], // point 1
[0, 1], // point 2
[-1, -1] // point 3
],
color: [
// color for each point
[1, 0, 0], // red -> point 1
[0, 1, 0], // green -> point 2
[0, 0, 1] // blue -> point 3
]
},
uniforms: {
scale: regl.prop("scale")
},
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.
