Notebooks 2.0 is here.
{
gl.useProgram(programInfo.program);
gl.clearColor(...hex2rgb(color), 1);
gl.clear(gl.COLOR_BUFFER_BIT);
for(let i = 0; i < vertexAttributes.length; i++) {
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo[i]);
twgl.setUniforms(programInfo, uniforms[0]); // for multiple objects at once, change uniforms to the preferred center object for proper offset
twgl.drawBufferInfo(gl, bufferInfo[i]);
}
return gl.canvas;
}
vertexAttributes = {
let attributeArray = [];
for(let i = 0; i < modelURL.length; i++) {
attributeArray.push({
position: { numComponents: 3, data: modelURL[i].sc.positions },
normal: { numComponents: 3, data: modelURL[i].sc.normals }
});
}
return attributeArray;
}
extents = getExtents(vertexAttributes)
function getExtents(objectArray) {
let xmax = -Infinity; // default minimum values
let ymax = -Infinity;
let zmax = -Infinity;
let xmin = Infinity; //default maximum values
let ymin = Infinity;
let zmin = Infinity;
for(let x = 0; x < vertexAttributes.length; x++) {
let i = 0;
const vertecies = objectArray[x].position.data;
const len = vertecies.length;
for(i; i < len; i+=3) { // cycle through all vertecies for mins and maxes
if(vertecies[i] > xmax) xmax = vertecies[i]; // X
if(vertecies[i] < xmin) xmin = vertecies[i];
if(vertecies[i+1] > ymax) ymax = vertecies[i+1]; // Y
if(vertecies[i+1] < ymin) ymin = vertecies[i+1];
if(vertecies[i+2] > zmax) zmax = vertecies[i+2]; // Z
if(vertecies[i+2] < zmin) zmin = vertecies[i+2];
}
}
const modelExtents = {
min: [xmin, ymin, zmin],
max: [xmax, ymax, zmax],
center: [xmin + (xmax - xmin)/2, ymin + (ymax - ymin)/2, zmin + (zmax - zmin)/2],
diagonal: Math.sqrt((xmax - xmin)**2 + (ymax - ymin)**2 + (zmax - zmin)**2)
}
return modelExtents;
}
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.
