31:T453,viewof A = { // Wir ereugen eine leere Matrix mit 2 Zeilen und nbForces Spalten. let A = Eigen.Matrix.zeros([2, nbForces], invalidation); // Die Koordinaten des betrachteten Knotens (A) speichern wir der einfachheitshalber in Variablen. let ax = nodeLocation[0]; let ay = nodeLocation[1]; // Jetzt iterieren wir über alle benachbarten Knoten bzw. angreifenden Kräfte. for (let i = 0; i < nbForces; i++) { // Die Koordinaten des benachbarten Knotens (B) speichern wir wieder in Variablen. let bx = adjointNodeLocations[i][0]; let by = adjointNodeLocations[i][1]; // Aufgabe 1: Abstand zwischen A und B berechnen (Hinweis: quadieren = x**2, Wurzel = Math.sqrt(x)) let length = 0.0; // Aufgabe 2: directionX und directionY so berechnen, dass sie die normierte Richtung der Kraft angeben. let directionX = 0.0; let directionY = 0.0; // Den Richtungsvektor tragen wir nun in die i-te Spalte ein. A.set(0, i, directionX); A.set(1, i, directionY); } // Abschließend geben wir die Matrix aus. return A.show('A'); }32:T995,{ const height = 400; const scale = Math.min(width, height) * 0.4; const div = d3.select(DOM.element('div')) const svg = div.append('svg') .attr('viewBox', [0, 0, width, height]) .attr('fill', 'none') .attr('id', 'drawing'); const textLayer = div.append('div') .style('overflow', 'hidden') .style('width', width + 'px') .style('height', height + 'px') .style('position', 'absolute') .style('top', '0px'); const text = ({text, x, y, angle=0, background='black', color='white'}) => { return textLayer.append('div') .style('background', background) .style('color', color) .style('padding', '0px 6px') .style('border-radius', '8px') .style('font-family', 'sans-serif') .style('font-size', '12px') .style('position', 'absolute') .style('transform', `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${angle}deg)`) .style('z-index', 1) .text(text) } const layer = svg.append('g') .attr('transform', `translate(${width / 2} ${height / 2}) scale(1, -1)`) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round'); const layerHelper = layer.append('g'); const layerForces = layer.append('g'); const layerNodes = layer.append('g'); if (nbZeroEigenvalues == 0) { layerHelper.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', width) .attr('height', height) .attr('stroke', colors.red) .attr('stroke-width', 4); } layerHelper.append('circle') .attr('stroke', 'gray') .attr('stroke-width', 1) .attr('cx', 0) .attr('cy', 0) .attr('stroke-dasharray', [10, 6]) .attr('r', scale); layerNodes.append('circle') .attr('r', 3) .attr('fill', colors.black); let [ax, ay] = nodeLocation; for (let i = 0; i < nbForces; i++) { let directionX = A.get(0, i); let directionY = A.get(1, i); let si = s.get(i, 0); let color = si < -1e-8 ? colors.blue : si > 1e-8 ? colors.red : colors.black; addArrow({container: layerForces, a: {x: 0, y: 0}, b: {x: directionX * scale, y: directionY * scale}}) .attr('stroke', color) .attr('stroke-width', 1) .attr('fill', color); text({ text: `d${i}`, x: width / 2 + directionX * scale * 0.5, y: height / 2 - directionY * scale * 0.5, background: color }); } return div.node(); }33:T83a,{ const height = 400; const scale = height * 0.4; const div = d3.select(DOM.element('div')) const svg = div.append('svg') .attr('viewBox', [0, 0, width, height]) .attr('fill', 'none') .attr('id', 'drawing'); const textLayer = div.append('div') .style('overflow', 'hidden') .style('width', width + 'px') .style('height', height + 'px') .style('position', 'absolute') .style('top', '0px'); const text = ({text, x, y, angle=0, background='black', color='white'}) => { return textLayer.append('div') .style('background', background) .style('color', color) .style('padding', '0px 6px') .style('border-radius', '8px') .style('font-family', 'sans-serif') .style('font-size', '12px') .style('position', 'absolute') .style('transform', `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${angle}deg)`) .style('z-index', 1) .text(text) } const layer = svg.append('g') .attr('transform', `translate(${width / 2} ${height / 2}) scale(1, -1)`) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round'); const layerForces = layer.append('g'); const layerNodes = layer.append('g'); layerNodes.append('circle') .attr('r', 3) .attr('fill', colors.black); let lastX = 0.0; let lastY = 0.0; let [ax, ay] = nodeLocation; for (let i = 0; i < nbForces; i++) { let directionX = A.get(0, i); let directionY = A.get(1, i); let si = s.get(i, 0); let color = si < -1e-8 ? colors.blue : si > 1e-8 ? colors.red : colors.black; let fx = directionX * si * scale; let fy = directionY * si * scale; addArrow({container: layerForces, a: {x: lastX, y: lastY}, b: {x: lastX + fx, y: lastY + fy}}) .attr('fill', color) .attr('stroke', color) .attr('stroke-width', 1); text({ text: `s${i}`, x: width / 2 + lastX + fx * 0.5, y: height / 2 - lastY - fy * 0.5, background: color }); lastX += fx; lastY += fy; } return div.node(); }34:[] 2f:{"title":"Knotengleichgewicht","cells":[{"id":0,"value":"md`# Knotengleichgewicht`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"md`Wir betrachten das Kräftegleichgewicht an einem einzelnen Knoten in der Ebene. Dazu geben wir die Position des betrachteten Knotens (\\`nodeLocation = [x, y]\\`) und die Positionen aller benachbarten Knoten (\\`adjointNodeLocations = [[x0, y0], [x1, y1], ...]\\`) an.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"nodeLocation = [0, 0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"adjointNodeLocations = [\n [-1, 0],\n [ 1, 0],\n [ 0, -1],\n [ 0, 1],\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"md`Zu jedem benachtbarten Knoten existiert eine Seilkraft. Die Anzahl der Kräfte (\\`nbForces\\`) ergibt sich also aus der Anzahl der Nachbarknoten.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"nbForces = adjointNodeLocations.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"md`Die Richtungsvektoren der am Knoten wirkenden Kräfte schreiben wir als Spalten in die Matrix ${tex`A`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"md`Die Richtungen der Kräfte können wir visualisieren. Im folgenden Diagram werden sie als Vektoren angezeigt. Der strichlierte Einheitskreis dient zur Kontrolle.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`Im nächsten Schritt führen wir eine [Singulärwertszerlegung](https://de.wikipedia.org/wiki/Singul%C3%A4rwertzerlegung) der Matrix ${tex`A`} durch. Dabei wird die Matrix in ein Produkt von drei Matrizen zerlegt.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"tex`A = U \\, \\Sigma \\, V^\\text{T}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"svd = A.bdcSVD(Eigen.ComputeThinU | Eigen.ComputeFullV, invalidation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`Die Komponenten dieser Zerlegung können wir uns anzeigen lassen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"svd.matrixU(invalidation).show('U')","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"svd.singularValues(invalidation).show('\\\\text{diag}(\\\\Sigma)')","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"Eigen.Matrix.fromBlock(svd.matrixV(invalidation).block(0, 0, [nbForces, rank], invalidation), invalidation).show('V')","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"md`Den Rang der Matrix ${tex`A`} bestimmen wir, indem wir die Anzahl der Eigenwerte ≠ 0 zählen. Da es bei numerischen Berechnungen mit Gleitkommazahlen immer zu kleineren Ungenauigkeiten kommen kann, müssen wir hier mit einer Toleranz arbeiten.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"rank = {\n let nbEigenvalues = svd.singularValues(invalidation).rows;\n \n let tolerance = 1e-8;\n \n let rank = 0;\n \n for (let i = 0; i < nbEigenvalues; i++) {\n let eigenvalue = svd.singularValues(invalidation).get(i, 0);\n \n if (Math.abs(eigenvalue) > tolerance) {\n rank += 1;\n }\n }\n \n return rank\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`Von ${nbForces} Eigenwerten sind somit ${rank} ungleich null. Entsprechend ergibt sich die Anzahl der Eigenwerte = 0 (\\`nbZeroEigenvalues\\`).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"nbZeroEigenvalues = nbForces - rank","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`Die Eigenvektoren zu den Eigenwerten = 0 speichern wir in der Matrix ${tex`E`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"viewof E = {\n let V = svd.matrixV(invalidation);\n \n let nbComputedZeroEigenvalues = Math.min(nbForces - rank, V.cols - rank)\n \n let E = Eigen.Matrix.zeros([nbForces, nbComputedZeroEigenvalues], invalidation);\n \n for (let i = 0; i < nbForces; i++) {\n for (let j = rank; j < V.cols; j++) {\n let value = V.get(i, j);\n \n E.set(i, j - rank, value);\n }\n }\n \n return E.show('E');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`Nun führen wir die Skalierungsfaktoren ${tex`f`} und ${tex`w_i`} ein. Wir können die Werte mit Schieberegler steuern. Die Werte für ${tex`w_i`} fassen wir im Vektor ${tex`w`} zusammen. Die Länge dieses Vektors entspricht der Anzahl von Eigenwerten = 0.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"tex`f = ${f}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"viewof f = slider({\n min: -10,\n max: 10,\n step: 0.1,\n value: 1.0,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"w.show('w')","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"viewof w = {\n const form = html``;\n form.value = Eigen.Matrix.zeros([nbZeroEigenvalues, 1], invalidation);\n \n for (let i = 0; i < nbZeroEigenvalues; i++) {\n form.value.set(i, 0, 1.0)\n \n let slider = html``;\n let div = html`

${tex`w_${i}`}

`;\n let val = html`1.0`;\n \n div.appendChild(slider);\n div.appendChild(val);\n \n form.appendChild(div);\n \n slider.oninput = e => {\n form.value.set(i, 0, parseFloat(slider.value));\n d3.select(val).text(slider.value);\n }\n }\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md`Die Kräfte in den Stäben ergeben sich nun aus ${tex`s = f \\, E \\, w`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof s = {\n // Wir speichern s als Spaltenvektor\n let s = Eigen.Matrix.zeros([nbForces, 1], invalidation);\n \n for (let i = 0; i < s.rows; i++) {\n let si = 0.0;\n \n for (let k = 0; k < E.cols; k++) {\n si += f * E.get(i, k) * w.get(k, 0);\n }\n \n s.set(i, 0, si);\n }\n \n return s.show('s');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"md`Damit können wir den Kräfteplan für den Knoten zeichnen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"md`## Anhang`","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"colors = ({\n red: d3.schemeSet1[0],\n blue: d3.schemeSet1[1],\n black: '#000000',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import {Eigen} from \"@oberbichler/eigen\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"import {addArrow} from '@oberbichler/svg-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"d3 = require(\"d3-selection@2\", \"d3-drag@2\", \"d3-scale-chromatic@2\", \"d3-format@2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}