Computer Graphics & Visualization @ufrj.br
Published
Edited
Dec 19, 2021
Importers
1 star
viewof result = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 500])
.style("overflow", "visible")
.property("value", subject);
const subjectPath = svg
.append("path")
.attr("fill", "blue")
.attr("fill-opacity", 0.1)
.attr("stroke", "blue");
const clipPath = svg
.append("path")
.attr("fill", "red")
.attr("fill-opacity", 0.1)
.attr("stroke", "red");
const clippedPath = svg
.append("path")
.attr("fill", "lightgray")
.attr("stroke", "black")
.attr("stroke-width", 1.5);
const point = svg
.append("g")
.attr("cursor", "move")
.attr("pointer-events", "all")
.attr("stroke", "transparent")
.attr("stroke-width", 30)
.selectAll("circle")
.data(subject.concat(mask))
.join("circle")
.attr("fill", (_, i) => (i < subject.length ? "blue" : "red"))
.attr("r", 4)
.call(
d3
.drag()
.subject((event, [x, y]) => ({ x, y }))
.on("drag", dragged)
);
update();
function dragged(event, d) {
d[0] = event.x;
d[1] = event.y;
update();
svg.dispatch("input");
}
function update() {
const clipped = polygonClip(mask, subject);
point.attr("cx", (d) => d[0]).attr("cy", (d) => d[1]);
subjectPath.attr("d", `M${subject.join("L")}Z`);
clipPath.attr("d", `M${mask.join("L")}Z`);
clippedPath.attr("d", clipped && `M${clipped.join("L")}Z`);
//clipPath.attr("stroke-dasharray", polygonConvex(clip) ? null : [4, 4]);
}
return svg.node();
}
result
mask = [
[210, 90],
[110, 400],
[420, 400],
[490, 250]
]
subject = [
[79, 200],
[266, 100],
[452, 200],
[359, 450],
[172, 420]
]
Implementation
//
// Given a polygon poly and line a-b, splits it into two polylines -- left and right --
// so that all points p in 'left' satisfy Or(a,b,p) >= 0 and all points q in 'right'
// satisfy Or(a,b,q) <= 0
//
function split(poly, a, b) {
let left = [],
right = [];
let last = poly[poly.length - 1];
let lastOr = vec2.orient(a, b, last);
const pushPoly = (poly, point) => {
// Push point into poly only if at a minimum distance from the last point
if (
poly.length == 0 ||
vec2.sqrDist(poly[poly.length - 1], point) > Number.EPSILON
)
poly.push(point);
};
for (let p of poly) {
let or = vec2.orient(a, b, p);
if (or != lastOr) {
let q = vec2.lineIntersection([], a, b, last, p);
pushPoly(left, q);
pushPoly(right, [...q]); // A copy
}
if (or > 0) pushPoly(left, p);
else if (or < 0) pushPoly(right, p);
[last, lastOr] = [p, or];
}
if (
left.length > 1 &&
vec2.sqrDist(left[left.length - 1], left[0]) <= Number.EPSILON
)
left.pop();
if (
right.length > 1 &&
vec2.sqrDist(right[right.length - 1], right[0]) <= Number.EPSILON
)
right.pop();
return [left, right];
}
//
// Clips a general polygon poly against a convex polygon 'mask'.
// Assumes that mask has a *right-handed circulation*
//
function clip(poly, mask) {
let last = mask[mask.length - 1];
for (let p of mask) {
poly = split(poly, last, p)[0];
if (poly.length < 2) return poly;
last = p;
}
return poly;
}
//
// Just like clip, except that the mask is the first argument and
// a test is made to make sure that the mask has a positive circulation
//
function polygonClip(mask, subject) {
if (vec2.orient(mask[0], mask[1], mask[2]) < 0) mask.reverse();
return clip(subject, mask);
}
clip(
[
[0, 0],
[1, 0],
[1, 1],
[0, 1]
],
[
[0, 0],
[1, 0],
[1, 1],
[0, 1]
]
)
clip(
[
[0, 0],
[1, 0],
[1, 1],
[0, 1]
],
[
[0.5, 0.5],
[1.5, 0.5],
[1.5, 1.5],
[0.5, 1.5]
]
)
clip(
[
[0, 0],
[1, 0],
[1, 1],
[0, 1]
],
[
[1.5, 1.5],
[2.5, 1.5],
[2.5, 2.5],
[1.5, 2.5]
]
)
split(
[
[0, 0],
[1, 1]
],
[0.5, 0],
[0.5, 1]
)
split(
[
[0, 0],
[1, 0],
[1, 1],
[0, 1]
],
[0.5, 0],
[0.5, 1]
)
split(
[
[0, 0],
[1, 0],
[1, 1],
[0, 1]
],
[0, 0],
[1, 1]
)
import { vec2 } from "@esperanc/vec2-utils"
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.
