{
// simulation
const sim = new AA.Simulation({width: 900, height: 500})
.vis({baseColor: 0xffffff});
invalidation.then(() => sim.end());
// line_1
const line_1 = new AA.Polyline(points);
// line_2: simplify line_1, show points at 100 along and at halfway
const line_2 = line_1.simplify(4).transform({translate: [200, 0]});
for (let {x, y} of [line_2.pointAt(100), line_2.pointAtFrac(0.5)]) {
new AA.Actor({x, y, radius: 7})
.vis({tint: AV.colors.orange})
.addTo(sim);
}
// line_3: equally-spaced points on line_2
const line_3 = line_2.walk(50).transform({translate: [200, 0]});
for (let {x, y} of line_3.pts) {
new AA.Actor({x, y, radius: 3.5})
.vis({tint: AV.colors.blue})
.addTo(sim);
}
// line_4: shift line_3, show nearest points
const line_4 = line_3.transform({translate: [200, 0]});
const nearest = sim.registerPolylines(line_4);
for (let pt of AA.gridInRect({xMin: 650, xMax: 750, yMin: 50, yMax: 450}, {n: 52})) {
const linePt = nearest(pt).point;
const ac = new AA.Actor({x: pt.x, y: pt.y, radius: 3.5, maxSpeed: 1})
.vis({tint: AV.colors.red})
.addTo(sim);
ac.steer.set('to-nearest', {
behavior: 'seek',
target: ac => sim.frame(300, 2) ? pt : linePt,
slow: 5
});
}
// vis
const textOps = { fontName: 'Swansea', fontSize: 16, maxWidth: 200, align: 'left', yAnchor: 0 };
return AV.visObs(sim, {
images: ['https://cdn.jsdelivr.net/gh/gjmcn/sprites/bitmap-fonts-96/swansea.xml'],
afterSetup: (sim, app) => {
app.stage.addChild(AV.line(line_1.pts, {width: 2}));
app.stage.addChild(AV.text('Line 1', 100, 10, textOps));
app.stage.addChild(AV.line(line_2.pts, {width: 2}));
app.stage.addChild(AV.text('Line 2: line 1 simplified; points at 100 and halfway', 300, 10, textOps));
app.stage.addChild(AV.line(line_3.pts, {width: 2, alpha: 0.5}));
app.stage.addChild(AV.text('Line 3: 50 equally spaced points from line 2', 500, 10, textOps));
app.stage.addChild(AV.line(line_4.pts, {width: 2, alpha: 0.5}));
app.stage.addChild(AV.text('Nearest points on line 3', 700, 10, textOps));
}
});
}
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.
