trimill.xyz/flaskr/templates/projects/complex_grapher/help.html
2022-06-23 02:23:38 -04:00

139 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% set meta={"title": "Complex Grapher Documentation", "desc": "Documentation for Complex Grapher", "hidden": True} %}
{% extends "/_base.html" %}
{% block content %}
<p>
Complex Grapher is an online tool to visualize complex functions using <a href="https://en.wikipedia.org/wiki/Domain_coloring">domain coloring</a>. This help guide assumes basic knowledge about how complex numbers and domain coloring work, Wikipedia links will be provided for further explanation.
</p>
<p>Complex Grapher requires a browser that supports WebGL 3.0 or greater.</p>
<h2>The user interface</h2>
<p>
<ul>
<li><b>Equation</b> - Enter the function you want to graph here, in terms of <code>z</code>. See below for information about the syntax of expressions.</li>
<li><b>Axis scale</b> - Set the bounds of the real and imaginary axes. The first number in each pair is the left/bottom side of the canvas, the second number is the top/right side.</li>
<li><b>Shading amount</b> - Control how much black/white shading is applied to numbers close to 0 or ∞. Furthest left is no shading (however, values equal to 0 or ∞ will still be black and white, respectively).</li>
<li><b>Swap black and white</b> - Check this to instead use black for ∞ and white for 0.</li>
<li><b>Draw contours</b> - Draw rings at integer distances from the origin. The first ring (about the unit circle) is white, the rest are black.</li>
<li><b>Smooth coloring</b> - Use a smoother coloring method.</li>
<li><b>Iteration</b>
This section allows you to iterate the function you put in above a set number of times (that is, call the function on its own output repeatedly). If iteration is enabled, you may also use the variables <code>c</code> and <code>n</code> in your function. <code>c</code> will remain constant throughout the iterations, and <code>n</code> represents the current iteration number (starting with 0).
<ul>
<li><b>Iterations</b> - How many times to iterate the function.</li>
<li><b>z₀(z)</b> - The initial value for <code>z</code></li>
<li><b>c(z)</b> - The initial value for <code>c</code></li>
</ul>
</li>
<li><b>Arg offset</b> - use different branches of functions by changing where the branch cut of <code>arg(z)</code> is.</li>
<li><b>DPI</b> - Control the resolution of the canvas. "single" uses the browser's default, "double" uses twice that on both axes (resulting in 4 times as many pixels), "quadruple" uses four times that (16 times as many pixels). These links will save the graph as a URL parameter and reload the page.</li>
<li><b>Graph</b> - Self-explanatory.</li>
<li><b>Generate link</b> - Generate a link containing all of the equations and settings currently applied.</li>
</ul>
</p>
<h2>Syntax</h2>
<div class="codeblock"><pre>
level0 := level1 (("+" | "-") level1)*
level1 := level2 (("*" | "/") level2)*
level2 := (level3 "^")* level3
level3 := "(" level0 ")"
| "{" condition "}"
| name "(" (level0 ",")* level0 ")"
| name
| imag
| real
| "-" level1
condition := level0 ":" level0 "," condition
| level0
name := /[a-zA-Z_√Γπτγ]+/
real := number
imag := number "i"
number := ("+" | "-")? digits "." digits
| ("+" | "-")? digits "."
| ("+" | "-")? "." digits
| ("+" | "-")? digits
digits := /[0-9]+/
whitespace = /[ \t\n\r]*/
</pre></div>
<h3>Numbers</h3>
<p>
Real numbers can be written in standard base-10 form (ex. <code>37</code>, <code>-1045</code>, <code>33.26258</code>). Imaginary numbers can be written similarly, but followed by an <code>i</code> (ex. <code>3i</code>, <code>-25i</code>, <code>.37i</code>). <code>i</code> can also be used alone. Complex numbers can be expressed simply as the sum of a real and an imaginary number (ex. <code>3-5i</code>, <code>.7+52i</code>).
</p>
<h3>Operators</h3>
<p>
The five basic operators are <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, and <code>^</code> (exponentiation). These follow the normal order of operations, with <code>^</code> being right associative (so 2^3^4 = 2^(3^4), not (2^3)^4). Parentheses <code>( )</code> can be used for grouping.
</p>
<h3>Variables and constants</h3>
<p>
In <code>f(z)</code>, the variables <code>z</code>, <code>c</code>, and <code>n</code> are available. <code>z</code> is the argument of the function, and <code>c</code> and <code>n</code> are used for iteration as described above. In <code>z₀(z)</code> and <code>c(z)</code>, the only variable available is <code>z</code>.
</p>
<p>
The constants <code>e</code>, <code>tau</code> or <code>τ</code>, <code>pi</code> or <code>π</code> (= τ/2), and <code>emg</code> or <code>γ</code> (the <a href="https://en.wikipedia.org/wiki/Euler%27s_constant">EulerMascheroni constant</a>) are available
</p>
<h3>Functions</h3>
<p>
Functions are written as the funciton name followed by the argument in parentheses. All functions only take one argument. Examples: <code>sin(z)</code>, <code>gamma(3+2i)</code>, <code>conj(1/z)</code>.
</p>
<p>
The following functions are available:
<ul>
<li><code>re</code> and <code>im</code> - the real or imaginary part of a complex number, respectively</li>
<li><code>abs</code> - absolute value (Euclidean distance from the origin)</li>
<li><code>arg</code> - the argument (angle about the origin in the range (-π,π])</li>
<li><code>norm</code> - the norm (equal to <code>abs(z)^2</code> and <code>re(z)^2 + im(z)^2</code>)</li>
<li><code>conj</code> - complex conjugate</li>
<li><code>sqrt</code> or <code></code> - square root (equal to <code>z^0.5</code>)</li>
<li><code>root</code> - nth root (first argument is radicand, second is index)</li>
<li><code>exp</code> - the exponential function (equal to <code>e^z</code>)</li>
<li><code>ln</code> - the natural logarithm</li>
<li><code>log</code> - logarith with base, where the base is the second argument (defaults to e)</li>
<li><code>recip</code> - reciprocal, equivalent to <code>1/z</code></li>
<li><code>sin cos tan</code> - sine, cosine and tangent</li>
<li><code>asin acos atan</code> - <a href="https://en.wikipedia.org/wiki/Inverse_trigonometric_functions">inverse</a> sine, cosine and tangent</li>
<li><code>sinh cosh tanh</code> - <a href="https://en.wikipedia.org/wiki/Hyperbolic_functions">hyperbolic</a> sine, cosine and tangent</li>
<li><code>asinh acosh atanh</code> - <a href="https://en.wikipedia.org/wiki/Inverse_hyperbolic_functions">inverse hyperbolic</a> sine, cosine and tangent</li>
<li><code>gamma</code> or <code>Γ</code> - the <a href="https://en.wikipedia.org/wiki/Gamma_function">gamma</a> function</li>
<li><code>unitcircle</code> - set abs(z) to 1, normalizing the complex number to the unit circle</li>
<li><code>signre</code> - the sign of the real part of z (1 if <code>re(z)</code>&gt;0, -1 if <code>re(z)</code>&lt;0, 0 if <code>re(z)</code>=0</li>
<li><code>signim</code> - the sign of the imaginary part of z (1 if <code>im(z)</code>&gt;0, -1 if <code>im(z)</code>&lt;0, 0 if <code>im(z)</code>=0</li>
<li><code>lambertw</code> - the <a href="https://en.wikipedia.org/wiki/Lambert_W_function">Lambert W function</a></li>
</ul>
</p>
<p>
The following functions are currently experimental and may be changed or removed later:
</p>
<ul>
<li><code>digamma</code> - the <a href="https://en.wikipedia.org/wiki/Digamma_function">digamma function</a></li>
<li><code>loggamma</code> - the <a href="https://en.wikipedia.org/wiki/Gamma_function#The_log-gamma_function">log-gamma function</a></li>
<li><code>loggamma</code> or <code>lngamma</code> - the <a href="https://en.wikipedia.org/wiki/Gamma_function#The_log-gamma_function">log-gamma function</a></li>
<li><code>erf</code> - the <a href="https://en.wikipedia.org/wiki/Error_function">error function</a></li>
<li><code>eulerfn</code> - the <a href="https://en.wikipedia.org/wiki/Euler_function">Euler function</a></li>
<li><code>ti</code> - the <a href="https://en.wikipedia.org/wiki/Inverse_tangent_integral">inverse tangent integral</a></li>
</ul>
<h3>Conditionals</h3>
<p>
Conditionals (using curly braces <code>{ }</code>) can be used like if-statements to pick an expression from a list. They take the form <code>{condition1: expression1, condition2: expression2, expression3}</code>. The conditions are evaluated from left to right, once the first true one is reached the corresponding expression is evaluated. The final expression (with no condition) acts as a fallback if none of the previous conditions were true. A condition is true if the real part of the result is strictly positive.
</p>
<p>
Example: <code>{z-3: 2*z, z-2: z^2, 1/z}</code> will evaluate to <code>2*z</code> whenever <code>re(z)</code>&gt;3 (<code>re(z-3)</code>&gt;0), otherwise to <code>z^2</code> whenever <code>re(z)</code>&gt;2, otherwise to <code>1/z</code>.
</p>
<p>
Conditionals are currently experimental and may be changed later.
</p>
<h2>A word of caution</h2>
<p>
WebGL is very prone to crashing, especially when using iteration. Some operations, like addition and multiplication, are very fast and should not cause too many problems. Others, like <code>exp(z)</code> and <code>sinh(z)</code> are fairly fast since they are implemented directly in the hardware. But some functions, like <code>lambertw(z)</code> and <code>gamma(z)</code> are a lot slower due to their slow implementations. For the best performance, avoid mixing slow functunctions, high iteration counts, and high DPI settings together.
</p>
<h2>Example graphs</h2>
<ul>
<li><a href=".?src=eyJleHByIjoiKHpeMyArIHopLygyKnpeMiAtIDEpIiwiYXhlcyI6WyItMiIsIjIiLCItMiIsIjIiXSwic2hhZGluZyI6IjAuNDUiLCJzd2FwYnciOmZhbHNlLCJjb250b3VycyI6ZmFsc2UsIml0ZXJtb2RlIjpmYWxzZX0">Rational equation</a></li>
<li><a href=".?src=eyJleHByIjoiZXhwKDEveikiLCJheGVzIjpbIi0xIiwiMSIsIi0xIiwiMSJdLCJzaGFkaW5nIjoiMC41Iiwic3dhcGJ3IjpmYWxzZSwiY29udG91cnMiOmZhbHNlLCJpdGVybW9kZSI6ZmFsc2V9">Essential singularity</a></li>
<li><a href=".?src=eyJleHByIjoiel56Xnpeel56IiwiYXhlcyI6WyItOCIsIjgiLCItOCIsIjgiXSwic2hhZGluZyI6IjAuNDUiLCJzd2FwYnciOmZhbHNlLCJjb250b3VycyI6ZmFsc2UsIml0ZXJtb2RlIjpmYWxzZX0=">Power Tower</a></li>
<li><a href=".?src=eyJleHByIjoiY156IiwiYXhlcyI6WyItOCIsIjgiLCItOCIsIjgiXSwic2hhZGluZyI6IjAuNDUiLCJzd2FwYnciOmZhbHNlLCJjb250b3VycyI6ZmFsc2UsIml0ZXJtb2RlIjp7Iml0ZXJzIjoiMjAyIiwiemluaXQiOiJ6IiwiY2luaXQiOiJ6In19">Infinite power tower</a></li>
<li><a href=".?src=eyJleHByIjoieiAtICh6XjMgLSAxKS8oMyp6XjIpIiwiYXhlcyI6WyItNSIsIjUiLCItNSIsIjUiXSwic2hhZGluZyI6IjAuNDUiLCJzd2FwYnciOmZhbHNlLCJjb250b3VycyI6ZmFsc2UsIml0ZXJtb2RlIjp7Iml0ZXJzIjoiMjAiLCJ6aW5pdCI6InoiLCJjaW5pdCI6IjAifX0=">Newton's fractal</a></li>
<li><a href=".?src=eyJleHByIjoiel4yICsgYyIsImF4ZXMiOlsiLTIiLCIxIiwiLTEuNSIsIjEuNSJdLCJzaGFkaW5nIjoiMC41Iiwic3dhcGJ3Ijp0cnVlLCJjb250b3VycyI6ZmFsc2UsIml0ZXJtb2RlIjp7Iml0ZXJzIjoiMjAwIiwiemluaXQiOiIwIiwiY2luaXQiOiJ6In19">The Mandelbrot set</a></li>
<li><a href=".?src=eyJleHByIjoieiAqICgxIC0gY14obisxKSkiLCJheGVzIjpbIi0xLjEiLCIxLjEiLCItMS4xIiwiMS4xIl0sInNoYWRpbmciOiIwLjQ1Iiwic3dhcGJ3IjpmYWxzZSwiY29udG91cnMiOmZhbHNlLCJpdGVybW9kZSI6eyJpdGVycyI6IjYwIiwiemluaXQiOiIxIiwiY2luaXQiOiJ6In19">The Euler function as an infinte product</a></li>
<ul>
{% endblock %}