173 lines
4.5 KiB
HTML
173 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>zbyvaj's Graphing Calculator</title>
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tt {
|
|
font-family: "Consolas", "Courier New", monospace;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
#input {
|
|
width: 200px;
|
|
height: 300px;
|
|
font-size: 18px;
|
|
padding: 5px;
|
|
}
|
|
|
|
#floating-panel {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
/* width: 300px; */
|
|
/* height: 100px; */
|
|
background-color: #dddddddd;
|
|
z-index: 100;
|
|
padding: 10px;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="800" height="600"></canvas>
|
|
|
|
<div id="floating-panel">
|
|
<textarea id="input" class="tt" oninput="fnChanged()"></textarea>
|
|
<!-- <input type="text" id="input" class="tt" oninput="fnChanged()"> -->
|
|
<pre class="tt red" id="output"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
let drawGraph = null;
|
|
let setExpr = null;
|
|
let setNumExprs = null;
|
|
let printErrors = null;
|
|
|
|
const fnInput = document.getElementById("input");
|
|
|
|
let centerX = 0;
|
|
let centerY = 0;
|
|
let zoom = 10;
|
|
|
|
const canvas = document.getElementById("canvas");
|
|
|
|
function fnChanged() {
|
|
const fns = fnInput.value.split("\n");
|
|
setNumExprs(fns.length);
|
|
for (let i = 0; i < fns.length; i++) {
|
|
setExpr(i, fns[i]);
|
|
}
|
|
|
|
printErrors();
|
|
|
|
redraw();
|
|
}
|
|
|
|
let lastX = 0;
|
|
let lastY = 0;
|
|
let mouseDown = false;
|
|
|
|
canvas.addEventListener("mousedown", function(event) {
|
|
mouseDown = true;
|
|
});
|
|
|
|
canvas.addEventListener("mouseup", function(event) {
|
|
mouseDown = false;
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", function(event) {
|
|
if (mouseDown) {
|
|
const dx = (event.clientX - lastX);
|
|
const dy = (event.clientY - lastY);
|
|
|
|
centerX -= dx * 2 * zoom / canvas.width;
|
|
centerY += dy * 2 * zoom / canvas.width;
|
|
}
|
|
|
|
lastX = event.clientX;
|
|
lastY = event.clientY;
|
|
redraw();
|
|
});
|
|
|
|
canvas.addEventListener("wheel", function(event) {
|
|
event.preventDefault();
|
|
const delta = event.deltaY;
|
|
zoom *= Math.pow(1.1, delta * 0.01);
|
|
redraw();
|
|
});
|
|
|
|
let shouldRedraw = false;
|
|
|
|
function redraw() {
|
|
shouldRedraw = true;
|
|
}
|
|
|
|
function animate() {
|
|
if (drawGraph && shouldRedraw) {
|
|
// const fn = fnInput.value;
|
|
const xMin = -zoom + centerX;
|
|
const xMax = zoom + centerX;
|
|
const aspect = canvas.width / canvas.height;
|
|
const yMin = -zoom / aspect + centerY;
|
|
const yMax = zoom / aspect + centerY;
|
|
|
|
const pointerXcanvas = lastX;
|
|
const pointerYcanvas = lastY;
|
|
|
|
drawGraph(xMin, xMax, yMin, yMax, pointerXcanvas, pointerYcanvas);
|
|
|
|
shouldRedraw = false;
|
|
}
|
|
|
|
window.requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
|
|
// resize canvas size
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
redraw();
|
|
}
|
|
|
|
window.addEventListener("resize", resizeCanvas);
|
|
|
|
Module = {
|
|
onRuntimeInitialized: function() {
|
|
drawGraph = Module.cwrap("draw_graph", "void", ["number", "number", "number", "number", "number", "number"]);
|
|
setExpr = Module.cwrap("set_expr", "void", ["number", "string"]);
|
|
setNumExprs = Module.cwrap("set_num_exprs", "void", ["number"]);
|
|
printErrors = Module.cwrap("print_errors", "void", []);
|
|
|
|
resizeCanvas();
|
|
|
|
if (fnInput.value === "") {
|
|
fnInput.value = "x\nx^2\nsin(x)\nskibidi\n";
|
|
}
|
|
|
|
fnChanged();
|
|
fnInput.focus();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html> |