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
|
<!--
Graph complex functions (C->C)
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styleNew.css">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script src="js/complex.js"></script>
<script src="js/complexfunctions.js"></script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$']]}});
</script>
<title>Complex Functions</title>
</head>
<body>
<div class="container-fluid">
<div id="navbar"></div>
<script src="navbar.js"></script>
<h2>Graph <a href="https://en.wikipedia.org/wiki/Reverse_Polish_notation">reverse polish notation</a>
<a href="https://en.wikipedia.org/wiki/Complex_number">complex</a> functions</h2>
See explanation below.
<br>
<div class="container-fluid row">
<div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
<span class="input-group-addon">Function</span>
<input id="function" class="form-control" type="text" value="x exp">
</div>
</div>
<br>
<div class="container-fluid row">
<div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
<span class="input-group-addon">Width</span>
<input id="width" class="form-control" type="number" value="750">
</div>
</div>
<br>
<div class="container-fluid row">
<div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
<span class="input-group-addon">Height</span>
<input id="height" class="form-control" type="number" value="750">
</div>
</div>
<br>
<div class="container-fluid row">
<div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
<span class="input-group-addon">
<input id="display" class="checkbox" type="checkbox">
</span>
<span class="form-control">Immediately display result (no animation).</span>
</div>
</div>
<br>
<button id="animate" class="btn btn-default">Animate</button>
<div id="canvas"></div>
<div id="legend"></div>
</div>
<div class="container-fluid">
<div class="col-lg-6 col-md-8 col-sm-10 col-xs-12" id="explanation">
<h3>Explanation</h3>
The x axis represents the real component, and the y axis represents the imaginary component.
Complex numbers are numbers with both real and imaginary parts:
$$z = a + b\sqrt{-1} = a + bi$$
Reverse Polish Notation, or <i>postfix</i> notation is a way of writing functions. Normally, most people would write functions using
<i>infix</i> notation like this:
$$a + b + \sin c$$
Postfix notation looks like this:
$$a\ b + c \sin +$$
For a more simple example, $a + b$ would be $a\ b\ +$, and $\sin x$ would be $x \sin$.
You can plot multiple functions by separating them with commas, but it will be slow.
<h3>List of all functions and constants</h3>
<table class='table table-bordered table-hover'>
<tr><th>Function or constant</th> <th>What it means</th></tr>
<tr><td>x</td> <td>The input to the function.</td></tr>
<tr><td>i</td> <td>$i = \sqrt{-1}$</td></tr>
<tr><td>n (e.g. 5, 4, 3.1, -32.123)</td> <td> A real number. </td></tr>
<tr><td>ni (e.g. 5i, 4i, 3.1i, -32.123i)</td> <td>$i$ ($\sqrt{-1}$) times a certain real number.</td></tr>
<tr><td>+</td> <td>Addition</td></tr>
<tr><td>-</td> <td>Subtraction</td></tr>
<tr><td>*</td> <td>Multiplication</td></tr>
<tr><td>/</td> <td>Division</td></tr>
<tr><td>^</td> <td>Exponentiation ($a^b$)</td></tr>
<tr><td>re</td> <td>Real component. If $z = a+bi$, $\textrm{Re}(z) = a$</td></tr>
<tr><td>im</td> <td>Imaginary component. If $z = a+bi$, $\textrm{Im}(z) = b$</td></tr>
<tr><td>pi</td> <td>$\pi = 3.14159265...$</td></tr>
<tr><td>e</td> <td>$e = 2.7182818...$</td></tr>
<tr><td>sqrt</td> <td>$\sqrt{x}$</td></tr>
<tr><td>abs</td> <td>$|x|$</td></tr>
<tr><td>exp</td> <td>$e^x$</td></tr>
<tr><td>sin</td> <td>Sine</td></tr>
<tr><td>cos</td> <td>Cosine</td></tr>
<tr><td>tan</td> <td>Tangent</td></tr>
<tr><td>r, theta</td> <td>Polar coordinates</td></tr>
<tr><td>ln</td> <td>Natural logarithm ($\log_e x$)</td></tr>
<tr><td>log</td> <td>Logarithm ($\log_a b$)</td></tr>
<tr><td>sinh</td> <td>Hyperbolic sine</td></tr>
<tr><td>cosh</td> <td>Hyperbolic cosine</td></tr>
<tr><td>tanh</td> <td>Hyperbolic tangent</td></tr>
</table>
</div>
</div>
</body>
</html>
|
