158 lines
5.3 KiB
HTML
158 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="author" content="trimill">
|
|
<meta name="description" content="Plot complex functions">
|
|
<meta property="og:description" content="Plot complex functions">
|
|
<meta property="og:title" content="CXGraph">
|
|
<meta property="og:site_name" content="cx.trimill.xyz">
|
|
|
|
<title>CXGraph</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="canvas-container">
|
|
<canvas id="canvas"></canvas>
|
|
<svg id="overlay">
|
|
<line id="svg_axis_x" x1="0" y1="0" x2="0" y2="0" stroke="#0006" stroke-width="1.5" visibility="hidden" />
|
|
<line id="svg_axis_y" x1="0" y1="0" x2="0" y2="0" stroke="#0006" stroke-width="1.5" visibility="hidden" />
|
|
<circle id="svg_unitcircle" cx="0" cy="0" r="0" stroke="#0006" fill="none" stroke-width="1.5" visibility="hidden" />
|
|
<g id="svg_point_template" visibility="hidden">
|
|
<circle cx="0" cy="0" r="15" stroke="none" fill="#3337" />
|
|
<circle cx="0" cy="0" r="5" stroke="none" fill="#dddc" />
|
|
</g>
|
|
<g id="overlay_points">
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="menus">
|
|
<details class="menu" open>
|
|
<summary>Source</summary>
|
|
|
|
<div>
|
|
<input type="button" id="button_graph" value="Graph">
|
|
<input type="button" id="button_redraw" value="Redraw">
|
|
<input type="checkbox" id="checkbox_autoredraw" checked>
|
|
<label for="checkbox_autoredraw">Auto redraw</label>
|
|
</div>
|
|
|
|
<div id="div_error_msg" hidden></div>
|
|
<div><textarea id="source_text">f(z) = 6z^2 - 2i - 1 plot(z) = f(1 + sin(z)) / 8</textarea></div>
|
|
</details>
|
|
|
|
<div>
|
|
<details class="menu" open>
|
|
<summary>Options</summary>
|
|
<div>
|
|
<input type="button" id="button_reset_view" value="Reset view">
|
|
<input type="button" id="button_help" value="Help" onclick="window.open('https://g.trimill.xyz/trimill/cxgraph')">
|
|
</div>
|
|
<div>
|
|
<div><label for="range_resolution">Resolution</label></div>
|
|
<input type="range" id="range_resolution" name="resolution" min="-2" max="2" step="1" value="0">
|
|
</div>
|
|
|
|
<div>
|
|
<div><label for="range_shading">Shading intensity</label></div>
|
|
<input type="range" id="range_shading" min="0" max="1" step="0.01" value="0.3">
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<input type="checkbox" class="decor" id="checkbox_decor_1" data-value="1">
|
|
<label for="checkbox_decor_1">Real contours</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="checkbox" class="decor" id="checkbox_decor_2" data-value="2">
|
|
<label for="checkbox_decor_2">Imaginary contours</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="checkbox" class="decor" id="checkbox_decor_4" data-value="4">
|
|
<label for="checkbox_decor_4">Argument contours</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="checkbox" class="decor" id="checkbox_decor_8" data-value="8">
|
|
<label for="checkbox_decor_8">Magnitude contours</label>
|
|
</div>
|
|
|
|
<div>
|
|
<div><label for="range_contour">Contour intensity</label></div>
|
|
<input type="range" id="range_contour" min="0" max="1" step="0.01" value="0.0">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div>Coloring</div>
|
|
<input type="radio" name="color_mode" id="radio_color_0" data-value="0">
|
|
<label for="radio_color_0">Standard</label><br>
|
|
<input type="radio" name="color_mode" id="radio_color_1" data-value="1">
|
|
<label for="radio_color_1">Uniform</label><br>
|
|
<input type="radio" name="color_mode" id="radio_color_2" data-value="2">
|
|
<label for="radio_color_2">None</label>
|
|
</div>
|
|
|
|
<div>
|
|
Overlay
|
|
<div>
|
|
<input type="checkbox" id="overlay_axes">
|
|
<label for="overlay_axes">Draw axes</label>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="overlay_unitcircle">
|
|
<label for="overlay_unitcircle">Draw unit circle</label>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="menu" open>
|
|
<summary>Variables</summary>
|
|
<div id="slider_template" hidden>
|
|
<div>
|
|
<input type="text" class="var-name" style="width: 5ch;" placeholder="a">
|
|
=
|
|
<input type="number" class="var-value" style="width: 10ch;" value="0" required>
|
|
<input type="button" class="var-delete" value="X">
|
|
</div>
|
|
<div>
|
|
<input type="range" class="var-slider" min="-1" max="1" step="0.01" value="0">
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between;">
|
|
<input type="number" class="var-min" style="width: 6ch;" required value="-1">
|
|
<input type="number" class="var-step" style="width: 6ch;" required value="0.01">
|
|
<input type="number" class="var-max" style="width: 6ch;" required value="1">
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
<div id="point_template" hidden>
|
|
<input type="text" class="var-name" style="width: 5ch;" placeholder="b">
|
|
=
|
|
<input type="number" class="var-value-re" style="width: 8ch;" required value="0">
|
|
+
|
|
<input type="number" class="var-value-im" style="width: 8ch;" required value="0">i
|
|
<input type="button" class="var-delete" value="X">
|
|
<hr>
|
|
</div>
|
|
<div id="div_variables"></div>
|
|
<div id="buttons_var_new">
|
|
<input type="button" id="button_slider_new" value="+slider">
|
|
<input type="button" id="button_point_new" value="+point">
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.modules = {};
|
|
import('./index.js').then(m => window.modules.index = m);
|
|
import('./editor.js').then(m => window.modules.editor = m);
|
|
</script>
|
|
</body>
|
|
</html>
|