Public
Edited
Oct 25, 2020
3 forks
10 stars
// Intersection of circle: x² + (y - cy)² = radius² and line: y = line_y,
// i.e. solutions to x² + (line_y - cy)² = radius²
px = Math.sqrt(radius**2 - (line_y - cy)**2)
{
const ct = canvas.ct;
ct.clearRect(0, 0, WIDTH, HEIGHT);
// First draw the focus …
ct.beginPath();
ct.arc(cx, cy, 5, 0, 7);
ct.fillStyle = "blue";
ct.fill();
// … and directrix
ct.beginPath();
ct.moveTo(0, HEIGHT - DIRECTRIX_Y);
ct.lineTo(WIDTH, HEIGHT - DIRECTRIX_Y);
ct.lineWidth = 1;
ct.strokeStyle = "blue";
ct.stroke();
// Now draw the dynamic circle and line
ct.beginPath();
// the circle
ct.arc(cx, cy, radius, 0, 7);
// the line
ct.moveTo(0, line_y);
ct.lineTo(WIDTH, line_y);
ct.strokeStyle = "#666";
ct.lineWidth = 1;
ct.stroke();
if (!isNaN(px)) {
// Draw the resulting parabola
ct.beginPath();
ct.moveTo(cx - px, line_y);
ct.quadraticCurveTo(cx, (HEIGHT - DIRECTRIX_Y) + cy - line_y, cx + px, line_y);
ct.lineWidth = 3;
ct.strokeStyle = "red";
ct.stroke();
// Mark the points of intersection
ct.beginPath();
ct.arc(cx - px, line_y, 4, 0, 7);
ct.arc(cx + px, line_y, 4, 0, 7);
ct.fillStyle = "#000";
ct.fill();
}
return this || html`(<i>the drawing function</i>)`;
}
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.
