Public
Edited
Sep 10, 2023
Insert cell
md`# ray and segment intersect #151`
Insert cell
{
const { point, vector, box, segment, ray } = Flatten;

let scene_box = box(0, 0, width, height);
// Define data model
let model = {
shape: segment(point(636, 281.5), point(336, 281.5)),
ray: ray(point(486, 271), vector(-71.147335, -70.2713)),
intersection_points: undefined,
get_intersections: function () {
this.intersection_points = this.ray.intersect(this.shape);
},
svg: function () {
let svg = this.shape.svg();
svg += this.shape.vertices.map((pt) => pt.svg({ fill: "blue" }));
svg += this.ray.svg(scene_box, { strokeDasharray: 1 });
svg += this.ray.start.svg({ fill: "red" });
svg += this.intersection_points.map((pt) => pt.svg({ fill: "green" }));
return svg;
}
};

model.get_intersections();

// Create stage and display svg
const stage = d3.select(DOM.svg(width, height));
stage.html(model.svg());

return stage.node();
}
Insert cell
height = 400
Insert cell
Flatten = require("@flatten-js/core@1.4.3")
Insert cell

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.
Learn more