canvas = html`<canvas id='canvas00' width=${width} height=${height}>`
{
// Init buffers
let cubeVertexBuffer, cubeIndexBuffer, cubeColorBuffer;
cubeVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
let vertices = [
0.5, 0.5, -.5,
-0.5, 0.5, -.5,
-0.5, -0.5, -.5,
0.5, -0.5, -.5,
0.5, 0.5, .5,
-0.5, 0.5, .5,
-0.5, -0.5, .5,
0.5, -0.5, .5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
cubeVertexBuffer.itemSize = 3;
cubeVertexBuffer.numItems = 8;
let indices = [
0,1,2, 0,2,3,
0,3,7, 0,7,4,
6,2,3, 6,3,7,
5,1,2, 5,2,6,
5,1,0, 5,0,4,
5,6,7, 5,7,4];
indices = [0,1,2, 0,2,3, 0,3,7, 0, 7,4, 6,2,3,6,3,7,5,1,2, 5,2,6,5,1,0,5,0,4,5,6,7,5,7,4];
cubeIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
cubeIndexBuffer.itemsize = 1;
cubeIndexBuffer.numItems = 36; //36 indices, 3 per triangle, so 12 triangles
cubeColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeColorBuffer);
let colors = [
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0,
1.0, 0.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
cubeColorBuffer.itemSize = 3;
cubeColorBuffer.numItems = 8;
// We enable depth testing to prevent surfaces that are hidden by closer geometry from being rendered
// This is generally a good idea once you enter the third dimension
gl.enable(gl.DEPTH_TEST);
draw(cubeVertexBuffer, cubeIndexBuffer, cubeColorBuffer);
return "OK"
}
mutable lastMouseX = 0
mutable lastMouseY = 0
mutable angle1 = 0.0
mutable angle2 = 0.0
mutable listenerIsSet = false
{
if (listenerIsSet)
return;
canvas.addEventListener('mousemove', onMouseMove, false);
mutable listenerIsSet = true;
}
onMouseMove = (event) => {
let mouseX = event.clientX;
let mouseY = event.clientY;
let diffX = mouseX - lastMouseX;
let diffY = mouseY - lastMouseY;
mutable angle1 = angle1 + diffX/2.5;
mutable angle2 = angle2 - diffY/2.5;
mutable lastMouseX = mouseX;
mutable lastMouseY = mouseY;
}
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.
