Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

315 lines (286 sloc) 16.188 kb
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<meta charset="UTF-8" />
<title>Multiplying and dividing complex number polar forms</title>
<script src="../khan-exercise.js"></script>
<style>
.info-box .mini-button {
margin: 0px 10px 0px 0px;
padding: 0px 5px;
width: 25px;
height: 18px;
}
#number-label {
clear: both;
margin: 0px 0px;
padding: 14px 0px 0px 0px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="multiply-cplx">
<div class="vars" data-ensure="ANSWER_REAL >= -10 && ANSWER_IMAG >= -10 && ANSWER_REAL <= 10 && ANSWER_IMAG <= 10 && ANSWER_RADIUS > 1 && ANSWER_RADIUS <= 10">
<var id="DENOMINATOR">24</var>
<var id="USE_EULER_FORM">randFromArray( [ true, false ] )</var>
<var id="A_RADIUS">randRange( 1, 7 )</var>
<var id="A_ANGLE_NUMERATOR">randRange( 0, DENOMINATOR - 1 )</var>
<var id="A_ANGLE">A_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="A_ANGLE_REP">piFraction( A_ANGLE, true )</var>
<var id="A_REP">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">randRange( 1, 7 )</var>
<var id="B_ANGLE_NUMERATOR">randRange( 0, DENOMINATOR - 1 )</var>
<var id="B_ANGLE">B_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="B_ANGLE_REP">piFraction( B_ANGLE, true )</var>
<var id="B_REP">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">A_RADIUS * B_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">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>
<!-- the R(cos A + i sin A) form contains parentheses, so it's better wrapped in brackets
rather than another pair of parentheses... -->
<var id="BRACKETS">USE_EULER_FORM ? '()' : '[]'</var>
<var id="LEFT_BRACKET">BRACKETS[0]</var>
<var id="RIGHT_BRACKET">BRACKETS[1]</var>
<var id="INTERMEDIATE_ANGLE_REP">piFraction( ( A_ANGLE_NUMERATOR + B_ANGLE_NUMERATOR ) * PI * 2 / DENOMINATOR, true )</var>
</div>
<p class="question">
Multiply the following complex numbers, marked as <strong class="hint_blue">blue</strong> dots on the graph:
</p>
<p>
<code><var>LEFT_BRACKET</var><var>A_REP</var><var>RIGHT_BRACKET</var> \cdot <var>LEFT_BRACKET</var><var>B_REP</var><var>RIGHT_BRACKET</var></code>
</p>
<p>
(Your current answer will be plotted in <strong class="hint_orange">orange</strong>.)
</p>
<!-- TODO: use the dots in hints? -->
<div class="graphie">
graphInit({
range: [ [ -10, 10 ], [ -10 ,10 ] ],
scale: 20,
tickStep: 1,
axisArrows: "<->"
});
drawComplexChart( 10, DENOMINATOR );
circle( [A_REAL, A_IMAG], 1 / 4, {
fill: KhanUtil.BLUE,
stroke: "none"
});
circle( [B_REAL, B_IMAG], 1 / 4, {
fill: KhanUtil.BLUE,
stroke: "none"
});
graph.currComplexPolar = new ComplexPolarForm( DENOMINATOR, 10, USE_EULER_FORM );
redrawComplexPolarForm();
</div>
<div class="solution" data-type="custom">
<div class="instruction">
<div>
<div style="float: left;">Radius: <span id="current-radius"><code>1</code></span></div>
<div style="float: right;">
<input type="button" class="simple-button mini-button" value="-" onclick="updateComplexPolarForm(0, -1)" />
<input type="button" class="simple-button mini-button" value="+" onclick="updateComplexPolarForm(0, 1)" />
</div>
</div>
<div style="clear: both;">
<div style="float: left;">Angle: <span id="current-angle"><code>0</code></span></div>
<div style="float: right;">
<input type="button" class="simple-button mini-button" value="-" onclick="updateComplexPolarForm(-1, 0)" />
<input type="button" class="simple-button mini-button" value="+" onclick="updateComplexPolarForm(1, 0)" />
</div>
</div>
<div id="number-label">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</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</var></code>.
</p>
<p>
The radius of the result will be <code><var>A_RADIUS</var> \cdot <var>B_RADIUS</var></code>, which is <code><var>ANSWER_RADIUS</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 convient 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</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="A_REAL >= -10 && A_IMAG >= -10 && A_REAL <= 10 && A_IMAG <= 10 && ANSWER_RADIUS > 1 && ANSWER_RADIUS <= 10">
<var id="DENOMINATOR">24</var>
<var id="USE_EULER_FORM">randFromArray( [ true, false ] )</var>
<var id="ANSWER_RADIUS">randRange( 1, 10 )</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">piFraction( ANSWER_ANGLE, true )</var>
<var id="B_RADIUS">randRange( 1, 7 )</var>
<var id="B_ANGLE_NUMERATOR">randRange( 0, DENOMINATOR - 1 )</var>
<var id="B_ANGLE">B_ANGLE_NUMERATOR * PI * 2 / DENOMINATOR</var>
<var id="B_ANGLE_REP">piFraction( B_ANGLE )</var>
<var id="B_REP">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">ANSWER_RADIUS * B_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">piFraction( A_ANGLE, true )</var>
<var id="A_REP">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">piFraction( ( A_ANGLE_NUMERATOR - B_ANGLE_NUMERATOR ) * PI * 2 / DENOMINATOR, true )</var>
</div>
<p class="question">
Divide the following complex numbers:
</p>
<p>
<code>\dfrac{<var>A_REP</var>}{<var>B_REP</var>}</code>
</p>
<p>
(The dividend is plotted in <strong class="hint_blue">blue</strong> and the divisor in plotted in <strong class="hint_green">green</strong>.
Your current answer will be plotted <strong class="hint_orange">orange</strong>.)
</p>
<!-- TODO: differentiate the dots! -->
<div class="graphie">
graphInit({
range: [ [ -10, 10 ], [ -10, 10 ] ],
scale: 20,
tickStep: 1,
axisArrows: "<->"
});
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">
<div>
<div style="float: left;">Radius: <span id="current-radius"><code>1</code></span></div>
<div style="float: right;">
<input type="button" class="simple-button mini-button" value="-" onclick="updateComplexPolarForm(0, -1)" />
<input type="button" class="simple-button mini-button" value="+" onclick="updateComplexPolarForm(0, 1)" />
</div>
</div>
<div style="clear: both;">
<div style="float: left;">Angle: <span id="current-angle"><code>0</code></span></div>
<div style="float: right;">
<input type="button" class="simple-button mini-button" value="-" onclick="updateComplexPolarForm(-1, 0)" />
<input type="button" class="simple-button mini-button" value="+" onclick="updateComplexPolarForm(1, 0)" />
</div>
</div>
<div id="number-label">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 first number (<code><var>A_REP</var></code>) has angle <code><var>A_ANGLE_REP</var></code> and radius <var>A_RADIUS</var>.
</p>
<p>
The second number (<code><var>B_REP</var></code>) has angle <code><var>B_ANGLE_REP</var></code> and radius <var>B_RADIUS</var>.
</p>
<p>
The radius of the result will be <code>\frac{<var>A_RADIUS</var>}{<var>B_RADIUS</var>}</code>, which is <var>ANSWER_RADIUS</var>.
</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 convient 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</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.