WIDTH = Math.min(400, width)
HEIGHT = WIDTH * 1.2
DIRECTRIX_Y = 200 // How far up is the directrix of the parabola?
FOCUS_Y = 250
xFromY = y => Math.sqrt((HEIGHT - DIRECTRIX_Y - y)**2 - (y - cy)**2)
yFromX = x => ( x**2 - (HEIGHT - DIRECTRIX_Y)**2 + cy**2 ) / (2 * (cy + DIRECTRIX_Y - HEIGHT))
{
const ct = canvas.ct;
ct.clearRect(0, 0, WIDTH, HEIGHT);
// Directrix
ct.beginPath();
ct.moveTo(0, HEIGHT - DIRECTRIX_Y);
ct.lineTo(WIDTH, HEIGHT - DIRECTRIX_Y);
ct.lineWidth = 1;
ct.strokeStyle = "blue";
ct.stroke();
// Parabola
ct.beginPath();
ct.moveTo(cx - ex, ey);
ct.quadraticCurveTo(cx, cy * 2 + FOCUS_Y - DIRECTRIX_Y, cx + ex, ey);
ct.lineWidth = 3;
ct.strokeStyle = "red";
ct.stroke();
// Baseline and axis
ct.beginPath();
ct.moveTo(0, HEIGHT - (DIRECTRIX_Y + FOCUS_Y) / 2);
ct.lineTo(WIDTH, HEIGHT - (DIRECTRIX_Y + FOCUS_Y) / 2);
ct.moveTo(cx, 0);
ct.lineTo(cx, HEIGHT);
ct.lineWidth = 1;
ct.strokeStyle = "#090";
ct.stroke();
ct.beginPath();
// P → directrix → focus
ct.moveTo(cx + px, py);
ct.lineTo(cx + px, HEIGHT - DIRECTRIX_Y);
ct.lineTo(cx, cy);
// Tangent
ct.lineTo(cx + px, py);
ct.lineTo(cx, HEIGHT - DIRECTRIX_Y + cy - py);
ct.lineWidth = 1;
ct.strokeStyle = "#666";
ct.stroke();
ct.beginPath();
ct.arc(cx + px, py, 5, 0, 7);
ct.arc(cx + px, HEIGHT - DIRECTRIX_Y, 5, 0, 7);
ct.fillStyle = "#333";
ct.fill();
ct.beginPath();
ct.arc(cx + px/2, (HEIGHT - DIRECTRIX_Y + cy)/2, 5, 0, 7);
ct.arc(cx, HEIGHT - DIRECTRIX_Y + cy - py, 5, 0, 7);
ct.fillStyle = "#090";
ct.fill();
// Focus
ct.beginPath();
ct.arc(cx, cy, 5, 0, 7);
ct.fillStyle = "blue";
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.
