Computer Graphics & Visualization @ufrj.br
data = {
randomize;
const points = [],
values = [];
const rand = (min, max) => Math.random() * (max - min) + min;
const n = npoints;
for (let i = 0; i < n; i++) {
points.push([rand(-1, 1), rand(-1, 1), rand(-1, 1)]);
values.push([0]);
}
const anchorPoints = [
[-1, -1, -1],
[-1, -1, 1],
[-1, 1, -1],
[-1, 1, 1],
[1, 1, -1],
[1, 1, 1],
[1, -1, -1],
[1, -1, 1]
].map(([x, y, z]) => [2 * x, 2 * y, 2 * z]);
const dist = [];
for (let p of anchorPoints) {
let minDist = Number.MAX_VALUE;
for (let i = 0; i < n; i++) {
const q = points[i];
const d = Math.sqrt(
(p[0] - q[0]) ** 2 + (p[1] - q[1]) ** 2 + (p[2] - q[2]) ** 2
);
minDist = Math.min(d, minDist);
}
dist.push([minDist]);
}
return { points: anchorPoints.concat(points), values: dist.concat(values) };
}
rbf = RBF(data.points, data.values, kernel)
interpolant = rbf.interpolant
cubeSamples = 8
function sampleCube(n = cubeSamples) {
const delta = 2 / n;
let samples = [];
for (let i = 0; i <= n; i++) {
samples.push([]);
let x = -1 + i * delta;
for (let j = 0; j <= n; j++) {
samples[i].push([]);
let y = -1 + j * delta;
for (let k = 0; k <= n; k++) {
let z = -1 + k * delta;
samples[i][j][k] = interpolant([x, y, z])[0];
}
}
}
return samples;
}
rayMarchingApp = {
const { width: w, height: h } = rayMarchingCanvas;
const bigTriangle = new Float32Array([-5, -5, 5, -5, 0, 5]);
const app = picogl
.createApp(rayMarchingCanvas, {
premultipliedAlpha: false,
preserveDrawingBuffer: true
})
.clearColor(0.5, 0.5, 0.5, 1);
const positions = app.createVertexBuffer(picogl.FLOAT, 2, bigTriangle);
const triangleArray = app
.createVertexArray()
.vertexAttributeBuffer(0, positions);
const program = app.createProgram(vertShader, fragShader);
const drawCall = app.createDrawCall(program, triangleArray);
return { app, drawCall };
}
renderRayMarching = {
const canvas = rayMarchingCanvas;
const { app, drawCall } = rayMarchingApp;
const arcball = new Arcball(canvas);
const refresh = () => {
app.clear();
drawCall
//.uniform("u_n", data.points.length)
.uniform("u_resolution", [canvas.width, canvas.height])
.uniform("u_points[0]", data.points.flat())
.uniform("transform", arcball.transform)
.uniform("correctionPower", correctionPower)
.uniform("correctionLinear", correctionLinear)
.uniform("u_weights[0]", rbf.w[0])
.draw();
};
canvas.onmousedown = (e) =>
arcball.mousedown(e.offsetX, canvas.height - e.offsetY);
canvas.onmousemove = (e) => {
if (e.buttons) {
arcball.mousemove(e.offsetX, canvas.height - e.offsetY);
refresh();
}
};
canvas.onmouseup = (e) => arcball.mouseup();
refresh();
}
glslKernels = ({
linear: `r`,
cubic: `pow(r,3.)`,
quintic: `pow(r,5.)`,
"thin-plate": `r==0.0 ? 0.0 : r*r*log(r)`
})
picogl = require("picogl@0.17.8/build/picogl.min.js")
glmatrix = require("https://bundle.run/gl-matrix@3.3.0")
mat4 = glmatrix.mat4
vec3 = glmatrix.vec3
vec2 = glmatrix.vec2
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.
