{
const canvas = DOM.canvas(500, 500);
const glii = new Glii(canvas);
const pos = new glii.SingleAttribute({ glslType: "vec2" });
const rgb = new glii.SingleAttribute({ glslType: "vec3" });
rgb.set(0, [1, 0, 0]); // red
rgb.set(1, [1, 1, 0]); // yellow
rgb.set(2, [0, 1, 0]); // green
rgb.set(3, [0, 1, 1]); // cyan
rgb.set(4, [0, 0, 1]); // blue
rgb.set(5, [1, 0, 1]); // purple
pos.set(6, [0, 0]);
rgb.set(6, [1, 1, 1]); // White
pos.set(7, [0, 0]);
rgb.set(7, [0, 0, 0]); // Black
const indices = new glii.TriangleIndices();
const radsPer60deg = Math.PI / 3;
for (let i = 0; i < 6; i++) {
pos.set(i, [1, i * radsPer60deg]);
new indices.Triangle().setVertices(i, (i + 1) % 6, 6 + (i % 2));
}
const clear = new glii.WebGL1Clear({ color: [0.2, 0.2, 0.2, 0.0] });
const program = new glii.WebGL1Program({
vertexShaderSource: `
void main() {
vColor = aColor;
gl_Position = vec4(
cos(aPolarCoord.y) * aPolarCoord.x ,
sin(aPolarCoord.y) * aPolarCoord.x ,
1.0,
1.0
);
// gl_PointSize = 32.0; // In framebuffer pixels
}`,
varyings: { vColor: "vec3" },
fragmentShaderSource: `
void main() {
gl_FragColor = vec4(vColor, 1.0);
}`,
indexBuffer: indices,
attributes: {
aPolarCoord: pos,
aColor: rgb
}
});
// clear.run();
program.run();
return canvas;
}
Glii = import("https://cdn.skypack.dev/glii").then((d) => d.default)
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.
