Computer Graphics & Visualization @ufrj.br
Published
Edited
Apr 23, 2022
5 forks
1 star
isoscelesDemo = {
const demo = html`<canvas width=500 height=500 style="border:1px solid gray">`;
const ctx = demo.getContext("2d");
const iso = [
[200, 300],
[300, 200]
];
const update = () => {
ctx.clearRect(0, 0, 500, 500);
ctx.fillStyle = ctx.strokeStyle = "black";
for (let p of iso) {
ctx.beginPath();
ctx.arc(...p, 5, 0, Math.PI * 2);
ctx.fill();
}
ctx.beginPath();
for (let p of isosceles(...iso)) {
ctx.lineTo(...p);
}
ctx.closePath();
ctx.stroke();
};
update();
let prevMouse = null;
const dragBase = (e) => {
let mouse = [e.offsetX, e.offsetY];
let [base, vtx] = iso;
let v = vec2.sub([], vtx, base);
let delta = vec2.sub([], mouse, prevMouse);
prevMouse = mouse;
vec2.add(base, base, delta);
vec2.add(vtx, base, v);
};
const dragVtx = (e) => {
let mouse = [e.offsetX, e.offsetY];
let [base, vtx] = iso;
let delta = vec2.sub([], mouse, prevMouse);
prevMouse = mouse;
vec2.add(vtx, vtx, delta);
};
demo.onmousedown = (e) => {
const mouse = [e.offsetX, e.offsetY];
prevMouse = mouse;
demo.onmousemove = null;
for (let i of [0, 1]) {
let p = iso[i];
let d = vec2.distance(mouse, p);
if (d <= 5) {
demo.onmousemove =
i == 0
? (e) => {
dragBase(e);
update();
}
: (e) => {
dragVtx(e);
update();
};
}
}
};
demo.onmouseup = () => {
demo.onmousemove = null;
};
return demo;
}
import { vec2 } from "@esperanc/funcoes-2d-uteis"
//
// Returns the 3 vertices of an isosceles triangle
// defined by the center point of its base and the
// opposite vertex
//
function isosceles(basePoint, oppositeVertex) {
const u = vec2.sub([], basePoint, oppositeVertex);
const v = [-u[1], u[0]];
const w = [u[1], -u[0]];
return [
oppositeVertex,
vec2.add([], basePoint, v),
vec2.add([], basePoint, w)
];
}
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.
