Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

327 lines (297 sloc) 17.13 kB
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<meta charset="UTF-8">
<title>Multiplying and dividing complex numbers in polar form</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="multiply-cplx">
<div class="vars" data-ensure="ANSWER_RADIUS !== 1 || ANSWER_ANGLE !== 0">
<var id="DENOMINATOR">24</var>
<var id="USE_EULER_FORM">randFromArray( [ true, false ] )</var>
<div data-ensure="ANSWER_RADIUS > 1 && ANSWER_RADIUS <= 10">
<var id="A_RADIUS">randRange(1, 10)</var>
<var id="B_RADIUS">randRange(1, 10)</var>
<var id="ANSWER_RADIUS">A_RADIUS * B_RADIUS</var>
</div>
<var id="A_RADIUS_REP">"\\blue{" + A_RADIUS + "}"</var>
<var id="A_ANGLE_NUMERATOR">randRange(1, DENOMINATOR - 1 )</var>
<var id="A_ANGLE">A_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="A_ANGLE_REP">"\\blue{" + piFraction(A_ANGLE, true) + "}"</var>
<var id="A_REP">"\\blue{" + polarForm(A_RADIUS, A_ANGLE, USE_EULER_FORM) + "}"</var>
<var id="A_REAL">cos( A_ANGLE ) * A_RADIUS</var>
<var id="A_IMAG">sin( A_ANGLE ) * A_RADIUS</var>
<var id="B_RADIUS_REP">"\\green{" + B_RADIUS + "}"</var>
<var id="B_ANGLE_NUMERATOR">randRange(1, DENOMINATOR - 1 )</var>
<var id="B_ANGLE">B_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="B_ANGLE_REP">"\\green{" + piFraction(B_ANGLE, true) + "}"</var>
<var id="B_REP">"\\green{" + polarForm(B_RADIUS, B_ANGLE, USE_EULER_FORM) + "}"</var>
<var id="B_REAL">cos( B_ANGLE ) * B_RADIUS</var>
<var id="B_IMAG">sin( B_ANGLE ) * B_RADIUS</var>
<var id="ANSWER_RADIUS_REP">"\\orange{" + ANSWER_RADIUS + "}"</var>
<var id="ANSWER_ANGLE_NUMERATOR">( A_ANGLE_NUMERATOR + B_ANGLE_NUMERATOR ) % DENOMINATOR</var>
<var id="ANSWER_ANGLE">ANSWER_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="ANSWER_ANGLE_REP">"\\orange{" + piFraction(ANSWER_ANGLE, true) + "}"</var>
<var id="ANSWER_REAL">cos( ANSWER_ANGLE ) * ANSWER_RADIUS</var>
<var id="ANSWER_IMAG">sin( ANSWER_ANGLE ) * ANSWER_RADIUS</var>
<var id="INTERMEDIATE_ANGLE_REP">"\\orange{" + piFraction((A_ANGLE_NUMERATOR + B_ANGLE_NUMERATOR) * PI * 2 / DENOMINATOR, true) + "}"</var>
</div>
<p class="question">
Multiply the following complex numbers:
</p>
<p><code>\left(<var>A_REP</var>\right) \cdot \left(<var>B_REP</var>\right)</code></p>
<p><em>
The first number is plotted in <strong class="hint_blue">blue</strong>
and the second number is plotted in <strong class="hint_green">green</strong>.
Your current answer will be plotted in <strong class="hint_orange">orange</strong>.
</em></p>
<p class="render-answer-area-here"></p>
<!-- TODO: use the dots in hints? -->
<div class="graphie">
graphInit({
range: [ [ -10, 10 ], [ -10 ,10 ] ],
scale: 20,
tickStep: 1,
axisArrows: "&lt;-&gt;"
});
drawComplexChart( 10, DENOMINATOR );
circle( [A_REAL, A_IMAG], 1 / 4, {
fill: KhanUtil.BLUE,
stroke: "none"
});
circle( [B_REAL, B_IMAG], 1 / 4, {
fill: KhanUtil.GREEN,
stroke: "none"
});
graph.currComplexPolar = new ComplexPolarForm( DENOMINATOR, 10, USE_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>
Multiplying complex numbers in polar forms can be done by multiplying the lengths
and adding the angles.
</p>
<p>
The first number, <code><var>A_REP</var></code>,
has angle <code><var>A_ANGLE_REP</var></code>
and radius <code><var>A_RADIUS_REP</var></code>.
</p>
<p>
The second number, <code><var>B_REP</var></code>,
has angle <code><var>B_ANGLE_REP</var></code>
and radius <code><var>B_RADIUS_REP</var></code>.
</p>
<p>
The radius of the result will be
<code><var>A_RADIUS_REP</var> \cdot <var>B_RADIUS_REP</var> = <var>ANSWER_RADIUS_REP</var></code>.
</p>
<div data-if="A_ANGLE_NUMERATOR + B_ANGLE_NUMERATOR > 12 * 2" data-unwrap="">
<p>
The sum of the angles is <code><var>A_ANGLE_REP</var> + <var>B_ANGLE_REP</var> = <var>INTERMEDIATE_ANGLE_REP</var></code>.
</p>
<p>
The angle <code><var>INTERMEDIATE_ANGLE_REP</var></code> is more than <code>2 \pi</code>.
A complex number goes a full circle if its angle is increased by <code>2 \pi</code>, so it goes back to itself.
Because of that, angles of complex numbers are convenient to keep between <code>0</code> and <code>2 \pi</code>.
</p>
<p>
<code><var>INTERMEDIATE_ANGLE_REP</var> - 2 \pi = <var>ANSWER_ANGLE_REP</var></code>
<!-- The A and B angles are both between 0 and 2pi, so the maximum angle here is 4pi, so it's safe not to handle further 2pi multiples. -->
</p>
</div>
<p data-else="">
The angle of the result is <code><var>A_ANGLE_REP</var> + <var>B_ANGLE_REP</var> = <var>ANSWER_ANGLE_REP</var></code>.
</p>
<p>
The radius of the result is <code><var>ANSWER_RADIUS_REP</var></code>
and the angle of the result is <code><var>ANSWER_ANGLE_REP</var></code>.
</p>
</div>
</div>
<div id="divide-cplx">
<div class="vars" data-ensure="ANSWER_RADIUS !== 1 || ANSWER_ANGLE !== 0">
<var id="DENOMINATOR">24</var>
<var id="USE_EULER_FORM">randFromArray( [ true, false ] )</var>
<div data-ensure="A_RADIUS > 1 && A_RADIUS <= 10">
<var id="ANSWER_RADIUS">randRange(1, 10)</var>
<var id="B_RADIUS">randRange(1, 10)</var>
<var id="A_RADIUS">ANSWER_RADIUS * B_RADIUS</var>
</div>
<var id="ANSWER_RADIUS_REP">"\\orange{" + ANSWER_RADIUS + "}"</var>
<var id="ANSWER_ANGLE_NUMERATOR">randRange( 0, DENOMINATOR - 1 )</var>
<var id="ANSWER_ANGLE">ANSWER_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="ANSWER_ANGLE_REP">"\\orange{" + piFraction(ANSWER_ANGLE, true) + "}"</var>
<var id="B_RADIUS_REP">"\\green{" + B_RADIUS + "}"</var>
<var id="B_ANGLE_NUMERATOR">randRange(1, DENOMINATOR - 1)</var>
<var id="B_ANGLE">B_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="B_ANGLE_REP">"\\green{" + piFraction(B_ANGLE) + "}"</var>
<var id="B_REP">"\\green{" + polarForm(B_RADIUS, B_ANGLE, USE_EULER_FORM) + "}"</var>
<var id="B_REAL">cos( B_ANGLE ) * B_RADIUS</var>
<var id="B_IMAG">sin( B_ANGLE ) * B_RADIUS</var>
<var id="A_RADIUS_REP">"\\blue{" + A_RADIUS + "}"</var>
<var id="A_ANGLE_NUMERATOR">(ANSWER_ANGLE_NUMERATOR + B_ANGLE_NUMERATOR) % DENOMINATOR</var>
<var id="A_ANGLE">A_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="A_ANGLE_REP">"\\blue{" + piFraction(A_ANGLE, true) + "}"</var>
<var id="A_REP">"\\blue{" + polarForm(A_RADIUS, A_ANGLE, USE_EULER_FORM) + "}"</var>
<var id="A_REAL">cos( A_ANGLE ) * A_RADIUS</var>
<var id="A_IMAG">sin( A_ANGLE ) * A_RADIUS</var>
<var id="INTERMEDIATE_ANGLE_REP">"\\orange{" + piFraction((A_ANGLE_NUMERATOR - B_ANGLE_NUMERATOR ) * PI * 2 / DENOMINATOR, true) + "}"</var>
</div>
<p class="question">
Divide the following complex numbers:
</p>
<p data-if="USE_EULER_FORM">
<code>\Large{\dfrac{<var>A_REP</var>}{<var>B_REP</var>}}</code>
</p><p data-else="">
<code>\dfrac{<var>A_REP</var>}{<var>B_REP</var>}</code>
</p>
<p><em>
The dividend is plotted in <strong class="hint_blue">blue</strong>
and the divisor is plotted in <strong class="hint_green">green</strong>.
Your current answer will be plotted in <strong class="hint_orange">orange</strong>.
</em></p>
<p class="render-answer-area-here"></p>
<div class="graphie">
graphInit({
range: [ [ -10, 10 ], [ -10, 10 ] ],
scale: 20,
tickStep: 1,
axisArrows: "&lt;-&gt;"
});
drawComplexChart( 10, DENOMINATOR );
circle( [A_REAL, A_IMAG], 1 / 4, {
fill: KhanUtil.BLUE,
stroke: "none"
});
circle( [B_REAL, B_IMAG], 1 / 4, {
fill: KhanUtil.GREEN,
stroke: "none"
});
graph.currComplexPolar = new ComplexPolarForm( DENOMINATOR, 10, USE_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>
Dividing complex numbers in polar forms can be done by dividing the radii
and subtracting the angles.
</p>
<p>
The dividend, <code><var>A_REP</var></code>,
has angle <code><var>A_ANGLE_REP</var></code>
and radius <code><var>A_RADIUS_REP</var></code>.
</p>
<p>
The divisor, <code><var>B_REP</var></code>,
has angle <code><var>B_ANGLE_REP</var></code>
and radius <code><var>B_RADIUS_REP</var></code>.
</p>
<p>
The radius of the result will be
<code>\dfrac{<var>A_RADIUS_REP</var>}{<var>B_RADIUS_REP</var>} = <var>ANSWER_RADIUS_REP</var></code>.
</p>
<div data-if="A_ANGLE_NUMERATOR - B_ANGLE_NUMERATOR < 0" data-unwrap="">
<p>
The difference of the angles is
<code><var>A_ANGLE_REP</var> - <var>B_ANGLE_REP</var> = <var>INTERMEDIATE_ANGLE_REP</var></code>.
</p>
<p>
The angle <code><var>INTERMEDIATE_ANGLE_REP</var></code> is negative.
A complex number goes a full circle if its angle is increased by <code>2 \pi</code>, so it goes back to itself.
Because of that, angles of complex numbers are convenient to keep between <code>0</code> and <code>2 \pi</code>.
</p>
<p>
<code><var>INTERMEDIATE_ANGLE_REP</var> + 2 \pi = <var>ANSWER_ANGLE_REP</var></code>
</p>
</div>
<p data-else="">
The angle of the result is <code><var>A_ANGLE_REP</var> - <var>B_ANGLE_REP</var> = <var>ANSWER_ANGLE_REP</var></code>.
</p>
<p>
The radius of the result is <code><var>ANSWER_RADIUS_REP</var></code>
and the angle of the result is <code><var>ANSWER_ANGLE_REP</var></code>.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.