Permalink
Fetching contributors…
Cannot retrieve contributors at this time
169 lines (153 sloc) 8.44 KB
<!DOCTYPE html>
<html data-require="math graphie math-format graphie-helpers">
<head>
<meta charset="UTF-8">
<title>Powers of complex numbers</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars" data-ensure="!(ANSWER_ANGLE === 0 &amp;&amp; ANSWER_RADIUS === 1)">
<var id="EXPONENT">rand(2) ? randRange(2, 4) : randRange(2, 20)</var>
<var id="DENOMINATOR">24</var>
<var id="BASE_ANGLE_NUMERATOR">randRange(1, DENOMINATOR - 1)</var>
<var id="BASE_ANGLE">BASE_ANGLE_NUMERATOR / DENOMINATOR * 2 * PI</var>
<var id="BASE_RADIUS">(function(){
if (EXPONENT === 2) {
return randRange(1, 3);
} else if (EXPONENT &lt; 4) {
return randRange(1, 2);
}
return 1;
})()</var>
<var id="EULER_FORM">randFromArray( [ true, false ] )</var>
<var id="BASE_REP">polarForm( BASE_RADIUS, BASE_ANGLE, EULER_FORM )</var>
<var id="BASE_EULER_REP">polarForm( BASE_RADIUS, BASE_ANGLE, true )</var>
<var id="BASE_REAL">cos( BASE_ANGLE ) * BASE_RADIUS</var>
<var id="BASE_IMAG">sin( BASE_ANGLE ) * BASE_RADIUS</var>
<var id="BASE_E_EXPONENT">eulerFormExponent( BASE_ANGLE )</var>
<var id="BASE_ANGLE_REP">piFraction( BASE_ANGLE, true )</var>
<var id="ANGLE_MULTIPLE_NUMERATOR">BASE_ANGLE_NUMERATOR * EXPONENT</var>
<var id="ANGLE_MULTIPLE">ANGLE_MULTIPLE_NUMERATOR / DENOMINATOR * 2 * PI</var>
<var id="ANGLE_MULTIPLE_E_EXPONENT">eulerFormExponent( BASE_ANGLE * EXPONENT )</var>
<var id="ANGLE_MULTIPLE_REP">piFraction( ANGLE_MULTIPLE, true )</var>
<var id="ANSWER_RADIUS">pow(BASE_RADIUS, EXPONENT)</var>
<var id="ANSWER_ANGLE_NUMERATOR">( BASE_ANGLE_NUMERATOR * EXPONENT ) % DENOMINATOR</var>
<var id="ANSWER_ANGLE">ANSWER_ANGLE_NUMERATOR / DENOMINATOR * 2 * PI</var>
<var id="ANSWER_ANGLE_REP">piFraction( ANSWER_ANGLE, true )</var>
<var id="ANSWER_E_EXPONENT">piFraction( ANSWER_ANGLE, true )</var>
<var id="ANSWER_EULER">polarForm( ANSWER_RADIUS, ANSWER_ANGLE, true )</var>
<var id="ANSWER">polarForm( ANSWER_RADIUS, ANSWER_ANGLE, EULER_FORM )</var>
<var id="NEAREST_TWO_PI_MULTIPLE">piFraction( ANGLE_MULTIPLE - ANSWER_ANGLE, true )</var>
</div>
<div class="problems">
<div>
<p><code>\blue{ \large{x = <var>BASE_REP</var>}}</code></p>
<p><code>\orange{ \large{y = x^{<var>EXPONENT</var>}}}</code></p>
<p class="question">
<code>\blue{x}</code> is plotted in <strong class="hint_blue">blue</strong> below.
Change the angle and radius to plot <code>\orange{y}</code> in <strong class="hint_orange">orange</strong>.
</p>
<p class="render-answer-area-here"></p>
<div class="graphie" id="gauss-plane">
var size = 10;
graphInit({
range: [[-size, size], [-size, size]],
scale: 24,
tickStep: 1,
axisArrows: "&lt;-&gt;"
});
drawComplexChart(size, DENOMINATOR);
circle( [ BASE_REAL, BASE_IMAG ], 1 / 4, {
fill: KhanUtil.BLUE,
stroke: "none"
});
graph.currComplexPolar = new ComplexPolarForm(DENOMINATOR, size, EULER_FORM);
redrawComplexPolarForm();
</div>
<div class="solution" data-type="custom">
<div class="instruction" style="width: 180px;">
<div>
<div style="float: left;">Radius: <span id="current-radius"><code>1</code></span></div>
<div style="float: right; margin-bottom: 4px;">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(0, -1)" type="button" value="-">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(0, 1)" type="button" value="+">
</div>
</div>
<div style="clear: both;">
<div style="float: left;">Angle: <span id="current-angle"><code>0</code></span></div>
<div style="float: right; margin-bottom: 14px;">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(-1, 0)" type="button" value="-">
<input class="simple-button mini-button" onclick="updateComplexPolarForm(1, 0)" type="button" value="+">
</div>
</div>
<div id="number-label" style="background: #eee; padding: 5px; text-align: center;">1</div>
</div>
<div class="guess">[
graph.currComplexPolar.getAngleNumerator(),
graph.currComplexPolar.getRadius()
]</div>
<div class="validator-function">
var angle = guess[0];
var radius = guess[1];
if (angle === 0 &amp;&amp; radius === 1) {
return "";
}
return angle === ANSWER_ANGLE_NUMERATOR &amp;&amp; radius === ANSWER_RADIUS;
</div>
<div class="show-guess">
redrawComplexPolarForm(guess[0], guess[1]);
</div>
<div class="show-guess-solutionarea">
redrawComplexPolarForm(guess[0], guess[1]);
</div>
</div>
<div class="hints">
<p data-if="BASE_ANGLE === 0">All powers of <code>1</code> are <code>1</code>.</p>
<div data-else="" data-unwrap="">
<div data-if="!EULER_FORM" data-unwrap="">
<p>First express <code>\blue{x}</code> in Euler form.</p>
<p><code>\large {\blue{<var>BASE_REP</var>} = \blue{<var>BASE_EULER_REP</var>}}</code></p>
</div>
<div>
<p><code>
\large{(\blue{<var>BASE_EULER_REP</var>}) ^ {<var>EXPONENT</var>} =
<span data-if="BASE_RADIUS !== 1">
\blue{<var>BASE_RADIUS</var>}^{<var>EXPONENT</var>}
(\blue{<var>polarForm(1, BASE_ANGLE, true)</var>}) ^ {<var>EXPONENT</var>}=
</span>
\orange{<var>coefficient(ANSWER_RADIUS)</var>e ^ {<var>EXPONENT</var> \cdot <var>BASE_E_EXPONENT</var>}}}
</code></p>
<p data-if="BASE_RADIUS !== 1">
So the radius of <code>\orange{y}</code> is <code><var>ANSWER_RADIUS</var></code>.
</p>
</div>
<p>
The angle of the result is <code>\large{<var>EXPONENT</var> \cdot <var>BASE_ANGLE_REP</var>}</code>,
which is <code>\large{<var>ANGLE_MULTIPLE_REP</var>}</code>.
</p>
<div data-if="ANGLE_MULTIPLE_NUMERATOR >= DENOMINATOR * 2" data-unwrap="">
<p>
<code><var>ANGLE_MULTIPLE_REP</var></code> is more than <code>2 \pi</code>.
It is a common practice to keep complex number angles between <code>0</code> and <code>2 \pi</code>,
because <code>e^{2 \pi i} = (e^{\pi i}) ^ 2 = (-1) ^ 2 = 1</code>.
</p>
<p>So subtract the nearest multiple of <code>2 \pi</code> from the angle.</p>
<p><code>
\large{<var>ANGLE_MULTIPLE_REP</var> - <var>NEAREST_TWO_PI_MULTIPLE</var> = <var>ANSWER_ANGLE_REP</var>}
</code></p>
</div>
</div>
<div>
<p><code>\large{\orange{y = <var>ANSWER_EULER</var>}}</code></p>
<p data-if="!EULER_FORM && ANSWER_ANGLE_NUMERATOR !== 0">
Converting this back from Euler form, we get
<code>\large{y = <var>ANSWER</var>}</code>.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>