Computer Graphics & Visualization @ufrj.br
Published
Edited
Feb 4, 2021
1 star
showTree(testTree)
testData = [...balls(2500, ...radiusRange)]
testTree = {
let tree = bottomUp(testData);
tree.computeEnclosingCircles();
return tree;
}
testTree.findInCircle(new Ball(0, 0, 0.4))
function showTree(tree) {
let width = 600;
let canvas = DOM.canvas(width, width);
let ctx = canvas.getContext("2d");
let mat2d = glmatrix.mat2d;
let transform = mat2d.fromScaling([], [width, width]);
mat2d.translate(transform, transform, [0.25, 0.25]);
mat2d.scale(transform, transform, [0.5, 0.5]);
let inverse = mat2d.invert([], transform);
let queryBall = new Ball(0, 0, radius);
let refresh = () => {
ctx.save();
ctx.clearRect(0, 0, width, width);
ctx.lineWidth = 1 / width;
ctx.strokeStyle = '#00000080';
ctx.fillStyle = '#00000000';
ctx.setTransform(...transform);
let result = tree.findInCircle(queryBall);
for (let node of tree.visited) node.entry.draw(ctx);
ctx.fillStyle = '#000000ff';
for (let ball of result) ball.draw(ctx);
ctx.strokeStyle = 'red';
ctx.fillStyle = '#ff000020';
ctx.lineWidth = 3 / width;
queryBall.draw(ctx);
ctx.restore();
ctx.fillText(`${tree.visited.length} nodes visited`, 10, 20);
ctx.fillText(`${result.length} leaf nodes found`, 10, 40);
};
canvas.onmousemove = canvas.click = e => {
let [x, y] = vec2.transformMat2d([], [e.offsetX, e.offsetY], inverse);
queryBall = new Ball(x, y, radius);
refresh();
};
refresh();
return canvas;
}
import {
Ball,
BT,
bottomUp,
kdconstruct,
balls
} from "@esperanc/omohundro-balltree-construction-algorithms"
glmatrix = import('https://unpkg.com/gl-matrix@3.3.0/esm/index.js?module')
vec2 = glmatrix.vec2
import { slider } from "@jashkenas/inputs"
import { rangeSlider } from "@mootari/range-slider"
d3 = require("d3@6")
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.
