Permalink
Fetching contributors…
Cannot retrieve contributors at this time
156 lines (146 sloc) 8.42 KB
<!DOCTYPE html>
<html data-require="math math-format graphie interactive parabola-intuition">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parabola intuition 3</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="A">randFromArray([ -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 2 ])</var>
<var id="X1">randRangeNonZero( -4, 4 )/8</var>
<var id="Y1">randRangeNonZero( -4, 4 )/8</var>
<var id="VERTEX_Y">Y1 + 1 / (4 * A)</var>
<var id="DIR_Y">Y1 - 1 / (4 * A)</var>
<var id="PRETTY_A">fractionReduce.apply(KhanUtil, toFraction(A, 0.001))</var>
<var id="PRETTY_X1">fractionReduce.apply(KhanUtil, toFraction(X1, 0.001))</var>
<var id="PRETTY_Y1">fractionReduce.apply(KhanUtil, toFraction(Y1, 0.001))</var>
<var id="PRETTY_FOCUS_Y">fractionReduce.apply(KhanUtil, toFraction(VERTEX_Y, 0.001))</var>
<var id="PRETTY_DIR_Y">fractionReduce.apply(KhanUtil, toFraction(DIR_Y, 0.001))</var>
</div>
<div class="problems">
<div>
<p class="question">
First, find the <span class="hint_orange">focus</span> and <span class="hint_orange">directrix</span> of the parabola by moving
the orange point and line to their correct positions. Then use that information to find the equation of the parabola.
</p>
<div class="graphie" id="grid">
graph.A = A;
graph.X1 = X1;
graph.Y1 = Y1;
initAutoscaledGraph( [ [ -2.5, 2.5 ], [ -2.5, 2.5 ] ], {} );
addMouseLayer();
graph.directrix = addMovableLineSegment({
coordA: [0, -1],
coordZ: [1, -1],
snapY: 0.125,
vertical: false,
extendLine: true,
normalStyle: {
"stroke": KhanUtil.ORANGE,
"stroke-width": 2
},
highlightStyle: {
"stroke": KhanUtil.ORANGE,
"stroke-width": 4
}
});
graph.directrix.onMove = function( x, y ) {
var coord = this.coordA[1];
$("#directrix-label").html( "&lt;code&gt;" + fractionReduce.apply(KhanUtil, toFraction(coord, 0.001)) + "&lt;/code&gt;" ).tex();
};
graph.vertex = addMovablePoint({
coordX: 0,
coordY: 1,
snapX: 0.125,
snapY: 0.125,
});
graph.vertex.onMove = function( coordX, coordY ) {
$("#focus-x-label").html( "&lt;code&gt;" + fractionReduce.apply(KhanUtil, toFraction(coordX, 0.001)) + "&lt;/code&gt;" ).tex();
$("#focus-y-label").html( "&lt;code&gt;" + fractionReduce.apply(KhanUtil, toFraction(coordY, 0.001)) + "&lt;/code&gt;" ).tex();
};
graph.func = addInteractiveFn( function(x) {
return ( A * ( x - X1 ) * ( x - X1 ) ) + Y1;
}, {});
doParabolaInteraction( graph.func, graph.vertex, graph.directrix );
</div>
<p>
The <span class="hint_green">two green line segments</span> you see when you point to the parabola are always the same
length as each other. Use them to check that you've found the right focus and directrix.
</p>
<div class="solution" data-type="multiple">
<div class="sol" data-type="custom">
<div class="guess"> [ graph.vertex.coord, graph.directrix.coordA[1] ] </div>
<div class="validator-function">
if (_.isEqual(guess, [[0, 1], -1])) {
return "";
}
return guess[0][0] === X1
&amp;&amp; guess[0][1] === Y1 + 1 / (4 * A)
&amp;&amp; guess[1] === Y1 - 1 / (4 * A)
</div>
<div class="show-guess">
graph.vertex.setCoord( guess[0] );
graph.directrix.coordA = [0, guess[1]];
graph.directrix.coordZ = [1, guess[1]];
graph.directrix.transform();
</div>
</div>
<p><span>Focus: </span><code>(</code><span id="focus-x-label"><code>0</code></span><code>,\quad</code><span id="focus-y-label"><code>1</code></span><code>)</code></p>
<p>Directrix: <code>y = {}</code><span id="directrix-label"><code>-1</code></span></p>
<p>
Equation of the parabola:<br>
<code>y - {}</code><span class="sol short30" data-fallback="0"><var>Y1</var></span><code>{} = {}</code><span class="sol short30" data-forms="integer, proper, improper, mixed, decimal, coefficient"><var>A</var></span><code>(x - {}</code><span class="sol short30" data-fallback="0"><var>X1</var></span><code>)^2</code>
</p>
</div>
<div class="hints">
<p>
All points on a parabola are equidistant from the focus and directrix. There is only one place to put the orange focus point
and directrix line where this is true.
<button onclick="javascript:
graph = KhanUtil.currentGraph.graph;
graph.vertex.moveTo(graph.X1, graph.Y1 + 1 / (4 * graph.A));
$({ y: graph.directrix.coordA[1] }).animate({ y: graph.Y1 - 1 / (4 * graph.A) }, {
duration: Math.abs(graph.directrix.coordA[1] - (graph.Y1 - 1 / (4 * graph.A))) * 300,
step: function(now, fx) {
graph.directrix.coordA = [0, now];
graph.directrix.coordZ = [1, now];
graph.directrix.transform();
graph.directrix.onMove(0, now);
}
});
">Show me</button>
</p>
<p>
The focus is <code>(<var>PRETTY_X1</var>, <var>PRETTY_FOCUS_Y</var>)</code>
and the directrix is <code>y = <var>PRETTY_DIR_Y</var></code>
</p>
<p>
The equation for a parabola is <code>y - y_1 = a (x - x_1)^2</code>, where <code>x_1</code> and <code>y_1</code>
are the coordinates of the <em>vertex</em> of the parabola (halfway between the focus and directrix).
</p>
<p>
<code>x_1</code> is the same as the <code>x</code> coordinate of the focus.
<code>y_1</code> is at the midpoint of <code><var>PRETTY_FOCUS_Y</var></code> and <code><var>PRETTY_DIR_Y</var></code>.
</p>
<p>
So <code>x_1 = <var>PRETTY_X1</var></code>.
And <code>y_1 = \dfrac{<var>PRETTY_FOCUS_Y</var> + <var>PRETTY_DIR_Y</var>}{2} = <var>PRETTY_Y1</var></code>.
</p>
<p>
The leading coefficient <code>a</code> in the equation <code>y - y_1 = a (x - x_1)^2</code> indicates how "wide" and
in what direction the parabola opens. It's always the reciprocal of <code>2</code> times the distance from the directrix to the focus.
</p>
<p>
<code>a = \dfrac{1}{2 \times (<var>PRETTY_FOCUS_Y</var> {-} <var>PRETTY_DIR_Y</var>)} = <var>PRETTY_A</var></code>
</p>
<p>
So the equation of the parabola is <code>y - <var>PRETTY_Y1</var> = <var>PRETTY_A</var>(x - <var>PRETTY_X1</var>)^2</code>.
</p>
</div>
</div>
</div>
</div>
</body>
</html>