summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpommicket <leonardomtenenbaum@gmail.com>2016-10-16 15:07:39 -0400
committerpommicket <leonardomtenenbaum@gmail.com>2016-10-16 15:07:39 -0400
commit9696c9b2753f5d7a55eca94331d1ec01ced08e52 (patch)
treee35f11dbf451352553b3c1bc341668302ee7b29d
parentc1ff9cb3c1246fa38f194be67c5bc003a2e59357 (diff)
Added complex RPN functions
Diffstat
-rw-r--r--complexfunctions.html89
-rw-r--r--css/styleNew.css25
-rw-r--r--js/complex.js282
-rw-r--r--js/complexfunctions.js86
4 files changed, 482 insertions, 0 deletions
diff --git a/complexfunctions.html b/complexfunctions.html
new file mode 100644
index 0000000..f815b41
--- /dev/null
+++ b/complexfunctions.html
@@ -0,0 +1,89 @@
+<!--
+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="http://www.numericjs.com/lib/numeric-1.2.6.min.js"></script>
+ <script src="js/complex.js"></script>
+ <script src="js/complexfunctions.js"></script>
+ <script type="text/javascript" src="http://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>
+ <button id="animate" class="btn btn-default">Animate</button>
+ <div id="canvas"></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$.
+ <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>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>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>
diff --git a/css/styleNew.css b/css/styleNew.css
new file mode 100644
index 0000000..467e428
--- /dev/null
+++ b/css/styleNew.css
@@ -0,0 +1,25 @@
+#navbar
+{
+ margin-top: 10px;
+}
+
+footer
+{
+ font-size:12px;
+}
+
+.project-title
+{
+ font-size: 22px;
+}
+
+.checkbox
+{
+ width: 20px;
+ height: 20px;
+}
+
+.with-margin
+{
+ margin-bottom: 5px;
+}
diff --git a/js/complex.js b/js/complex.js
new file mode 100644
index 0000000..3f009bd
--- /dev/null
+++ b/js/complex.js
@@ -0,0 +1,282 @@
+/*
+ complex.js
+ Client-side complex numbers in JavaScript
+*/
+var complex = {};
+
+complex.i = [0, 1];
+complex.logi = [0, 0.682188177];
+complex.PI = [Math.PI, 0];
+complex.E = [Math.E, 0];
+
+complex.lnAccuracy = 20;
+
+
+complex.re = function (a)
+{
+ return a[0];
+}
+
+complex.im = function (a)
+{
+ return a[1];
+}
+
+// Create a complex number from a real number
+complex.reToC = function (a)
+{
+ return [a, 0];
+}
+
+complex.reC = function (a)
+{
+ return complex.reToC(complex.re(a));
+}
+
+complex.imC = function (a)
+{
+ return complex.reToC(complex.im(a));
+}
+
+
+
+complex.show = function (a)
+{
+ var im = complex.im(a);
+ var re = complex.re(a);
+ if (im == 1 && re == 0)
+ return "i";
+ if (im == 0)
+ return re.toString();
+ if (im == 1)
+ return re + " + i";
+ if (re == 0)
+ return im + "i";
+ return re + " + " + im + "i";
+}
+
+complex.add = function (a, b)
+{
+ return [complex.re(a) + complex.re(b), complex.im(a) + complex.im(b)];
+}
+
+complex.neg = function (a)
+{
+ return [-complex.re(a), -complex.im(a)];
+}
+
+complex.sub = function (a, b)
+{
+ return complex.add(a, complex.neg(b));
+}
+
+complex.mult = function (a, b)
+{
+ var a_Re, a_Im, b_Re, b_Im;
+ a_Re = complex.re(a);
+ a_Im = complex.im(a);
+ b_Re = complex.re(b);
+ b_Im = complex.im(b);
+ return [a_Re * b_Re - a_Im * b_Im, a_Re * b_Im + a_Im * b_Re];
+}
+
+complex.recip = function (a)
+{
+ var re = complex.re(a);
+ var im = complex.im(a);
+ var divBy = re*re + im*im;
+ return [re/divBy, -im/divBy]
+}
+
+complex.div = function (a, b)
+{
+ return complex.mult(a, complex.recip(b));
+}
+
+complex.exp = function (a)
+{
+ var re = complex.re(a);
+ var im = complex.im(a);
+ var expRe = Math.exp(re);
+ return [expRe * Math.cos(im), expRe * Math.sin(im)];
+}
+
+complex.theta = function (a)
+{
+ return Math.atan(complex.im(a) / complex.re(a));
+}
+
+complex.abs = function (a)
+{
+ var re = complex.re(a);
+ var im = complex.im(a);
+ return Math.sqrt(re*re + im*im);
+}
+
+complex.polar = function (a)
+{
+ return [complex.abs(a), complex.theta(a)];
+}
+
+complex.arg = function (a)
+{
+ var x = complex.re(a);
+ var y = complex.im(a);
+ var theta = complex.theta(a);
+ if (x > 0)
+ return theta;
+ if (x < 0 && y >= 0)
+ return theta + Math.PI;
+ if (x < 0 && y < 0)
+ return theta - Math.PI;
+ if (x == 0 && y > 0)
+ return Math.PI / 2;
+ if (x == 0 && y < 0)
+ return -Math.PI / 2;
+ return 1 / 0;
+}
+
+complex.ln = function (a)
+{
+ return [Math.log(complex.abs(a)), complex.arg(a)];
+}
+
+complex.log = function (base, a)
+{
+ return complex.div(complex.ln(a), complex.ln(base));
+}
+
+complex.pow = function (a, b)
+{
+ return complex.exp(complex.mult(b, complex.ln(a)));
+}
+
+complex.sin = function (a)
+{
+ var ia = complex.mult(complex.i, a);
+ return complex.mult([0, 0.5], complex.sub(complex.exp(complex.neg(ia)), complex.exp(ia)));
+}
+
+complex.cos = function (a)
+{
+ return complex.sin(complex.sub(complex.reToC(Math.PI / 2), a));
+}
+
+complex.tan = function (a)
+{
+ return complex.div(complex.sin(a), complex.cos(a));
+}
+
+complex.sqrt = function (a)
+{
+ return complex.pow(a, complex.reToC(0.5));
+}
+
+complex.sinh = function (a)
+{
+ return complex.mult([0.5, 0], complex.sub(complex.exp(a), complex.exp(complex.neg(a))));
+}
+
+complex.cosh = function (a)
+{
+ return complex.mult([0.5, 0], complex.add(complex.exp(a), complex.exp(complex.neg(a))))
+}
+
+complex.tanh = function (a)
+{
+ return complex.div(complex.sinh(a), complex.cosh(a));
+}
+
+complex.rpn = function (s)
+{
+ // complex.rpn :: String -> (Complex -> Complex)
+
+
+ var tokens = s.split(" ");
+
+ return function(x)
+ {
+ var token;
+ var stack = [];
+ for (var i = 0; i < tokens.length; i++)
+ {
+ token = tokens[i];
+ switch (token)
+ {
+ case "+":
+ stack.push(complex.add(stack.pop(), stack.pop()));
+ break;
+ case "*":
+ stack.push(complex.mult(stack.pop(), stack.pop()));
+ break;
+ case "-":
+ var val2 = stack.pop();
+ var val1 = stack.pop();
+ stack.push(complex.sub(val1, val2));
+ break;
+ case "/":
+ var val2 = stack.pop();
+ var val1 = stack.pop();
+ stack.push(complex.div(val1, val2));
+ break;
+ case "^":
+ var val2 = stack.pop();
+ var val1 = stack.pop();
+ stack.push(complex.pow(val1, val2));
+ break;
+ case "sqrt":
+ stack.push(complex.sqrt(stack.pop()));
+ break;
+ case "exp":
+ stack.push(complex.exp(stack.pop()));
+ break;
+ case "sin":
+ stack.push(complex.sin(stack.pop()));
+ break;
+ case "cos":
+ stack.push(complex.cos(stack.pop()));
+ break;
+ case "tan":
+ stack.push(complex.tan(stack.pop()));
+ break;
+ case "sinh":
+ stack.push(complex.sinh(stack.pop()));
+ break;
+ case "cosh":
+ stack.push(complex.cosh(stack.pop()));
+ break;
+ case "tanh":
+ stack.push(complex.tanh(stack.pop()));
+ break;
+ case "re":
+ stack.push(complex.reC(stack.pop()));
+ break;
+ case "im":
+ stack.push(complex.imC(stack.pop()));
+ break;
+ case "x":
+ stack.push(x);
+ break;
+ case "i":
+ stack.push(complex.i);
+ break;
+ case "e":
+ stack.push(complex.E);
+ break;
+ case "pi":
+ stack.push(complex.PI);
+ break;
+ default:
+ if (token[token.length-1] == "i")
+ {
+ stack.push([0, parseFloat(token.substring(0, token.length-1))]);
+ }
+ else
+ {
+ stack.push(complex.reToC(parseFloat(token)));
+ }
+ }
+ }
+ return stack.pop();
+ };
+}
diff --git a/js/complexfunctions.js b/js/complexfunctions.js
new file mode 100644
index 0000000..fce70a6
--- /dev/null
+++ b/js/complexfunctions.js
@@ -0,0 +1,86 @@
+var domainPoints;
+var rangePoints;
+var animating = false;
+var t = 0;
+var SCALE = 5;
+
+function drawPoints(points)
+{
+ background(255);
+ for (var i = 0; i < points.length; i++)
+ {
+ point((points[i][0]/SCALE+0.5)*width, (points[i][1]/SCALE+0.5)*height);
+ }
+}
+
+
+function mapFunc(func)
+{
+ var f = complex.rpn(func);
+ rangePoints = [];
+ for (var i = 0; i < domainPoints.length; i++)
+ {
+ rangePoints.push(f(domainPoints[i]));
+ }
+}
+
+function drawFunc(func)
+{
+ mapFunc(func);
+ animating = true;
+}
+
+function draw()
+{
+
+ if (animating)
+ {
+ var midpoints = [];
+ for (var i = 0; i < domainPoints.length; i++)
+ midpoints.push(complex.add(complex.mult(domainPoints[i], complex.reToC(1-t)), complex.mult(rangePoints[i], complex.reToC(t))));
+
+ drawPoints(midpoints);
+
+ t += 0.01;
+ if (t >= 1)
+ {
+ animating = false;
+ drawPoints(rangePoints);
+ }
+
+
+ }
+}
+
+function setup()
+{
+ var canvas = createCanvas(750, 750);
+ canvas.parent("canvas");
+ stroke(0,0,100);
+ domainPoints = [];
+ for (var i = 10; i < width; i += 50)
+ {
+ for (var j = 0; j < height; j++)
+ {
+ domainPoints.push([(j/width-0.5)*SCALE, (i/height-0.5)*SCALE]);
+ domainPoints.push([(i/width-0.5)*SCALE, (j/height-0.5)*SCALE]);
+ }
+ }
+ drawPoints(domainPoints);
+}
+
+$(function()
+{
+ $("#animate").click(function()
+ {
+ t = 0;
+ animating = false;
+ var func = $("#function").val();
+ drawFunc(func);
+ });
+ $("#function").keydown(function(e)
+ {
+ if (e.keyCode == 13)
+ $("#animate").click();
+ });
+});
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-16 10:35:20 +0000