Skip to content

Commit

Permalink
feature(exploring): equation solver
Browse files Browse the repository at this point in the history
  • Loading branch information
holgerengels committed Jun 29, 2024
1 parent dfd3fe8 commit cd262f1
Show file tree
Hide file tree
Showing 9 changed files with 238 additions and 38 deletions.
17 changes: 9 additions & 8 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@
"deepmerge": "^4.3.0",
"eslint-plugin-lit": "^1.8.2",
"http-server": "^14.1.1",
"koa-proxies": "^0.12.3",
"koa-proxies": "^0.12.4",
"lint-staged": "^13.1.2",
"rimraf": "^4.1.2",
"rimraf": "^5.0.7",
"rollup": "^2.79.1",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-workbox": "^6.2.0",
Expand Down Expand Up @@ -78,21 +79,21 @@
"@material/mwc-textfield": "^0.27.0",
"@material/mwc-top-app-bar": "^0.27.0",
"@material/mwc-top-app-bar-fixed": "^0.27.0",
"firebase": "^10.4.0",
"jsxgraph": "^1.6.0",
"katex": "^0.16.8",
"firebase": "^10.12.2",
"jsxgraph": "^1.9.2",
"katex": "^0.16.10",
"kmap-ascii-math": "^0.9.19",
"kmap-html-editor": "^0.9.12",
"kmap-jsxgraph": "^0.9.16",
"kmap-solve-tree": "^0.9.17",
"kmap-solvee": "^0.9.0",
"kmap-term-tree": "^0.9.21",
"kmap-binomial-coefficient": "^0.9.5",
"lit": "^2.5.0",
"lit": "^2.8.0",
"pwa-helper-components": "^0.2.10",
"pwa-helpers": "^0.9.1",
"reselect": "^4.1.8",
"reselect": "^5.1.1",
"resize-observer-polyfill": "^1.5.1",
"rollup-plugin-terser": "^7.0.2",
"workbox-broadcast-update": "^6.5.4",
"workbox-core": "^6.5.4"
}
Expand Down
3 changes: 3 additions & 0 deletions client/src/components/lazy-components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ export async function lazyComponents(code: string) {
case 'kmap-binomial-coefficient':
customElements.define('kmap-binomial-coefficient', (await import('kmap-binomial-coefficient')).KmapBinomialCoefficient);
break;
case 'kmap-solvee':
customElements.define('kmap-solvee', (await import('kmap-solvee')).KmapSolvee);
break;
}
//customElements.define(tag, (await import(source))[constructor]);

Expand Down
14 changes: 7 additions & 7 deletions server/src/other/jsxgraph/current-slope.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
grid-template-columns: 1fr;
}
.jxgbox { border-radius: 0px; border: none}
.term { background-color: white; }
</style>
</head>
<body>
Expand All @@ -33,18 +34,17 @@
var p2 = board.create('point', [10, 0], {visible: false, name: ''});
var l1 = board.create('segment', [p1, p2], {visible: false, name: ''});
var x1 = board.create('glider', [3, 0, l1], {visible: true, name: 'x_1', label: {fontSize: 1.3, fontUnit: 'em', color: '#D55E00'}});
var l2 = board.create('segment', [x1, p2], {visible: false, name: ''});
var x2 = board.create('glider', [7, 0, l2], {visible: true, name: 'x_2', label: {fontSize: 1.3, fontUnit: 'em', color: '#D55E00'}});
var x2 = board.create('glider', [7, 0, l1], {visible: true, name: 'x_2', label: {fontSize: 1.3, fontUnit: 'em', color: '#D55E00'}, attractors: [x1], attractorDistance: .3});
var y1 = board.create('point', [() => x1.X(), () => x1.X()**2], {visible: true, name: '', color: '#0072B2'});
var y2 = board.create('point', [() => x2.X(), () => x2.X()**2], {visible: true, name: '', color: '#0072B2'});
var s1 = board.create('line', [x1, y1], {visible: true, name: '', dash: 2});
var s2 = board.create('line', [x2, y2], {visible: true, name: '', dash: 2});
var s3 = board.create('segment', [x1, x2], {visible: true, withLabel: true, strokeColor: '#D55E00', name: () => "&Delta;x = " + JXG.toFixed((x2.X() - x1.X()), 1), label: {fontSize: 1.3, fontUnit: 'em', color: '#D55E00'}});
var s = board.create('line', [y1, y2], {visible: true, name: '', color: '#D55E00'});
var y4 = board.create('text', [() => (x2.X() - x1.X()) / 2 + x1.X() - 1.5, () => (y2.Y() - y1.Y())/2 + y1.Y(), () => x2.X() !== x1.X() ? "Sekante" : 'Tangente'],
{fontSize: 1.3, fontUnit: 'em', color: () => x2.X() !== x1.X() ? '#D55E00' : 'red'});
var s3 = board.create('segment', [x1, x2], {visible: true, withLabel: true, strokeColor: '#D55E00', name: () => "&Delta;x = " + JXG.toFixed((x2.X() - x1.X()), 1), label: {fontSize: 1.3, fontUnit: 'em', color: '#D55E00', offset: [0,-14], anchorX: 'middle', cssClass: 'term'}});
var s = board.create('line', [y1, y2], {visible: Math.abs(x2.X() - x1.X()) > .1, name: '', color: '#D55E00'});
var y4 = board.create('text', [() => (x2.X() - x1.X()) / 2 + x1.X() - 1.5, () => (y2.Y() - y1.Y())/2 + y1.Y(), () => Math.abs(x2.X() - x1.X()) > .1 ? "Sekante" : 'Tangente'],
{fontSize: 1.3, fontUnit: 'em', color: () => Math.abs(x2.X() - x1.X()) > .1 ? '#D55E00' : 'red'});
var y3 = board.create('point', [() => x1.X() + 1, () => 2*x1.X() + y1.Y()], {visible: false});
var t = board.create('line', [y1, y3], {visible: () => x2.X() === x1.X(), name: 'Tangente', color: 'red'});
var t = board.create('line', [y1, y3], {visible: () => Math.abs(x2.X() - x1.X()) < .1, name: 'Tangente', color: 'red'});

//board.create('line', [pc, p0], {straightFirst: false, straightLast: false, dash: 2});

Expand Down
2 changes: 1 addition & 1 deletion server/src/other/jsxgraph/parabola-vertex-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<script>
var board = JXG.JSXGraph.initBoard('board', {boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: false, showZoom: false, showCopyright: false, pan: { enabled: false}});
var p = board.create('point', [0, 0], {visible: true, name: 'P', snapToGrid: true, snapSizeX: .5, snapSizeY: .5});
var s = board.create('slider', [[-4.5, -4], [-2.5,-4], [-2, 1, 2]], {snapWidth: .5, ticks: { drawLabels: true, label: {fontSize: 16, strokeColor: '#D55E00', offset: [-4, -16]} }, name: 'a', digits: 1, label: {fontSize: 16, strokeColor: '#D55E00'}});
var s = board.create('slider', [[-4.5, -4], [-2.5,-4], [-2, 1, 2]], {snapWidth: .5, name: 'a', digits: 1, label: {fontSize: 16, strokeColor: '#D55E00'}});
var g = board.create('functiongraph', [(x) => s.Value() * x**2], {strokeWidth: 1, dash: 2});
var f = board.create('functiongraph', [(x) => s.Value() * (x-p.X())**2 + p.Y()], {strokeWidth: 3});

Expand Down
5 changes: 3 additions & 2 deletions server/src/other/jsxgraph/plane-parametric-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,9 @@
var vc = view.create('line3d', [pa, pc], { fixed: true, strokeColor: JXG.palette.orange, strokeWidth: 3, lastArrow: { type: 2, size: 4 } });
var tc = view.create('point3d', [() => pa.X() + (pc.X() - pa.X()) / 2, () => pa.Y() + (pc.Y() - pa.Y()) / 2, () => pa.Z() + (pc.Z() - pa.Z()) / 2 ], { visible: true, size: 0, label: { color: 'red', useKatex: true, autoPosition: false }, name: '\\vec v' });
var px = view.create('point3d', [() => pa.X() + r.Value() * (pb.X() - pa.X()) + s.Value() * (pc.X() - pa.X()), () => pa.Y() + r.Value() * (pb.Y() - pa.Y()) + s.Value() * (pc.Y() - pa.Y()), () => pa.Z() + r.Value() * (pb.Z() - pa.Z()) + s.Value() * (pc.Z() - pa.Z())], { size: 4, name: '', visible: true });
var vx = view.create('line3d', [p0, px], { fixed: true, strokeColor: 'darkgray', strokeWidth: 3, dash: 2, lastArrow: { type: 2, size: 4 } });
var tx = view.create('point3d', [() => px.X() / 2, () => px.Y() / 2, () => px.Z() / 2 ], { visible: true, size: 0, label: { color: 'black', useKatex: true }, name: '\\vec x' });
var vx = view.create('line3d', [p0, px], { fixed: true, strokeColor: '#666', strokeWidth: 3, dash: 2, lastArrow: { type: 2, size: 4 } });
var tx = view.create('point3d', [() => px.X() / 2, () => px.Y() / 2, () => px.Z() / 2 ], { visible: true, size: 0, label: { color: '#666', useKatex: true }, name: '\\vec x' });
var vab = view.create('line3d', [pa, px], { fixed: true, strokeColor: 'black', strokeWidth: 2, lastArrow: { type: 2, size: 4 } });

var p1 = view.create('point3d', [() => pa.X() + 10 * (pb.X() - pa.X()), () => pa.Y() + 10 * (pb.Y() - pa.Y()), () => pa.Z() + 10 * (pb.Z() - pa.Z())], { size: 3, name: '', visible: true });
var p2 = view.create('point3d', [() => pa.X() - 10 * (pb.X() - pa.X()), () => pa.Y() - 10 * (pb.Y() - pa.Y()), () => pa.Z() - 10 * (pb.Z() - pa.Z())], { size: 3, name: '', visible: true });
Expand Down
88 changes: 88 additions & 0 deletions server/src/other/jsxgraph/quadratic-function-product-form.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!doctype html>
<html lang="de">
<head>
<title>Produktform</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/npm/jsxgraph@latest/distrib/jsxgraph.css'/>
<script src='https://cdn.jsdelivr.net/npm/jsxgraph@latest/distrib/jsxgraphcore.js' type='text/javascript'></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js" crossorigin="anonymous"></script>

<style>
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr;
position: relative;
}
.jxgbox { border-radius: 0px; border: none}
.panel {
position: absolute;
display: flex;
flex-direction: row;
gap: 12px;
font-family: Roboto, sans-serif;
right: 4px
}
.term { background-color: white }
</style>
</head>
<body>

<div class="container">
<div id=fboard class='jxgbox' style='width: 100%; aspect-ratio: 1'></div>
</div>

<script type='text/javascript'>
var board = JXG.JSXGraph.initBoard('fboard', {boundingbox: [-4.5, 9, 4.5, -9], axis: true, grid: false, showNavigation: false, showZoom: false, showCopyright: false, pan: { enabled: false}});

var a = board.create('slider', [[-4.3, 8], [-1.3, 8], [-3, 1, 3]], {snapWidth: .2, ticks: { drawLabels: true, insertTicks: false, ticksDistance: .5, label: {fontSize: 13, strokeColor: '#D55E00'} }, name: 'a', digits: 1, label: {fontSize: 14, strokeColor: '#D55E00', cssClass: 'term'}})
var t = board.create('text', [4, -8, () => ""], { cssClass: 'term', fixed: true, anchorX: 'right', useKatex: true });

var A = board.create('point', [-4, 0], { visible: false, fixed: true })
var B = board.create('point', [4, 0], { visible: false, fixed: true })
var bar = board.create('segment', [A,B], { visible: true, fixed: true })

var n1 = board.create('glider', [-2, 0, bar], { visible: true, withLabel: false })
var n2 = board.create('glider', [2, 0, bar], { visible: true, withLabel: false })

var gliders = [n1, n2];
var f = undefined;

gliders.forEach(g => {
g.on('up', () => {
g.moveTo([Math.round(g.X()*2)/2, 0], 100, { effect: '<>', callback: plot });
});
})
const plusminus = val => val < 0 ? "- " + (-val) : "+ " + val;
const plot = () => {
let table = gliders.map(g => { r = { x: g.X(), ex: 1}; return r });
let multiplicities = Object.entries(Object.groupBy(table, ({x}) => x)).map(entry => { l = [entry[0], entry[1].length]; return l }).sort(((a, b) => a[0] - b[0]));
let term = "" + a.Value().toFixed(1);
let tex = "f(x)=" + a.Value().toFixed(1);
multiplicities.forEach(m => {
term += `*(x${plusminus(-m[0])})${m[1]>1 ? "**" + m[1] : ""}`
tex += `\\cdot\\left(x${plusminus(-m[0])}\\right)${m[1]>1 ? "^" + m[1] : ""}`
})
if (f) board.removeObject(f)
if (gliders.length) {
f = board.create('functiongraph', [board.jc.snippet(term, true, 'x', true)]);
t.setText(tex);
}
else
t.setText("");
}

a.on('drag', plot);
plot();
</script>

</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<script>
var board = JXG.JSXGraph.initBoard('board', {boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: false, showZoom: false, showCopyright: false, pan: { enabled: false}});
var p = board.create('point', [0, 0], {visible: true, name: 'P', snapToGrid: true, snapSizeX: .5, snapSizeY: .5});
var s = board.create('slider', [[-4.5, -4], [-2.5,-4], [-2, 1, 2]], {snapWidth: .5, ticks: { drawLabels: true, label: {fontSize: 16, strokeColor: '#D55E00', offset: [-4, -16]} }, name: 'a', digits: 1, label: {fontSize: 16, strokeColor: '#D55E00'}});
var s = board.create('slider', [[-4.5, -4], [-2.5,-4], [-2, 1, 2]], {snapWidth: .5, name: 'a', digits: 1, label: {fontSize: 16, strokeColor: '#D55E00'}});
var g = board.create('functiongraph', [(x) => s.Value() * x**2], {strokeWidth: 1, dash: 2});
var f = board.create('functiongraph', [(x) => s.Value() * (x-p.X())**2 + p.Y()], {strokeWidth: 3});

Expand Down
38 changes: 19 additions & 19 deletions server/src/other/jsxgraph/sinus.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<html>
<!doctype html>
<html lang="de">
<head>
<title>Sinusfunktion</title>
<meta charset="utf-8">
Expand Down Expand Up @@ -31,16 +32,16 @@
</div>

<script type='text/javascript'>
const piFracts = ["", "\\frac{1}{6} pi;", "2/6&pi;", "3/6&pi;", "4/6&pi;", "5/6&pi;", "&pi;", "7/6&pi;", "8/6&pi;", "9/6&pi;", "10/6&pi;", "11/6&pi;", "2&pi;"];
const piFracts = ["", "1/6&pi;", "2/6&pi;", "3/6&pi;", "4/6&pi;", "5/6&pi;", "&pi;", "7/6&pi;", "8/6&pi;", "9/6&pi;", "10/6&pi;", "11/6&pi;", "2&pi;"];

var circle = JXG.JSXGraph.initBoard('circle', {boundingbox: [-1.25, 1.25, 1.25, -1.25], axis: true, showNavigation: false, showZoom: false, showCopyright: false, pan: { enabled: false}});

var p0 = circle.create('point', [0, 0], {fixed: true, visible: false});
var p1 = circle.create('point', [1, 0], {name: '', visible: false, fixed: true});
var c = circle.create('circle', [p0, p1], {dash: 2, strokeWidth: 1, strokeOpacity: 0.6});

var pc = circle.create('glider', [Math.cos(1/6 * Math.PI), Math.sin(1/6 * Math.PI), c], {visible: true, name: ''});
var pc2 = circle.create('point', [() => pc.X(), () => pc.Y()], {visible: true, withLabel: true, layer: 0, name: function() {
var pc = circle.create('glider', [Math.cos(1/6 * Math.PI), Math.sin(1/6 * Math.PI), c], {visible: true, name: '', showInfobox: false});
var pc2 = circle.create('point', [() => pc.X(), () => pc.Y()], {visible: true, withLabel: true, layer: 0, showInfobox: false, name: function() {
let angle = JXG.Math.Geometry.rad(p1, p0, pc);
if (angle < 0)
angle = 2 * Math.PI + angle;
Expand All @@ -60,25 +61,24 @@
circle.create('line', [pc, p0], {straightFirst: false, straightLast: false, dash: 2});

var sine = JXG.JSXGraph.initBoard('sine', {boundingbox: [-.25, 1.25, 6.5, -1.25], axis: false, showNavigation: false, showZoom: false, showCopyright: false, pan: { enabled: false}});
var xaxis = sine.create('axis', [ [0,0],[1,0] ], { drawZero: false });
xaxis.removeAllTicks();
var xaxis = sine.create('axis', [ [0,0],[1,0] ], { drawZero: false, ticks: {visible: false} });
var yaxis = sine.create('axis', [ [0,0],[0,1] ]);

circle.addChild(sine);

var p2 = sine.create('point', [0, 0], {fixed: true, visible: false});
var p3 = sine.create('point', [1/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[1], label: {offset: [-10, -15], useKatex: true}});
var p4 = sine.create('point', [2/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[2], label: {offset: [-10, -15], useKatex: true}});
var p5 = sine.create('point', [3/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[3], label: {offset: [-10, -15], useKatex: true}});
var p6 = sine.create('point', [4/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[4], label: {offset: [-10, -15], useKatex: true}});
var p7 = sine.create('point', [5/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[5], label: {offset: [-10, -15], useKatex: true}});
var p8 = sine.create('point', [6/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[6], label: {offset: [-10, -15], useKatex: true}});
var p9 = sine.create('point', [7/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[7], label: {offset: [-10, -15], useKatex: true}});
var p10 = sine.create('point', [8/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[8], label: {offset: [-10, -15], useKatex: true}});
var p11 = sine.create('point', [9/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[9], label: {offset: [-10, -15], useKatex: true}});
var p12 = sine.create('point', [10/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[10], label: {offset: [-10, -15], useKatex: true}});
var p13 = sine.create('point', [11/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[11], label: {offset: [-10, -15], useKatex: true}});
var p14 = sine.create('point', [12/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[12], label: {offset: [-10, -15], useKatex: true}});
var p3 = sine.create('point', [1/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[1], label: {offset: [-10, -15], useKatex: false}});
var p4 = sine.create('point', [2/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[2], label: {offset: [-10, -15], useKatex: false}});
var p5 = sine.create('point', [3/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[3], label: {offset: [-10, -15], useKatex: false}});
var p6 = sine.create('point', [4/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[4], label: {offset: [-10, -15], useKatex: false}});
var p7 = sine.create('point', [5/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[5], label: {offset: [-10, -15], useKatex: false}});
var p8 = sine.create('point', [6/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[6], label: {offset: [-10, -15], useKatex: false}});
var p9 = sine.create('point', [7/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[7], label: {offset: [-10, -15], useKatex: false}});
var p10 = sine.create('point', [8/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[8], label: {offset: [-10, -15], useKatex: false}});
var p11 = sine.create('point', [9/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[9], label: {offset: [-10, -15], useKatex: false}});
var p12 = sine.create('point', [10/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[10], label: {offset: [-10, -15], useKatex: false}});
var p13 = sine.create('point', [11/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[11], label: {offset: [-10, -15], useKatex: false}});
var p14 = sine.create('point', [12/6*Math.PI, 0], {fixed: true, visible: true, color: 'green', face: 'plus', name: piFracts[12], label: {offset: [-10, -15], useKatex: false}});
var psx = sine.create('point', [ function () {return ang.Value();}, 0], {visible: false, name: '', withLabel: false});
var psy = sine.create('point', [-.25, function () {return pc.Y();}], {visible: false, name: '', withLabel: false});
var ps = sine.create('point', [function () {return ang.Value();}, function () {return pc.Y();}], {visible: true, name: '', withLabel: false, color: '#0072B2'});
Expand All @@ -92,7 +92,7 @@
var f = sine.create('functiongraph', [function (x) { return Math.sin(x); }], {dash: 2});
var fp = sine.create('functiongraph', [function (x) { return Math.sin(x); }, 0, () => ang.Value()], {strokeWidth: 3});

var sine = sine.create('text', [2*Math.PI, .75, () => "\\frac{1}{2} sin(" + JXG.Math.Geometry.rad(p1, p0, pc).toFixed(1) + ") = " + Math.sin(JXG.Math.Geometry.rad(p1, p0, pc)).toFixed(1)], {fontSize: 1, fontUnit: 'rem', anchorX: 'right', useKatex: true});
var text = sine.create('text', [2*Math.PI, .75, () => "sin(" + JXG.Math.Geometry.rad(p1, p0, pc).toFixed(2) + ") \\approx " + Math.sin(JXG.Math.Geometry.rad(p1, p0, pc)).toFixed(2)], {fontSize: 1, fontUnit: 'rem', anchorX: 'right', useKatex: true});
</script>

</body>
Expand Down
Loading

0 comments on commit cd262f1

Please sign in to comment.