Public
Edited
Feb 4, 2024
Importers
{
const s1 = s(v(-6, -3), v(-1, -1));
const subsegs1 = densify(s1, 0.5);
const s2 = s(v(0, 3), v(6, 2));
const subsegs2 = densify(s2, 1);
const width = 300;
const height = 200;
const scale = 20;
const origin = v(width / 2, height / 2);
const ctx = DOM.context2d(width, height);
const fig = new Figure({ ctx, scale, origin, width, height });
for (const subseg of subsegs1) {
fig.drawSegment(subseg, 'green');
}
for (const subseg of subsegs2) {
fig.drawSegment(subseg, 'blue');
}
return fig.canvas();
}
{
const s1 = s(v(-6, -3), v(-1, -1));
return densify(s1, 0.5).map(s => [s.p1, s.p2]);
}
function densify(segment, maxLength) {
if (segment.length <= maxLength) {
return [segment];
}
const subsegmentCount = Math.ceil(segment.length / maxLength);
const subsegmentDir = segment.dir.divide(subsegmentCount);
const subsegments = [];
for (let i = 0; i < subsegmentCount; i++) {
const sp1 = segment.p1.add(subsegmentDir.multiply(i));
// if this is the last subsegment, we set its endpoint to the endpoint of
// the original segment to avoid it subtly changing due to floating point rounding error
const sp2 = i === subsegmentCount - 1
? segment.p2
: sp1.add(subsegmentDir);
const subsegment = new Segment(sp1, sp2);
subsegments.push(subsegment);
}
return subsegments;
}
import { Segment, Vector, Figure, s, v } from '98496f10eb8a3c09'
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.
