gl.canvas
hexasphere = newHexasphere(1, 16, 0.9);
drawHexagons = gl.regl({
vert: `
precision mediump float;
attribute vec3 position;
uniform mat4 model, view, projection;
void main () {
gl_Position = projection * view * model * vec4(position, 1);
}
`,
frag: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color; // vec4(0.2, 0.3, 0.8, 1);
}
`,
attributes: {
position: drawHexagonsArg.position,
},
uniforms: {
model: mat4.identity([]),
view: gl.regl.prop('view'),
projection: ({ viewportWidth, viewportHeight }) =>
mat4.perspective([],
Math.PI / 2,
viewportWidth / viewportHeight,
0.01,
1000),
color: gl.regl.prop("color"),
},
elements: gl.regl.prop("elements"),
cull: {
enable: true,
face: 'back'
},
})
drawHexagonsArg = {
const positions = []
const elements = []
let offset = 0;
for (const tile of hexasphere.tiles) {
const position = tile.boundary.map(p => ([p.x, p.y, p.z]))
positions.push(...position)
const els = [
[0, 1, 2],
[0, 2, 3],
[0, 3, 4],
];
if (tile.boundary.length > 5) {
els.push([0, 4, 5])
}
elements.push({
data: new Uint16Array(els.map(xs => xs.map(x => x + offset)).flat(10))
})
offset += position.length
}
// console.log(elements[0], elements[1])
return {
position: gl.regl.buffer(positions),
elements: elements.map(gl.regl.elements)
}
}
function draw (t) {
gl.regl.clear({
color: [1, 1, 1, 1],
depth: 1,
})
const view = mat4.lookAt([],
[1.5 * Math.cos(t), 1.5 * Math.sin(t), 0],
[0, 0, 0],
[0, 0, 1])
// drawSphere({
// view,
// })
drawHexagons(drawHexagonsArg.elements.map((elements, i) => ({
view,
elements,
color: [
Math.cos(t * 10 + i),
Math.sin(t * 7 + i),
(Math.sin(t * 4 + i) + Math.cos(t + i)) / 2,
1
],
})))
}
draw(now / 3000)
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.
