ComplexNumberGrapher/index.html at gh-pages · Jutanium/ComplexNumberGrapher · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/mathquill.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>
    Complex Function Grapher
</h1>
<div id="bodyWrapper">
    <div id="inputWrapper">
        <div id="input">
            <span class="staticMath">f(z) = </span>
            <span id="inputTextbox">sin(z)</span>
            <button onclick="graph()">Graph</button>
            <span class="smallfont">Precision:</span> <input id="precision" type="number" min="1" max="4" value="2">
        </div>
        <div id="functionButtons">
            <button onclick="insertFunction('sin(')">sin</button>
            <button onclick="insertFunction('cos(')">cos</button>
            <button onclick="insertFunction('tan(')">tan</button>
            <button onclick="insertFunction('log(')">log</button>
            <button onclick="insertFunction('\\pi ')">&pi;</button>
            <button onclick="insertFunction('\\sqrt(')">&radic;</button>
            <button onclick="insertFunction('^2')">&#178;</button>
        </div>
    </div>
    <div id="centerWrapper">
        <div id="canvases" class="unselectable">
            <canvas class="canvases" id="graph" width="500px" height="500px">
            </canvas>
            <canvas class="canvases" id="axes" width="500px" height="500px">
            </canvas>
            <div id="popout" class="unselectable"></div>

        </div>
        <div id="ui">

            <div id="details">
                <div><span class="staticMath">z=</span> <span id="z" contentEditable="true"> </span></div>
                <div><span class="staticMath"> f(z) = </span> <span id="output"></span></div>
                <div><span class="staticMath"> |f(z)| = </span> <span id="magnitude"> </span></div>
                <div> &theta; of <span class="staticMath">f(z) = </span><span id="degree"> </span></div>
                <!--<div> HSL light of pixel: <span id = "light"> </span> </div>-->
            </div>

            <div class="relative">
                <div id="slider" class="unselectable"></div>
                <div id="arrow"></div>
            </div>
            <div id="checkboxDiv">
                <div> Show axes <input id="axesCheckbox" type="checkbox" checked/></div>
                <div id="infinityDiv"> Treat NaN as infinity
                    <span class="smallfont"> (turns gray to white) </span>
                    <input id="infinityCheckbox" type="checkbox"/>
                </div>
            </div>
                <hr id="howtoBreak">
            <div id="howto">
                <h3>How to graph</h3>
                <p> Type your complex function into the f(z) input box, making sure to include the input variable
                    <i>z</i>.
                    Then hit the Graph button and watch my program graph your function in the complex plane!
                    If it graphs too slow, increase the <span class="smallfont">Precision</span> value and graph it
                    again
                    (a precision of 1 will calculate every point, 2 will calculate every other, and so on). Click on a
                    point on the graph to see the exact output of the function at that point&mdash;you can also double
                    click
                    on the value of the z label on the right-hand pane to enter an exact input point.
                    (Confused? Read about complex numbers below!)
                </p>
            </div>
        </div>

        <!--<canvas id="inputTriangle" class="unselectable" width = "250px" height="250px"></canvas>
        <canvas id="outputTriange" class="unselectable" width = "250px" height="250px"></canvas>-->

    </div>
    <div id="about">
        <h2> About Complex Numbers </h2>
        <p>
            Here's my basic explanation.
            Complex numbers are numbers with two components: a real part and an imaginary part, usually written in the
            form
            <span class="staticMath">a+bi</span>. The number <i>i</i>, while well known for being the square root of -1,
            also represents
            a 90&deg; rotation from the real number line. As such, a complex number can represent a point, with the real
            part
            representing the position on the horizontal, real number line and the imaginary part representing the
            position on the imaginary or vertical axis.
        </p>
        <a title="Wolfkeeper at English Wikipedia [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons"
           href="https://commons.wikimedia.org/wiki/File%3AComplex_number_illustration.svg">
            <img width="183" alt="Complex number illustration"
                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Complex_number_illustration.svg/223px-Complex_number_illustration.svg.png"/></a>
        <p>
            Operations with complex numbers use the properties of <i>i</i> to transform these points. For example,
            if we square the complex number <span class="staticMath">2+3i</span>, we expand <span class="staticMath">(2+3i)(2+3i)</span>
            and get
            <span class="staticMath">4 + 12i - 9 = -5 + 12i</span>. When we multiplied the 3i by 3i, the <i>i</i>s
            multiplied into -1.
            Points represented as complex numbers are numbers like any other, and just like with real numbers, we can
            define functions
            that take in a complex number and output another complex number. But graphing complex functions is a lot
            harder than graphing
            normal functions. Why? A normal function takes in a number <i>x</i> and outputs a number <i>y</i>. But a
            complex function
            takes in a complex number, or point, <i>z</i> and outputs another complex number <i>w</i>.
            We'd need four dimensions to graph a point to a point!
        </p>
        <p>
            One solution to this is called <b>complex domain coloring</b>, and that's what I've implemented in this
            project.
            Domain coloring makes every input complex number a point on a 2D graph, and every output complex number a
            color.
            It then colors each input point with its cooresponding output color. How do we choose a color for a complex
            number?
            If you imagine the complex number as a triangle like below, it has an angle &theta;. A number like
            <span class="staticMath">1+1i</span>
            will have a &theta; of 45&deg;, because if you move 1 unit to the right and 1 unit up you made a 45&deg;
            slope. Similarly, <span class="staticMath">0+0i</span> will have a &theta; of 0&deg;,
            <span class="staticMath">0+1i</span> will have a &theta; of 90&deg;, and <span
                class="staticMath">0-1i</span>
            will have a &theta; of 270&deg;.
        </p>
        <a title="Image Credit: Wolfram Alpha" href="http://mathworld.wolfram.com/ComplexNumber.html">
            <img alt="Complex number circle"
                 src="http://mathworld.wolfram.com/images/eps-gif/ComplexNumberArgand_1000.gif">
        </a>
        <p>
            A complex number also has a magnitude, or absolute value: the distance away from the origin. This
            is the hypotenuse of the triangle above. You can find this by simply using the Pythogorean Theorem
            using the real part and the imaginary part as the two known sides. For example,
            <span class="staticMath">|3+4i| = \sqrt{3^{2}+4^{2}} = 5</span>, meaning
            <span class="staticMath">3+4i</span> is 5 units away from the origin.
        </p>
        <p>
            Once we know our angle and magnitude, we can use those values to make a color. In HSL (hue, saturation, and lightness)
            color, the hue is between 0 and 360, just like our angle &theta;, so we set the hue of the color to
            the &theta;. We want the color to be fully saturized, so we set the saturation to 100%. Finally,
            we set the lightness based on the magnitude, so that the further away the complex number is from the origin,
            the lighter it is. <span class="staticMath">0+0i</span> is completely black. Undefined or "not a number" results
            are graphed gray.
        </p>
        <p>
            If you graph the identity function <span class="staticMath">f(z) = z</span> in my program, you can see
            exactly what color gets mapped to each point. Positive real is red, negative real is cyan, positive
            imaginary is light green and negative imaginary is deep purple, with beautiful complex numbers everywhere in between.
        </p>
        <h2>Functions to try </h2>
        <p>
            <span class="staticMath">f(z) = z </span>
        </p>
        <p>
            <span class="staticMath">f(z) = (z + 2i)(z - 2i) </span>
        </p>
        <p>
            <span class="staticMath">f(z) = \frac{1}{z} </span>
        </p>
        <p>
            <span class="staticMath">f(z) = \log(z)</span>
        </p>
        <p>
            <span class="staticMath">f(z) = \sin(z)\tan(z)</span>
        </p>
        <p>
            <span class="staticMath">f(z) = e^{z}</span>
        </p>
        <p>
            <span class="staticMath">f(z) = gamma(z)</span>
        </p>
        <p>
            <span class="staticMath">f(z) = \sin(e^{z})</span>
        </p>
        <p>
            <span class="staticMath">f(z) = \sin(\log(z))</span>
        </p>
        <h4>These functions have large portions of their graphs that graph infinity:</h4>
        <p>
            <span class="staticMath">f(z) = \log \left(\sin \left(e^z\right)\right)</span>
        </p>
        <p>
            <span class="staticMath">f(z) = \cos \left(z\right)^{e^z}</span>
        </p>
        <p>
            <span class="staticMath">f(z) = gamma(z)^{gamma(z)}</span>
        </p>
        <h2>Credits</h2>
        <p>
            My project uses <a href="http://mathquill.com/">Mathquill</a> for the amazing LaTex rendering, and <a href="http://mathjs.org/">Mathjs</a> for complex number calculations.
            Also thanks to my friends Matthew Sklar, Shaun Regenbaum, and Ezra Blaut for testing, and of course to Mr. Shillito
            for introducing me to the beauty of complex numbers in the first place.
        </p>
        <h4>By Dan Jutan</h4>
    </div>
</div>


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mathquill.js"></script>
<script type="text/javascript" src="js/math.js"></script>
<script type="text/javascript" src="js/staticfunctions.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>