This repository has been archived by the owner on May 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 863
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add exercise Complex number polar form intuition
- Loading branch information
1 parent
b6f948a
commit 42e1394
Showing
1 changed file
with
113 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| <!DOCTYPE html> | ||
| <html data-require="math graphie graphie-helpers"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>Complex number polar form intuition</title> | ||
| <script src="../khan-exercise.js"></script> | ||
| <script> | ||
| var currentAngle = 0, currentRadius = 1; | ||
| var currentReal = 1, currentImag = 0; | ||
|
|
||
| function recalculateComplexDotCoordinates() { | ||
| currentReal = Math.cos(currentAngle * Math.PI / 6) * currentRadius; | ||
| currentImag = Math.sin(currentAngle * Math.PI / 6) * currentRadius; | ||
| } | ||
|
|
||
| function redrawComplexDot() { | ||
| var graph = KhanUtil.currentGraph; | ||
| var storage = graph.graph; | ||
| var dot = storage.complexDot; | ||
| if (typeof(dot) != "undefined") dot.remove(); | ||
| storage.complexDot = graph.circle( [currentReal, currentImag], 1 / 4, { | ||
| fill: "red", | ||
| stroke: "none" | ||
| }); | ||
| } | ||
|
|
||
| function redrawFormula() { | ||
| var angleRep = "{" + currentAngle + " \\cdot {\\pi / 12}}"; | ||
| var equation = "x = " + currentRadius + " \\cdot (cos(" + angleRep + ") + i \\cdot sin(" + angleRep + "))"; | ||
| equation = KhanUtil.cleanMath(equation); | ||
| jQuery("#number-label").html("<code>"+equation+"</code").tmpl(); | ||
| } | ||
|
|
||
| function redrawComplex() { | ||
| recalculateComplexDotCoordinates(); | ||
| redrawFormula(); | ||
| jQuery("#angle input").val(currentAngle); | ||
| jQuery("#radius input").val(currentRadius); | ||
| redrawComplexDot(); | ||
| } | ||
|
|
||
| function updateComplexDot(deltaAngle, deltaRadius) { | ||
| currentAngle += deltaAngle; | ||
| currentRadius += deltaRadius; | ||
|
|
||
| if (currentRadius < 1) currentRadius = 1; | ||
| if (currentRadius > 10) currentRadius = 10; | ||
|
|
||
| while (currentAngle < 0) currentAngle += 12; | ||
| while (currentAngle > 11) currentAngle -= 12; | ||
|
|
||
| redrawComplex(); | ||
| } | ||
| </script> | ||
| <style> | ||
| .info-box .mini-button { | ||
| padding: 0px 5px; | ||
| width: 20px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="exercise"> | ||
| <div class="problems"> | ||
| <div> | ||
| <div class="vars" data-ensure="!(ANGLE == 0 && RADIUS == 1)"> | ||
| <var id="ANGLE">randRange( 0, 11 )</var> <!-- the angle of the complex number is ANGLE * 24pi --> | ||
| <var id="RADIUS">randRange( 1, 10 )</var> | ||
| <var id="REAL">cos(ANGLE * PI / 6) * RADIUS</var> | ||
| <var id="IMAG">sin(ANGLE * PI / 6) * RADIUS</var> | ||
| </div> | ||
| <p class="question"> | ||
| Adjust the angle and radius of the red plotted complex number to match the blue plotted complex number <code><var>round(REAL * 100) / 100</var> + <var>round(IMAG * 100) / 100</var>i</code>. | ||
| </p> | ||
| <p> | ||
| How do these numbers affect the complex number they represent? | ||
| </p> | ||
|
|
||
| <div class="graphie"> | ||
| graphInit({ | ||
| range: [[-10, 10], [-10, 10]], | ||
| scale: 20, | ||
| tickStep: 1, | ||
| axisArrows: "<->" | ||
| }); | ||
|
|
||
| circle( [REAL, IMAG], 1 / 4, { | ||
| fill: "blue", | ||
| stroke: "none" | ||
| }); | ||
|
|
||
| redrawComplex(); | ||
| </div> | ||
|
|
||
| <div class="solution" data-type="multiple"> | ||
| <input type="button" class="simple-button action-gradient mini-button" style="margin-left: 10px;" value="+" onclick="updateComplexDot( 0, 1 )" /> | ||
| <input type="button" class="simple-button action-gradient mini-button" style="margin-left: 30px;" value="+" onclick="updateComplexDot( 1, 0 )" /> | ||
|
|
||
| <p id="number-label" style="margin: 8px 0px 2px 0px"><code>x = 1 \cdot (cos({0}) + i \cdot sin({0}))</code></p> | ||
|
|
||
| <div style="padding-bottom: 15px"> | ||
| <input type="button" class="simple-button action-gradient mini-button" style="margin-left: 10px;" value="-" onclick="updateComplexDot( 0, -1 )" /> | ||
| <input type="button" class="simple-button action-gradient mini-button" style="margin-left: 30px;" value="-" onclick="updateComplexDot( -1, 0 )" /> | ||
| </div> | ||
|
|
||
| <span class="sol" id="angle" style="display: none"><var>ANGLE</var></span> | ||
| <span class="sol" id="radius" style="display: none"><var>RADIUS</var></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |