Public
Edited
Jun 5, 2024
Insert cell
Insert cell
Insert cell
Insert cell
canvas = DOM.canvas(width, 500)
Insert cell
regl.clear({
color: [1, 1, 1, 1],
depth: 1
})
Insert cell
// lineWidth = Math.max(3, regl.limits.lineWidthDims[1])
// lineWidth = Math.min(1, Math.max(3, regl.limits.lineWidthDims[1]))
Insert cell
drawLines()
Insert cell
drawLines = regl({
vert: `
precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,

frag: `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,

attributes: {
//5 개의 정점 위치
position: linePos
},

uniforms: {
color: [1, 0, 0, 1]
},

elements: [
[0, 1], // 0번 정점과 1번 정점을 연결
[1, 2], // 1번 정점과 2번 정점을 연결
[2, 3], // 2번 정점과 3번 정점을 연결
[3, 4], // 3번 정점과 4번 정점을 연결
[0, 3],
[0, 2]
// [4, 0] // 4번 정점과 0번 정점을 연결
],

lineWidth: 1
})
Insert cell
Insert cell
linePos = new Array(5).fill().map((_, i) => {
var theta = (2.0 * Math.PI * i) / 5;
return [Math.sin(theta), Math.cos(theta)];
})
Insert cell
Insert cell
regl = (await import("https://cdn.skypack.dev/regl@2")).default({ canvas })
Insert cell

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.
Learn more