Computer Graphics & Visualization @ufrj.br
Published
Edited
Dec 26, 2020
1 fork
6 stars
mutable params = []
obj = {
let base = {cube,tetrahedron,octahedron,icosahedron,dodecahedron} [initialSolid];
let interp = {};
for (let parm in extCCparameters) {
let list = extCCparameters[parm].split(",").map(x=>+x)
interp[parm] = interpolator (...list)
}
return function (frame) {
let u = frame/(frames-1);
let mesh = base;
for (let i = 0; i < extCCiterations;i++) {
mutable params = [interp.wf(u),interp.we(u),interp.wp(u),
interp.w1(u),interp.w2(u),interp.w3(u),interp.w4(u)]
mesh = extendedCatmull(mesh,... mutable params);
}
return catmull(mesh,stdCCiterations)
}
}
blitText = {
let [w, h] = [canvas.width, canvas.height];
let ctx = DOM.context2d(w, 30, 1);
ctx.fillStyle = 'black';
ctx.font = '12px sans-serif';
return function(text, data) {
ctx.clearRect(0, 0, w, 30);
ctx.fillText(text, 4, 14);
let txtData = ctx.getImageData(0, 0, w, 30).data;
for (let i = 0; i < txtData.length; i += 4) {
let alpha = txtData[i + 3];
if (alpha > 0) {
data[i] = txtData[i];
data[i + 1] = txtData[i + 1];
data[i + 2] = txtData[i + 2];
data[i + 3] = alpha;
}
}
};
}
computeFrameData = {
// Usage of this buffer is synchronous so that we may reuse it from frame to frame
const data = new Uint8Array(canvas.width * canvas.height * 4);
let view = mat4.lookAt([], [0, 0, 4], [0, 0, 0], [0, 1, 0]);
let projection = mat4.perspective([], (45 * Math.PI) / 180, 1, 0.01, 100);
let model = mat4.identity([]);
let xrot = interpolator(
(rot.xStart / 180) * Math.PI,
(rot.xEnd / 180) * Math.PI
);
let yrot = interpolator(
(rot.yStart / 180) * Math.PI,
(rot.yEnd / 180) * Math.PI
);
let drawFunction = function(obj) {
let triMesh = triangleMesh(obj, false);
let drawFaces = makeTriMeshDraw(triMesh);
let scaleFactor = Math.sqrt(3) / obj.radius;
return function(model, view, projection) {
regl.clear({
color: [0.9, 0.9, 0.9, 1.0],
depth: 1
});
let conf = {
modelview: mat4.mul([], view, model),
projection,
scaleFactor
};
drawFaces(conf);
};
};
return function computeFrameData(frame) {
regl.poll();
let u = frame / frames;
let model = mat4.mul(
[],
mat4.fromXRotation([], xrot(u)),
mat4.fromYRotation([], yrot(u))
);
let draw = drawFunction(obj(frame));
draw(model, view, projection);
regl.read(data);
if (renderParam) blitText(mutable params.map(x => x.toFixed(3)), data);
return data; // (Alternatively, Promise.resolve(data) or make this an async function)
};
}
function interpolator (...values) {
let n = values.length;
let points = [Vec(values[0],0),...values.map(v=>Vec(v,0)),Vec(values[n-1],0)];
let cr = new CatmullRom(...points);
return u=>cr.point(u*(n-1)).x
}
import { encodeMP4 } from '@rreusser/h264-mp4-encoder'
import {canvas, Mesh, cube, tetrahedron, octahedron, dodecahedron, icosahedron,
extendedCatmull, catmull, dooSabin,
regl, triangleMesh, makeTriMeshDraw, vec3, mat4 } from "21a764bb17a81fd5"
import { Vec, CatmullRom } from "@esperanc/2d-geometry-utils"
import {
select,
text,
slider,
number,
button,
checkbox
} from "@jashkenas/inputs"
import {tabbed,paged,combo} from "@esperanc/aggregated-inputs"
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.
