Public
Edited
Apr 24, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
WIDTH = Math.min(600, width)
Insert cell
HEIGHT = WIDTH
Insert cell
Insert cell
A = [150, 100]
Insert cell
B = [250, 150]
Insert cell
α_degrees = 30
Insert cell
α = α_degrees * Math.PI / 180
Insert cell
extent = 500
Insert cell
Insert cell
d = [A[0] - B[0], A[1] - B[1]]
Insert cell
δ = Math.atan2(-d[0], d[1])
Insert cell
Insert cell
t = {
while (true) {
yield Math.sin(Date.now() / DURATION_MS * Math.PI);
}
}
Insert cell
ρ = t * Math.PI / 2
Insert cell
θ = ρ + δ - α/2; // Angle from horizontal
Insert cell
{
const ct = canvas.ct;
const { sin, cos } = Math;

ct.clearRect(0, 0, WIDTH, HEIGHT);

// Draw the circle
ct.beginPath();
ct.arc(
(A[0] + B[0])/2 + d[1] * cos(α),
(A[1] + B[1])/2 - d[0] * cos(α),
radius, δ+Math.PI, δ + ρ*2
);

ct.strokeStyle = "#666";
ct.stroke();

// Find the point where the lines intersect
const l = (d[0]*sin(θ) - d[1]*cos(θ)) / sin(α);
const X = [
B[0] - l*cos(θ+α),
B[1] - l*sin(θ+α),
];

// Draw the lines
ct.beginPath();
ct.moveTo(X[0] - extent*cos(θ), X[1] - extent*sin(θ));
ct.lineTo(X[0] + extent*cos(θ), X[1] + extent*sin(θ));

ct.moveTo(X[0] - extent*cos(θ+α), X[1] - extent*sin(θ+α));
ct.lineTo(X[0] + extent*cos(θ+α), X[1] + extent*sin(θ+α));

ct.lineWidth = 0.5;
ct.strokeStyle = "#999";
ct.stroke();

// Draw the intersection point
ct.beginPath();
ct.arc(X[0], X[1], 2, 0, 7);
ct.fillStyle = "#900";
ct.fill();
// Draw the chord
ct.beginPath();
ct.moveTo(A[0], A[1]);
ct.lineTo(B[0], B[1]);

ct.lineWidth = 1;
ct.strokeStyle = "blue";
ct.stroke();

// Endpoints of chord
ct.beginPath();
ct.arc(A[0], A[1], 5, 0, 7);
ct.arc(B[0], B[1], 5, 0, 7);
ct.fillStyle = "#333";
ct.fill();

return this || html`(<i>the drawing function</i>)`;
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

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