Computer Graphics & Visualization @ufrj.br
Published
Edited
Feb 21, 2022
9 stars
display = {
buttons;
const ctx = DOM.context2d(width / 2, height, 1);
const canvas = ctx.canvas;
const cellSize = 10;
const color = (value) => {
value *= 255;
return `rgb(${value},${value},${value})`;
};
const draw = () => {
ctx.clearRect(0, 0, width / 2, height);
for (let x = 0; x < width; x += cellSize) {
for (let y = 0; y < height; y += cellSize) {
let v = mutable interpolator([x + cellSize / 2, y + cellSize / 2]);
ctx.fillStyle = color(v[0]);
ctx.fillRect(x, y, cellSize, cellSize);
}
}
ctx.strokeStyle = "red";
for (let [[x, y], [v]] of d3.zip(points, values)) {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.stroke();
}
};
const compute_rbf = () => {
mutable interpolator = RBF(points, values, kernel);
};
canvas.onclick = (e) => {
let [x, y] = [e.offsetX, e.offsetY];
if (e.button == 0) {
points.push([x, y]);
values.push([viewof defValue.value]);
} else reset();
compute_rbf();
draw();
};
compute_rbf();
draw();
return canvas;
}
surface = show_x3d(
[
create_surface(
(x, y) => [x, y, interpolator([x, y])[0] * 300],
[0, width / 2],
[0, height]
)
],
{ width: width / 2, height }
)
mutable interpolator = (p) => [1]
height = width / 2
points = []
values = []
function reset() {
points.length = 0;
for (let p of [
[0, 0],
[width / 2, 0],
[width / 2, height],
[0, height]
])
points.push(p);
values.length = 0;
for (let v of [[1], [0], [0], [1]]) values.push(v);
}
// Initialization
reset()
Dependencies
import { RBF } from "@esperanc/deformation-with-rbfs"
import { show_x3d, create_surface } from "@mcmcclur/parametric-surfaces"
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.
