90 lines
3.6 KiB
HTML
90 lines
3.6 KiB
HTML
|
{% set meta={"title": "Complex Grapher", "desc": "Graph complex functions", "pagewidth": "1400px"} %}
|
||
|
|
{% extends "/_base.html" %}
|
||
|
|
{% block head %}
|
||
|
|
<style>
|
||
|
|
.left > span { display: block; }
|
||
|
|
#errors { color: #ff4444; }
|
||
|
|
.short { width: 70px; }
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.left, .right {
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
|
||
|
|
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
|
||
|
|
crossorigin="anonymous" defer>
|
||
|
|
</script>
|
||
|
|
<script src="webgl_base.js"></script>
|
||
|
|
<script src="grammar.js"></script>
|
||
|
|
<script src="main.js"></script>
|
||
|
|
{% endblock %}
|
||
|
|
{% block content %}
|
||
|
|
<div class="left">
|
||
|
|
<span class="category">——— Equation ———</span>
|
||
|
|
<span>f(z) = <input type="text" id="fz" value="sin(z)/z" style="width: 400px" /></span>
|
||
|
|
|
||
|
|
<span class="category">——— Axis scale ———</span>
|
||
|
|
<span>Real axis:
|
||
|
|
<input type="text" class="short" id="rmin" value="-10" />
|
||
|
|
to <input type="text" class="short" id="rmax" value="10" />
|
||
|
|
</span>
|
||
|
|
<span>Imaginary axis:
|
||
|
|
<input type="text" class="short" id="imin" value="-10" />
|
||
|
|
to <input type="text" class="short" id="imax" value="10" />
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span class="category">——— Shading options ———</span>
|
||
|
|
<span>Shading amount: <input type="range" min="0" max="0.95" value="0.5" step="0.05" id="shading" /></span>
|
||
|
|
<span><input type="checkbox" id="swapbw" /> Swap black and white</span>
|
||
|
|
<span><input type="checkbox" id="drawcontours" /> Draw contours</span>
|
||
|
|
<span><input type="checkbox" id="smoothcolor" /> Smooth coloring</span>
|
||
|
|
<span>
|
||
|
|
<span class="category">——— Iteration ———</span>
|
||
|
|
<input type="checkbox" id="enable_iters" onchange="changeIterationMode();" />
|
||
|
|
</span>
|
||
|
|
<div id="iteration_mode" hidden>
|
||
|
|
<div>Iterations: <input type="number" id="iterations" value="1" /></div>
|
||
|
|
<div>z₀(z) = <input type="text" id="init_z" value="z" style="width: 300px" /></div>
|
||
|
|
<div>c(z) = <input type="text" id="init_c" value="0" style="width: 300px" /></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<span>
|
||
|
|
<span class="category">——— Approximation settings ———</span>
|
||
|
|
<input type="checkbox" id="show_approx" onchange="let x=document.getElementById('approx_settings');x.hidden=!x.hidden;" />
|
||
|
|
</span>
|
||
|
|
<div id="approx_settings" hidden>
|
||
|
|
<span>coming soon!</span>
|
||
|
|
</div>
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<span class="category">——— Constants ———</span>
|
||
|
|
<div id="constants-wrapper"></div>
|
||
|
|
<input type="button" id="const-add" value="[+]" style="color: #44ff44" onclick="addConstant()" />
|
||
|
|
-->
|
||
|
|
|
||
|
|
<span class="category">——— DPI ———</span>
|
||
|
|
<span>
|
||
|
|
<a href="javascript:void(0)" onclick="dpi=1; encodeURLParams()">single</a>
|
||
|
|
<a href="javascript:void(0)" onclick="dpi=2; encodeURLParams()">double</a>
|
||
|
|
<a href="javascript:void(0)" onclick="dpi=4; encodeURLParams()">quadruple</a>
|
||
|
|
</span>
|
||
|
|
<span> </span>
|
||
|
|
<span>
|
||
|
|
<input type="button" id="go" value="Graph" onclick="graph()"/ >
|
||
|
|
<a href="javascript:void(0)" onclick="encodeURLParams()">Generate link</a>
|
||
|
|
</span>
|
||
|
|
<span id="errors"></span>
|
||
|
|
<span> </span>
|
||
|
|
<div><a href="help.html" target="_blank">Documentation</a></div>
|
||
|
|
</div>
|
||
|
|
<div class="right" id="canvas-wrapper">
|
||
|
|
<canvas id="canvas" width="640" height="640" style="width: 640px; height: 640px;"></canvas>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|