JSXGraph - WmV - Seminar - Matrizen
Diese Webseite ist anders gestaltet als die bisherigen Seiten, da das Thema Matrizen das Hauptthema meines Projekts in diesem Seminar war. In meinem Studium habe ich Matrizen und Vektoren das erste Mal kennenlernen und mit ihnen arbeiten dürfen. Dabei ist eine Begeisterung entfacht, die bis heute anhält und die sogar das Thema in meinen Abschlussarbeiten geprägt hat. Während der Zeit ist mir aufgefallen, dass Dinge wie Matrizenmultiplikation oder Matrix-Vektor-Multiplikationen häufig für viele schwer vorzustellen sind und immer wieder nachgeschaut werden muss, wie eine bestimmte Multiplikation durchgeführt werden muss und welche Regeln gelten müssen. Dabei ist es gar nicht so schwierig, wenn man sich die Multiplikationsregeln visuell gemerkt hat. Es gibt zwar schon viele Videos und auch viele Animationen, wie solch eine Multiplikation durchgeführt werden muss, jedoch habe ich die Erfahrung gemacht, dass man die am besten lernt, wenn man die selber mal angewendet hat. Wenn die Animation also mal händisch gestartet wird und man so selbst Schritt für Schritt erkennen kann, was getan werden muss. Am besten sogar mit eigenen Werten, um so den selbst ausgerechneten Wert kontrollieren zu können.
Die Webseite ist so aufgebaut, dass wir uns dem Endprodukt immer weiter nähern, je weiter wir runterscrollen. Auf dem Weg dorthin wird erklärt, worauf geachtet werden muss und wie die einzelnen Elemente erstellt worden sind. So hat jeder die Chance, es nachzumachen oder sogar zu optimieren. Wer jedoch direkt zum Ergebnis kommen möchte, kann in der Übersicht auf das jeweilige gewünschte Ergebnis klicken, um sich das Scrollen zu ersparen. HAVE FUN!
Übersicht
Matrizen und Vektoren erstellen
Vektoren
Vektoren bestehen aus Einträgen, die im Normalfall vertikal angeordnet sind, und aus je einer Klammer links und rechts. Aus ästhetischen Gründen wurde sich hier für eckige Klammern der Form [ und ] entschieden. Um die Dicke der Striche individuell einstellen zu können, werden die mit line erstellt und die Einträge mit text. Da wir später höchstens 3×3 Matrizen haben werden, bleiben wir insgesamt bei der Dimension drei, was bedeutet, dass wir Vektoren erstellen werden, die höchsten drei Einträge haben.
Im Folgenden wird das board mit b abgekürzt, weshalb statt board.create jetzt b.create genügt.
Zur Erinnerung:
line: var LINENAME = b.create('line', [STARTPUNKT, ENDPUNKT], {})
text: var TEXTNAME = b.create('text', [ORT, 'TEXT'], {})
Die größte Schwierigkeit besteht darin, dass das Textfeld, wenn wir ihn an der Stelle [0,2] setzen, dort die linke Seite vom Textfeld beginnt und es nicht zentriert wird. Um diesem Problem aus dem Weg zu gehen, nutzen wir das Attribut
anchorX:'middle'
var vector_a11 = b.create('text', [0,1.75, 'a_{11}'], {fontSize:15, anchorX:'middle'});
var vector_a12 = b.create('text', [0,0, 'a_{12}'], {fontSize:15, anchorX:'middle'});
var vector_a13 = b.create('text', [0,-1.75, 'a_{13}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[-0.75,2.5],[-0.25,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[-0.75,2.5],[-0.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[-0.75,-2.5],[-0.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[0.75,2.5],[0.25,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[0.75,2.5],[0.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[0.75,-2.5],[0.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
Matrix
Matrizen werden analog erstellt.
var matrix_a11 = b.create('text', [-1.5, 1.75, 'a_{11}'], {fontSize:15, anchorX:'middle'});
var matrix_a12 = b.create('text', [-1.5, 0, 'a_{12}'], {fontSize:15, anchorX:'middle'});
var matrix_a13 = b.create('text', [-1.5, -1.75, 'a_{13}'], {fontSize:15, anchorX:'middle'});
var matrix_a21 = b.create('text', [0,1.75, 'a_{21}'], {fontSize:15, anchorX:'middle'});
var matrix_a22 = b.create('text', [0,0, 'a_{22}'], {fontSize:15, anchorX:'middle'});
var matrix_a23 = b.create('text', [0,-1.75, 'a_{23}'], {fontSize:15, anchorX:'middle'});
var matrix_a31 = b.create('text', [1.5, 1.75, 'a_{31}'], {fontSize:15, anchorX:'middle'});
var matrix_a32 = b.create('text', [1.5, 0, 'a_{32}'], {fontSize:15, anchorX:'middle'});
var matrix_a33 = b.create('text', [1.5, -1.75, 'a_{33}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[-2.25,2.5],[-1.75,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[-2.25,2.5],[-2.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[-2.25,-2.5],[-1.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[2.25,2.5],[1.75,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[2.25,2.5],[2.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[2.25,-2.5],[1.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
Marker erstellen
Form
Wir wollen nun einen Marker erstellen, der uns bei den visuellen Darstellungen der verschiedenen Rechenoperationen unterstützt. Der Einfachheitshalber, werden wir uns für einen Kreis entscheiden, da für diesen nur ein Punkt und ein Radius notwendig ist. Der Radius kann dabei konstant bleiben, weshalb wir uns nur um die Bewegung des Punktes kümmern müssen. Das erspart einiges an Arbeit.
Zur Erinnerung:
circle: var CIRCLENAME = b.create('circle', [CENTER, RADIUS], {})
var p_marker = b.create('point', [0,0], {name:'', color:'black'})
Zur besseren Übersicht machen wir den Punkt erstmal nicht unsichtbar. Das hilft uns, den Punkt später korrekt zu platzieren, sodass der Marker dann auch zentriert über die Einträge der Matrizen oder Vektoren fährt.
Bewegung (Vektor)
Nun müssen wir einen Mechanismus bauen, bei dem der Kreis entlang der Einträge rutscht. Wir werden dafür einen slider und function verwenden. Bei Vektoren muss der Marker nur vertikale rutschen und da wir nur drei Einträge haben, wählen wir erstmal einen slider mit Intervall [1,3] und bauen den per function in die y-Koordinate vom Marker ein. Dabei wollen wir einen snapWidth von 1, um ganzzahlige Werte nur zu erhalten.
Zur Erinnerung:
slider: var SLIDERNAME = b.create('slider', [[STARTPUNKT],[ENDPUNKT],[MIN,START,MAX]] {})
function: ()=>()
Wert: SLIDERNAME.Value()
var sl_marker_vector = b.create('slider', [[-2,-4], [2,-4], [1,1,3]], {snapWidth:1});
var p_marker = b.create('point', [0,()=>(-sl_marker_vector.Value()*1.75+3.5)], {name:'', color:'black', fillOpacity:0.5})
Hierbei ist es wichtig zu beachten, dass die Einträge nur ganzzahlige Schritte und auch nicht eine Einheit voneinander entfernt sind. Damit es aber trotzdem funktioniert, wird der Wert vom slider mit 1.75 multipliziert und zu diesem Wert 3.5 draufaddiert, sodass der Marker dann oben startet. Damit er runterrutsch, wird der slider-Wert noch mit -1 multipliziert.
Bewegung (Matrix)
Matrizen machen es ein wenig schwieriger, da sie nicht nur neun Einträge haben, sondern der Slider später bei den Berechnungen die erste Zeile durchrutschen muss und dann ganz links in der nächsten Zeile wieder anfängt. Um das zu realisieren, verwenden wir if-else. Wenn der Marker beim letzten Eintrag in der ersten Zeile angelangt ist, dann soll er beim nächsten slider-Wert seinen y-Wert so verändern, dass er in der zweiten Zeile landet. Der x-Wert soll dabei „zurückgesetzt“ werden.
Zur Erinnerung:
if-else: (IF ? DO : ELSE)
Zuerst kümmern wir uns darum, dass der Marker eine Zeile runterrutscht. Dafür müssen wir erstmal den MAX-Wert vom slider auf neun erhöhen.
var sl_marker_matrix = b.create('slider', [[-2,-4], [2,-4], [1,1,9]], {snapWidth:1});
Nun zum Marker. Er soll genauso wie beim Vektor erstmal die ersten drei Einträge abgehen. Dies wird analog gemacht, jedoch wird hier x und y vertauscht.
var p_marker = b.create('point', [()=>(sl_marker_matrix.Value()*1.5-3),1.75], {name:'', color:'black', fillOpacity:0.5})
Dabei müssen natürlich wie Korrekturwerte wieder so eingestellt werden, dass der Marker auch beim ersten Eintrag beginnt. Damit der Marker jetzt runterrutscht, wird if-else genutzt und so eingestellt, dass der Marker, wenn der slider-Wert größer als 3 ist, den y-Wert 0 und wenn er größer als 6 ist, den y-Wert -1.75 hat.
()=>((sl_marker_matrix.Value() <= 3 ? 1.75 : (sl_marker_matrix.Value() <= 6 ? 0 : -1.75)))
Das bauen wir nun im y-Wert vom Marker ein und erhalten das erwünschte Ergebnis.
Damit der x-Wert nun beim Sprung immer resettet wird, stellen wir ein, dass er zuerst den Wert 1.5 hat, wenn der slider-Wert kleiner als 4 ist. Ist der slider-Wert kleiner als 7, soll der x-Wert den Wert 0 erhalten und bei größer als 6 dann den Wert -1.5.
Das ist wie folgt realisierbar:
()=>(
(sl_marker_matrix.Value() <= 3
? sl_marker_matrix.Value()*1.5-3
: (sl_marker_matrix.Value() <= 6
? sl_marker_matrix.Value()*1.5-7.5
: sl_marker_matrix.Value()*1.5-12))
)
Auch hier sind wieder Korrekturwerte notwendig. Wenn wir das beim x-Wert vom Marker einbauen, haben wir unsere gewünschte Bewegung.
Damit der x-Wert nun beim Sprung immer resettet wird, stellen wir ein, dass er zuerst den Wert 1.5 hat, wenn der slider-Wert kleiner als 4 ist. Ist der slider-Wert kleiner als 7, soll der x-Wert den Wert 0 erhalten und bei größer als 6 dann den Wert -1.5.
Rechenoperationen
Vektor-Vektor-Addition
Wir widmen uns zuerst der Vektor-Vektor-Addition und steigern dann die Schwierigkeit. Zuerst müssen wir drei Vektoren erstellen und diese so platzieren, sodass genug Platz für die Animationen und für das Ergebnis sind. Dieser Code ist nur für den Vektor C. B geht analog, nur mit anderen x-Werten.
var vector_c11 = b.create('text', [5,1.75, 'a_{11} + b_{11}'], {fontSize:15, anchorX:'middle'});
var vector_c12 = b.create('text', [5,0, 'a_{12} + b_{12}'], {fontSize:15, anchorX:'middle'});
var vector_c13 = b.create('text', [5,-1.75, 'a_{13} + b_{13}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top_c = b.create('line', [[4.25,2.5],[4.75,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert_c = b.create('line', [[4.25,2.5],[4.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down_c = b.create('line', [[4.25,-2.5],[4.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top_c = b.create('line', [[5.75,2.5],[5.25,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert_c = b.create('line', [[5.75,2.5],[5.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down_c = b.create('line', [[5.75,-2.5],[5.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
Die Rechenzeichnen erstellen wir mit Hilfe von text. Das spart Arbeit, da wir keinen großen Wert auf das Aussehen der Symbole legen.
var add = b.create('text', [-2.5,0, '+'], {fontSize:50, anchorX:'middle'});
var eq = b.create('text', [2.5,0, '='], {fontSize:50, anchorX:'middle'});
Natürlich brauchen auch alle drei Vektoren einen Marker.
var p_marker_a = b.create('point', [-5,()=>(-sl_marker_vector.Value()*1.75+3.5)], {visible:false})
var circ_marker_a = b.create('circle', [p_marker_a, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
var p_marker_b = b.create('point', [0,()=>(-sl_marker_vector.Value()*1.75+3.5)], {visible:false})
var circ_marker_b = b.create('circle', [p_marker_b, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
var p_marker_c = b.create('point', [5,()=>(-sl_marker_vector.Value()*1.75+3.5)], {visible:false})
var circ_marker_c = b.create('circle', [p_marker_c, 0.7], {color:'orange', fillOpacity:0, strokeWidth:4})
Dank der Vorarbeit war’s das auch schon. Ergebnis:
Vektor-Vektor-Multiplikation
Bei der Vektormultiplikation können wir die gleichen Aufbau der Vektoren wie im vorherigen Part nehmen, jedoch benutzen wir statt einem dritten Vektor C eine Formel, die nach und nach aufgedeckt werden soll. Dazu nutzen wir if-else und müssen darauf achten, dass wir für jeden der drei slider-Werte eine eigene Formel schreiben müssen.
var vvMult_01 = b.create('text', [4,0,'a_{11}b_{11}'], {fontSize:15});
var vvMult_02 = b.create('text', [4,0,'a_{11}b_{11} + a_{12}b_{13}'], {fontSize:15});
var vvMult_03 = b.create('text', [4,0,'a_{11}b_{11} + a_{12}b_{13} + a_{13}b_{13}'], {fontSize:15});
Damit die Formel nach und nach erscheint, arbeiten wir mit dem Attribut visible und nutzen if-else, um einen text auszublenden und den anderen einzublenden, wenn der slider-Wert sich verändert.
visible: ()=>(sl_marker_vector.Value() == 1 ? true : false)
var vvMult_01 = b.create('text', [-4,0,'a_{11}b_{11}'], {fontSize:20, visible: ()=>(sl_marker_vector.Value() == 1 ? true : false)});
var vvMult_02 = b.create('text', [-4,0.6,'a_{11}b_{11} + a_{12}b_{13}'], {fontSize:20, visible: ()=>(sl_marker_vector.Value() == 2 ? true : false)});
var vvMult_03 = b.create('text', [-4,0.6,'a_{11}b_{11} + a_{12}b_{13} + a_{13}b_{13}'], {fontSize:20, visible: ()=>(sl_marker_vector.Value() == 3 ? true : false)});
Matrix-Matrix-Addition
Analog wie bei den Vektoren funktioniert das auch mit Matrizen. Dazu erstellen wir erstmal drei Matrizen, drei Marker und nutzen unsere Vorarbeit, um alles zusammenzusetzen. Da bisher klar sein sollte, wie die einzelnen Elemente erstellt werden können, wird der gesamte Code inkl. Ergebnis hier nur gezeigt.
//Matrix A
var matrix_a11 = b.create('text', [-8.5, 1.75, 'a_{11}'], {fontSize:15, anchorX:'middle'});
var matrix_a12 = b.create('text', [-8.5, 0, 'a_{12}'], {fontSize:15, anchorX:'middle'});
var matrix_a13 = b.create('text', [-8.5, -1.75, 'a_{13}'], {fontSize:15, anchorX:'middle'});
var matrix_a21 = b.create('text', [-7,1.75, 'a_{21}'], {fontSize:15, anchorX:'middle'});
var matrix_a22 = b.create('text', [-7,0, 'a_{22}'], {fontSize:15, anchorX:'middle'});
var matrix_a23 = b.create('text', [-7,-1.75, 'a_{23}'], {fontSize:15, anchorX:'middle'});
var matrix_a31 = b.create('text', [-5.5, 1.75, 'a_{31}'], {fontSize:15, anchorX:'middle'});
var matrix_a32 = b.create('text', [-5.5, 0, 'a_{32}'], {fontSize:15, anchorX:'middle'});
var matrix_a33 = b.create('text', [-5.5, -1.75, 'a_{33}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[-9.25,2.5],[-8.75,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[-9.25,2.5],[-9.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[-9.25,-2.5],[-8.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[-4.75,2.5],[-5.25,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[-4.75,2.5],[-4.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[-4.75,-2.5],[-5.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
//Matrix B
var matrix_b11 = b.create('text', [-1.5, 1.75, 'b_{11}'], {fontSize:15, anchorX:'middle'});
var matrix_b12 = b.create('text', [-1.5, 0, 'b_{12}'], {fontSize:15, anchorX:'middle'});
var matrix_b13 = b.create('text', [-1.5, -1.75, 'b_{13}'], {fontSize:15, anchorX:'middle'});
var matrix_b21 = b.create('text', [0,1.75, 'b_{21}'], {fontSize:15, anchorX:'middle'});
var matrix_b22 = b.create('text', [0,0, 'b_{22}'], {fontSize:15, anchorX:'middle'});
var matrix_b23 = b.create('text', [0,-1.75, 'b_{23}'], {fontSize:15, anchorX:'middle'});
var matrix_b31 = b.create('text', [1.5, 1.75, 'b_{31}'], {fontSize:15, anchorX:'middle'});
var matrix_b32 = b.create('text', [1.5, 0, 'b_{32}'], {fontSize:15, anchorX:'middle'});
var matrix_b33 = b.create('text', [1.5, -1.75, 'b_{33}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[-2.25,2.5],[-1.75,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[-2.25,2.5],[-2.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[-2.25,-2.5],[-1.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[2.25,2.5],[1.75,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[2.25,2.5],[2.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[2.25,-2.5],[1.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
//Matrix C
var matrix_a11 = b.create('text', [5.5, 1.75, 'a_{11} + b_{11}'], {fontSize:15, anchorX:'middle'});
var matrix_a12 = b.create('text', [5.5, 0, 'a_{12} + b_{12}'], {fontSize:15, anchorX:'middle'});
var matrix_a13 = b.create('text', [5.5, -1.75, 'a_{13} + b_{13}'], {fontSize:15, anchorX:'middle'});
var matrix_a21 = b.create('text', [7,1.75, 'a_{21} + b_{21}'], {fontSize:15, anchorX:'middle'});
var matrix_a22 = b.create('text', [7,0, 'a_{22} + b_{22}'], {fontSize:15, anchorX:'middle'});
var matrix_a23 = b.create('text', [7,-1.75, 'a_{23} + b_{23}'], {fontSize:15, anchorX:'middle'});
var matrix_a31 = b.create('text', [8.5, 1.75, 'a_{31} + b_{31}'], {fontSize:15, anchorX:'middle'});
var matrix_a32 = b.create('text', [8.5, 0, 'a_{32} + b_{32}'], {fontSize:15, anchorX:'middle'});
var matrix_a33 = b.create('text', [8.5, -1.75, 'a_{33} + b_{33}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[4.75,2.5],[5.25,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[4.75,2.5],[4.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[4.75,-2.5],[5.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[9.25,2.5],[8.75,2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[9.25,2.5],[9.25,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[9.25,-2.5],[8.75,-2.5]], {straightFirst: false, straightLast: false, color:'black'});
//Rechenzeichen
var add = b.create('text', [-3.5,0, '+'], {fontSize:50, anchorX:'middle'});
var eq = b.create('text', [3.5,0, '='], {fontSize:50, anchorX:'middle'});
//Slider
var sl_marker_matrix = b.create('slider', [[-2,-4], [2,-4], [1,1,9]], {snapWidth:1});
//Marker Matrix A
var p_marker_ma = b.create('point', [()=>((sl_marker_matrix.Value() <= 3 ? sl_marker_matrix.Value()*1.5-10 : (sl_marker_matrix.Value() <= 6 ? sl_marker_matrix.Value()*1.5-14.5 : sl_marker_matrix.Value()*1.5-19))),()=>((sl_marker_matrix.Value() <= 3 ? 1.75 : (sl_marker_matrix.Value() <= 6 ? 0 : -1.75)))], {visible:false})
var circ_marker = b.create('circle', [p_marker_ma, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
//Marker Matrix B
var p_marker_mb = b.create('point', [()=>((sl_marker_matrix.Value() <= 3 ? sl_marker_matrix.Value()*1.5-3 : (sl_marker_matrix.Value() <= 6 ? sl_marker_matrix.Value()*1.5-7.5 : sl_marker_matrix.Value()*1.5-12))),()=>((sl_marker_matrix.Value() <= 3 ? 1.75 : (sl_marker_matrix.Value() <= 6 ? 0 : -1.75)))], {visible:false})
var circ_marker = b.create('circle', [p_marker_mb, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
//Marker Matrix C
var p_marker_mc = b.create('point', [()=>((sl_marker_matrix.Value() <= 3 ? sl_marker_matrix.Value()*1.5+4 : (sl_marker_matrix.Value() <= 6 ? sl_marker_matrix.Value()*1.5-0.5 : sl_marker_matrix.Value()*1.5-5))),()=>((sl_marker_matrix.Value() <= 3 ? 1.75 : (sl_marker_matrix.Value() <= 6 ? 0 : -1.75)))], {visible:false})
var circ_marker = b.create('circle', [p_marker_mc, 0.7], {color:'orange', fillOpacity:0, strokeWidth:4})
Matrix-Matrix-Multiplikation
Bei der Matrix-Multiplikation wird es ein wenig umfangreicher. Denn hier muss zunächst einmal die Bewegung vom Marker der mittleren Matrix so eingestellt werden, dass er von oben nach unten rutscht und dann immer eine Spalte weiter. Dann werden noch die Ausdrücke in der Matrix C sehr lang, weshalb wir uns da eine sinnvollere Darstellung überlegen müssen. Zuletzt gilt noch zu beachten, dass, während die Marker sich in der ersten und zweiten Matrix bewegen, der Marker in der dritten Matrix an einer Stelle länger bleiben muss. Nicht zu vergessen ist der slider, der nun theoretisch von 1 bis 81 geht. Wir werden aber zu zwei seperaten slider ausweichen. Zuerst aber die (neue) Bewegung vom Marker der mittleren Matrix.
Analog wie bei der bisherigen Bewegung erstellen wir die andere Bewegung.
var p_marker = b.create('point', [
()=>(
sl_marker_matrix.Value() <= 3
? -1.5
: (sl_marker_matrix.Value() <= 6
? 0
: 1.5)
),
()=>(
sl_marker_matrix.Value() <= 3
? -sl_marker_matrix.Value()*1.75 + 3.5
: (sl_marker_matrix.Value() <= 6 ? -sl_marker_matrix.Value()*1.75 + 8.75 : -sl_marker_matrix.Value()*1.75 + 14)
)
],
{visible:false});
var circ_marker = b.create('circle', [p_marker, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
Nicht zu vergessen sind natürlich wieder die Korrekturwerte.
Nun müssen wir uns um den Marker der Matrix C kümmern, der erst nach drei Schritten rutschen soll. Hier werden wir mit zwei slider arbeiten. Der erste slider hat die gleiche Funktion wie bisher auch. Der Zweite soll die Funktion haben, die Zeile in der Matrix C zu wählen. Mit dem slider-Wert 1 bleiben wir in der ersten Zeile und gehen dort alle Einträge gemäß der Multiplikationsregel durch. Sind wir am letzten Eintrag angekommen, nutzen wir den zweiten slider, um eine Zeile runterzurutschen und bedienen den ersten slider erneut. Danach geht’s dann zur dritten Zeile. Also schnell einen Schluck frischgepressten Orangensaft und dann geht’s los. Zuerst die zwei slider.
//slider
var sl_marker_matrix_10_fix = b.create('slider', [[-7,-1], [-1,-1], [1,1,9]], {snapWidth:1});
var sl_marker_matrix_11_fix = b.create('slider', [[1,-1], [7,-1], [1,1,3]], {snapWidth:1});
//Text Matrix A
var sl_marker_matrix__mult_text_und = b.create('text', [-4,1, '&'], {anchorX:'middle', fontSize: 15});
var sl_marker_matrix__mult_text_a_01 = b.create('text', [-4.5,1, '1-ste Zeile von A'], {anchorX:'right', fontSize: 15, visible:()=>((sl_marker_matrix_10_fix.Value() <= 3 ? true : false))});
var sl_marker_matrix__mult_text_a_02 = b.create('text', [-4.5,1.5, '2-te Zeile von A'], {anchorX:'right', fontSize: 15, visible:()=>((sl_marker_matrix_10_fix.Value() <= 6 ? (sl_marker_matrix_10_fix.Value() > 3 ? true : false) : false))});
var sl_marker_matrix__mult_text_a_03 = b.create('text', [-4.5,1.5, '3-te Zeile von A'], {anchorX:'right', fontSize: 15, visible:()=>((sl_marker_matrix_10_fix.Value() > 6 ? true : false))});
//Text Matrix B
var sl_marker_matrix__mult_text_b_01 = b.create('text', [-3.5,1, '1-ste Spalte von B'], {anchorX:'left', fontSize: 15, visible:()=>((sl_marker_matrix_11_fix.Value() == 1 ? true : false))});
var sl_marker_matrix__mult_text_b_02 = b.create('text', [-3.5,1.5, '2-te Spalte von B'], {anchorX:'left', fontSize: 15, visible:()=>((sl_marker_matrix_11_fix.Value() == 2 ? true : false))});
var sl_marker_matrix__mult_text_b_03 = b.create('text', [-3.5,1.5, '3-te Spalte von B'], {anchorX:'left', fontSize: 15, visible:()=>((sl_marker_matrix_11_fix.Value() == 3 ? true : false))});
//Text matrix C
var sl_marker_matrix_11_text_01_fix = b.create('text', [4,1, '1-ste Spalte von C'], {anchorX:'middle', fontSize: 15, visible: ()=>(sl_marker_matrix_11_fix.Value() == 1 ? true : false)});
var sl_marker_matrix_11_text_02_fix = b.create('text', [3,1.5, '2-te Spalte von C'], {anchorX:'middle', fontSize: 15, visible: ()=>(sl_marker_matrix_11_fix.Value() == 2 ? true : false)});
var sl_marker_matrix_11_text_03_fix = b.create('text', [3,1.5, '3-te Spalte von C'], {anchorX:'middle', fontSize: 15, visible: ()=>(sl_marker_matrix_11_fix.Value() == 3 ? true : false)});
//Box
var box_01 = b.create('polygon', [[-8,2], [-8,-2], [8, -2], [8,2]], {vertices:{face:'[]', color:'black', size:5, fixed:true}, fillColor:'black', fillOpacity:0.1})
Jetzt kommen wir zur großen Herausforderung: Die beiden slider müssen jetzt den Marker der Matrix C korrekt steuern.
var p_marker_mult = b.create('point', [
()=>((sl_marker_matrix_11.Value() == 1 ? -1.5 : (sl_marker_matrix_11.Value() == 2 ? 0 : (sl_marker_matrix_11.Value() == 3 ? 1.5 : 0))))
,
()=>((sl_marker_matrix_10.Value() <= 3 ? 3.75 : (sl_marker_matrix_10.Value() <= 6 ? 2 : (sl_marker_matrix_10.Value() <= 9 ? 0.25 : 0))))]
,
{visible:false})
Wenn wir das jetzt alles zusammenbauen, dann haben wir’s.
//Matrix A
var matrix_a11 = b.create('text', [-8.5, 3.75, 'a_{11}'], {fontSize:15, anchorX:'middle'});
var matrix_a12 = b.create('text', [-8.5, 2, 'a_{12}'], {fontSize:15, anchorX:'middle'});
var matrix_a13 = b.create('text', [-8.5, 0.25, 'a_{13}'], {fontSize:15, anchorX:'middle'});
var matrix_a21 = b.create('text', [-7, 3.75, 'a_{21}'], {fontSize:15, anchorX:'middle'});
var matrix_a22 = b.create('text', [-7, 2, 'a_{22}'], {fontSize:15, anchorX:'middle'});
var matrix_a23 = b.create('text', [-7, 0.25, 'a_{23}'], {fontSize:15, anchorX:'middle'});
var matrix_a31 = b.create('text', [-5.5, 3.75, 'a_{31}'], {fontSize:15, anchorX:'middle'});
var matrix_a32 = b.create('text', [-5.5, 2, 'a_{32}'], {fontSize:15, anchorX:'middle'});
var matrix_a33 = b.create('text', [-5.5, 0.25, 'a_{33}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[-9.25,4.5],[-8.75,4.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[-9.25,4.5],[-9.25,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[-9.25,-0.5],[-8.75,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[-4.75,4.5],[-5.25,4.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[-4.75,4.5],[-4.75,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[-4.75,-0.5],[-5.25,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
//Matrix B
var matrix_b11 = b.create('text', [-1.5, 3.75, 'b_{11}'], {fontSize:15, anchorX:'middle'});
var matrix_b12 = b.create('text', [-1.5, 2, 'b_{12}'], {fontSize:15, anchorX:'middle'});
var matrix_b13 = b.create('text', [-1.5, 0.25, 'b_{13}'], {fontSize:15, anchorX:'middle'});
var matrix_b21 = b.create('text', [0, 3.75, 'b_{21}'], {fontSize:15, anchorX:'middle'});
var matrix_b22 = b.create('text', [0, 2, 'b_{22}'], {fontSize:15, anchorX:'middle'});
var matrix_b23 = b.create('text', [0, 0.25, 'b_{23}'], {fontSize:15, anchorX:'middle'});
var matrix_b31 = b.create('text', [1.5, 3.75, 'b_{31}'], {fontSize:15, anchorX:'middle'});
var matrix_b32 = b.create('text', [1.5, 2, 'b_{32}'], {fontSize:15, anchorX:'middle'});
var matrix_b33 = b.create('text', [1.5, 0.25, 'b_{33}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[-2.25,4.5],[-1.75,4.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[-2.25,4.5],[-2.25,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[-2.25,-0.5],[-1.75,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[2.25,4.5],[1.75,4.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[2.25,4.5],[2.25,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[2.25,-0.5],[1.75,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
//Matrix C
var matrix_a11 = b.create('text', [5.5, 3.75, 'c_{11}'], {fontSize:15, anchorX:'middle'});
var matrix_a12 = b.create('text', [5.5, 2, 'c_{12}'], {fontSize:15, anchorX:'middle'});
var matrix_a13 = b.create('text', [5.5, 0.25, 'c_{13}'], {fontSize:15, anchorX:'middle'});
var matrix_a21 = b.create('text', [7, 3.75, 'c_{21}'], {fontSize:15, anchorX:'middle'});
var matrix_a22 = b.create('text', [7, 2, 'c_{22}'], {fontSize:15, anchorX:'middle'});
var matrix_a23 = b.create('text', [7, 0.255, 'c_{23}'], {fontSize:15, anchorX:'middle'});
var matrix_a31 = b.create('text', [8.5, 3.75, 'c_{31}'], {fontSize:15, anchorX:'middle'});
var matrix_a32 = b.create('text', [8.5, 2, 'c_{32}'], {fontSize:15, anchorX:'middle'});
var matrix_a33 = b.create('text', [8.5, 0.25, 'c_{33}'], {fontSize:15, anchorX:'middle'});
var l_left_bracket_top = b.create('line', [[4.75,4.5],[5.25,4.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_vert = b.create('line', [[4.75,4.5],[4.75,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_left_bracket_down = b.create('line', [[4.75,-0.5],[5.25,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_top = b.create('line', [[9.25,4.5],[8.75,4.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_vert = b.create('line', [[9.25,4.5],[9.25,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
var l_right_bracket_down = b.create('line', [[9.25,-0.5],[8.75,-0.5]], {straightFirst: false, straightLast: false, color:'black'});
//Rechenzeichen
var mult = b.create('text', [-3.5,2, '⋅'], {fontSize:50, anchorX:'middle'});
var eq = b.create('text', [3.5,2, '='], {fontSize:50, anchorX:'middle'});
//slider
var sl_marker_matrix_10_3 = b.create('slider', [[-7,-3], [-1,-3], [1,1,9]], {snapWidth:1});
var sl_marker_matrix_11_3 = b.create('slider', [[1,-3], [7,-3], [1,1,3]], {snapWidth:1});
//Text Matrix A
var sl_marker_matrix__mult_text_und = b.create('text', [-4,-2.5, '&'], {anchorX:'middle', fontSize: 15});
var sl_marker_matrix__mult_text_a_01_3 = b.create('text', [-4.5,-2.5, '1-ste Zeile von A'], {anchorX:'right', fontSize: 15, visible:()=>((sl_marker_matrix_10_3.Value() <= 3 ? true : false))});
var sl_marker_matrix__mult_text_a_02_3 = b.create('text', [-4.5,-2.25, '2-te Zeile von A'], {anchorX:'right', fontSize: 15, visible:()=>((sl_marker_matrix_10_3.Value() <= 6 ? (sl_marker_matrix_10_3.Value() > 3 ? true : false) : false))});
var sl_marker_matrix__mult_text_a_03_3 = b.create('text', [-4.5,-2.25, '3-te Zeile von A'], {anchorX:'right', fontSize: 15, visible:()=>((sl_marker_matrix_10_3.Value() > 6 ? true : false))});
//Text Matrix B
var sl_marker_matrix__mult_text_b_01_3 = b.create('text', [-3.5,-2.5, '1-ste Spalte von B'], {anchorX:'left', fontSize: 15, visible:()=>((sl_marker_matrix_11_3.Value() == 1 ? true : false))});
var sl_marker_matrix__mult_text_b_02_3 = b.create('text', [-3.5,-2.25, '2-te Spalte von B'], {anchorX:'left', fontSize: 15, visible:()=>((sl_marker_matrix_11_3.Value() == 2 ? true : false))});
var sl_marker_matrix__mult_text_b_03_3 = b.create('text', [-3.5,-2.25, '3-te Spalte von B'], {anchorX:'left', fontSize: 15, visible:()=>((sl_marker_matrix_11_3.Value() == 3 ? true : false))});
//Text matrix C
var sl_marker_matrix_11_text_01_2_3 = b.create('text', [4,-2.5, '1-ste Spalte von C'], {anchorX:'middle', fontSize: 15, visible: ()=>(sl_marker_matrix_11_3.Value() == 1 ? true : false)});
var sl_marker_matrix_11_text_02_2_3 = b.create('text', [3,-2.25, '2-te Spalte von C'], {anchorX:'middle', fontSize: 15, visible: ()=>(sl_marker_matrix_11_3.Value() == 2 ? true : false)});
var sl_marker_matrix_11_text_03_2_3 = b.create('text', [3,-2.25, '3-te Spalte von C'], {anchorX:'middle', fontSize: 15, visible: ()=>(sl_marker_matrix_11_3.Value() == 3 ? true : false)});
//Box
var box_01_2 = b.create('polygon', [[-8,-1.5], [-8,-3.5], [8, -3.5], [8,-1.5]], {vertices:{face:'[]', color:'black', size:5, fixed:true}, fillColor:'black', fillOpacity:0.1})
//Marker Matrix A
var p_marker_mult_a_3 = b.create('point', [()=>((sl_marker_matrix_10_3.Value() <= 3 ? sl_marker_matrix_10_3.Value()*1.5-10 : (sl_marker_matrix_10_3.Value() <= 6 ? sl_marker_matrix_10_3.Value()*1.5-14.5 : sl_marker_matrix_10_3.Value()*1.5-19))),()=>((sl_marker_matrix_10_3.Value() <= 3 ? 3.75 : (sl_marker_matrix_10_3.Value() <= 6 ? 2 : 0.25)))], {visible:false})
var circ_marker_a_3 = b.create('circle', [p_marker_mult_a_3, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
//Marker MAtrix B
var p_marker_mult_b_3 = b.create('point', [
()=>((sl_marker_matrix_11_3.Value() == 1 ? -1.5 : (sl_marker_matrix_11_3.Value() == 2 ? 0 : (sl_marker_matrix_11_3.Value() == 3 ? 1.5 : 0))))
,
()=>((sl_marker_matrix_10_3.Value() <= 3 ? -sl_marker_matrix_10_3.Value()*1.75+5.5 : (sl_marker_matrix_10_3.Value() <= 6 ? -sl_marker_matrix_10_3.Value()*1.75+10.75 : (sl_marker_matrix_10_3.Value() <= 9 ? -sl_marker_matrix_10_3.Value()*1.75+16 : 0))))]
,
{visible:false})
var circ_marker_3 = b.create('circle', [p_marker_mult_b_3, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
//Marker Matrix C
var p_marker_mult_c_3 = b.create('point', [
()=>((sl_marker_matrix_11_3.Value() == 1 ? 5.5 : (sl_marker_matrix_11_3.Value() == 2 ? 7 : (sl_marker_matrix_11_3.Value() == 3 ? 8.5 : 0))))
,
()=>((sl_marker_matrix_10_3.Value() <= 3 ? 3.75 : (sl_marker_matrix_10_3.Value() <= 6 ? 2 : (sl_marker_matrix_10_3.Value() <= 9 ? 0.25 : 0))))]
,
{visible:false})
var circ_marker_3 = b.create('circle', [p_marker_mult_c_3, 0.5], {color:'orange', fillOpacity:0, strokeWidth:4})
//Formel
//c11
var matrixMult_01 = b.create('text', [-2.5,-1.85,'c_{11} = a_{11}b_{11}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 1 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
var matrixMult_02 = b.create('text', [-2.5,-1.6,'c_{11} = a_{11}b_{11} + a_{21}b_{12}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 2 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
var matrixMult_03 = b.create('text', [-2.5,-1.6,'c_{11} = a_{11}b_{11} + a_{21}b_{12} + a_{31}b_{13}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 3 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
//c12
var matrixMult_04 = b.create('text', [-2.5,-1.6,'c_{12} = a_{12}b_{11}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 4 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
var matrixMult_05 = b.create('text', [-2.5,-1.6,'c_{12} = a_{12}b_{11} + a_{22}b_{12}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 5 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
var matrixMult_06 = b.create('text', [-2.5,-1.6,'c_{12} = a_{12}b_{11} + a_{22}b_{12} + a_{32}b_{13}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 6 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
//c13
var matrixMult_07 = b.create('text', [-2.5,-1.6,'c_{13} = a_{13}b_{11}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 7 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
var matrixMult_08 = b.create('text', [-2.5,-1.6,'c_{13} = a_{13}b_{11} + a_{23}b_{12}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 8 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
var matrixMult_09 = b.create('text', [-2.5,-1.6,'c_{13} = a_{13}b_{11} + a_{23}b_{12} + a_{33}b_{13}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 9 ? (sl_marker_matrix_11_3.Value() == 1 ? true : false) : false)})
//c21
var matrixMult_10 = b.create('text', [-2.5,-1.6,'c_{11} = a_{11}b_{21}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 1 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
var matrixMult_11 = b.create('text', [-2.5,-1.6,'c_{11} = a_{11}b_{21} + a_{21}b_{22}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 2 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
var matrixMult_12 = b.create('text', [-2.5,-1.6,'c_{11} = a_{11}b_{21} + a_{21}b_{22} + a_{31}b_{23}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 3 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
//c22
var matrixMult_13 = b.create('text', [-2.5,-1.6,'c_{12} = a_{12}b_{21}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 4 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
var matrixMult_14 = b.create('text', [-2.5,-1.6,'c_{12} = a_{12}b_{21} + a_{22}b_{22}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 5 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
var matrixMult_15 = b.create('text', [-2.5,-1.6,'c_{12} = a_{12}b_{21} + a_{22}b_{22} + a_{32}b_{23}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 6 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
//c23
var matrixMult_16 = b.create('text', [-2.5,-1.6,'c_{13} = a_{13}b_{21}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 7 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
var matrixMult_17= b.create('text', [-2.5,-1.6,'c_{13} = a_{13}b_{21} + a_{23}b_{22}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 8 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
var matrixMult_18 = b.create('text', [-2.5,-1.6,'c_{13} = a_{13}b_{21} + a_{23}b_{22} + a_{33}b_{23}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 9 ? (sl_marker_matrix_11_3.Value() == 2 ? true : false) : false)})
//c31
var matrixMult_19 = b.create('text', [-2.5,-1.6,'c_{31} = a_{11}b_{31}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 1 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
var matrixMult_20 = b.create('text', [-2.5,-1.6,'c_{31} = a_{11}b_{31} + a_{21}b_{32}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 2 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
var matrixMult_21 = b.create('text', [-2.5,-1.6,'c_{31} = a_{11}b_{31} + a_{21}b_{32} + a_{31}b_{33}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 3 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
//c32
var matrixMult_22 = b.create('text', [-2.5,-1.6,'c_{32} = a_{12}b_{31}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 4 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
var matrixMult_23 = b.create('text', [-2.5,-1.6,'c_{32} = a_{12}b_{31} + a_{22}b_{32}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 5 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
var matrixMult_24 = b.create('text', [-2.5,-1.6,'c_{32} = a_{12}b_{31} + a_{22}b_{32} + a_{32}b_{33}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 6 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
//c33
var matrixMult_25 = b.create('text', [-2.5,-1.6,'c_{33} = a_{13}b_{31}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 7 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
var matrixMult_26= b.create('text', [-2.5,-1.6,'c_{33} = a_{13}b_{31} + a_{23}b_{32}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 8 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
var matrixMult_27 = b.create('text', [-2.5,-1.6,'c_{33} = a_{13}b_{31} + a_{23}b_{32} + a_{33}b_{33}'], {fontSize:20, visible:()=>(sl_marker_matrix_10_3.Value() == 9 ? (sl_marker_matrix_11_3.Value() == 3 ? true : false) : false)})
Zukunft
Auch wenn das Projekt an der Uni demnächst endet, wird der Themenbereich JSXGraph weitergeführt und mit weiteren Beispielen und kleinen Tutorials ausgestattet.
DAS IST GEPLANT:
# reset linker slider wenn slider.Value() recht geändert wird
# Darstellung für nxn Matrizen, wobei n per slider bestimmbar
# automatisierte Formelgenerierung
# Eingabe eigener Werte mit berechneter Lösung
# Matrix-Vektor Berechnungen
Aktuelle beta-Phasen
In diesem Bereich findet ihr aktuelle angefangene oder abgeschlossene ältere Projekte. Wichtig: es sind teilweise KEINE fertigen Projekte, weshalb es noch zu Fehlern kommen kann.
Plot
var graph = board.create('functiongraph',
[function(x){ return 1*x+5;}]
);
Trace
var s = board.create('slider', [[-5,3], [-1,3], [-20,1,20]], {name: 's'});
var A = board.create('point', [5,2]);
var B = board.create('point',
[
function() {return s.Value();},
() => A.X()+s.Value()
],
{ color: 'blue', trace:true});
Shear
var P1 = board.create('point', [1,0], {name:''});
var P2 = board.create('point', [10,0], {name:''});
var P3 = board.create('point', [3,10], {name:''});
var P4 = board.create('point', [12,10], {name:''});
var Para = board.create('polygon', [P1, P2, P4, P3]);
var ParaTr = board.create('transform', [() => ((P1.X()-P3.X())/P3.Y()), 0], {type:'shear'});
var Para2 = board.create('polygon', [Para, ParaTr]);
Matrix-Vektor (1.0)
var P1 = board.create('point', [1,0], {name:''});
var P2 = board.create('point', [10,0], {name:''});
var P3 = board.create('point', [3,10], {name:''});
var P4 = board.create('point', [12,10], {name:''});
var Para = board.create('polygon', [P1, P2, P4, P3]);
var ParaTr = board.create('transform', [() => ((P1.X()-P3.X())/P3.Y()), 0], {type:'shear'});
var Para2 = board.create('polygon', [Para, ParaTr]);
Matrix-Vektor (2.0)
var P1 = board.create('point', [1,0], {name:''});
var P2 = board.create('point', [10,0], {name:''});
var P3 = board.create('point', [3,10], {name:''});
var P4 = board.create('point', [12,10], {name:''});
var Para = board.create('polygon', [P1, P2, P4, P3]);
var ParaTr = board.create('transform', [() => ((P1.X()-P3.X())/P3.Y()), 0], {type:'shear'});
var Para2 = board.create('polygon', [Para, ParaTr]);
Matrix Minus Matrix mit Eingabe
//Matrizen erstellen
//A
var input_A_11 = board.create('input', [-0.1, 3, 'a11', ''], {cssStyle: 'width: 25px'});
var input_A_12 = board.create('input', [0.75, 3, 'a12', ''], {cssStyle: 'width: 25px'});
var input_A_13 = board.create('input', [1.6, 3, 'a13', ''], {cssStyle: 'width: 25px'});
var input_A_21 = board.create('input', [-0.1, 2, 'a21', ''], {cssStyle: 'width: 25px'});
var input_A_22 = board.create('input', [0.75, 2, 'a22', ''], {cssStyle: 'width: 25px'});
var input_A_23 = board.create('input', [1.6, 2, 'a23', ''], {cssStyle: 'width: 25px'});
var input_A_31 = board.create('input', [-0.1, 1, 'a31', ''], {cssStyle: 'width: 25px'});
var input_A_32 = board.create('input', [0.75, 1, 'a32', ''], {cssStyle: 'width: 25px'});
var input_A_33 = board.create('input', [1.6, 1, 'a33', ''], {cssStyle: 'width: 25px'});
//B
var input_B_11 = board.create('input', [3.9, 3, 'b11', ''], {cssStyle: 'width: 25px'});
var input_B_12 = board.create('input', [4.75, 3, 'b12', ''], {cssStyle: 'width: 25px'});
var input_B_13 = board.create('input', [5.6, 3, 'b13', ''], {cssStyle: 'width: 25px'});
var input_B_21 = board.create('input', [3.9, 2, 'b21', ''], {cssStyle: 'width: 25px'});
var input_B_22 = board.create('input', [4.75, 2, 'b22', ''], {cssStyle: 'width: 25px'});
var input_B_23 = board.create('input', [5.6, 2, 'b23', ''], {cssStyle: 'width: 25px'});
var input_B_31 = board.create('input', [3.9, 1, 'b31', ''], {cssStyle: 'width: 25px'});
var input_B_32 = board.create('input', [4.75, 1, 'b32', ''], {cssStyle: 'width: 25px'});
var input_B_33 = board.create('input', [5.6, 1, 'b33', ''], {cssStyle: 'width: 25px'});
//C
var C_11 = board.create('text', [7.9,3, "c_{11}"]);
var C_12 = board.create('text', [8.9,3, "c_{12}"]);
var C_13 = board.create('text', [9.9,3, "c_{13}"]);
var C_21 = board.create('text', [7.9,2, "c_{21}"]);
var C_22 = board.create('text', [8.9,2, "c_{22}"]);
var C_23 = board.create('text', [9.9,2, "c_{23}"]);
var C_31 = board.create('text', [7.9,1, "c_{31}"]);
var C_32 = board.create('text', [8.9,1, "c_{32}"]);
var C_33 = board.create('text', [9.9,1, "c_{33}"]);
//Klammer um Matrix
//A
var A_bracket_left_1 = board.create('line', [[0,3.2],[-0.2,3.2]], {straightFirst:false, straightLast:false});
var A_bracket_left_2 = board.create('line', [[-0.2,3.2],[-0.2,0.8]], {straightFirst:false, straightLast:false});
var A_bracket_left_3 = board.create('line', [[-0.2,0.8],[0,0.8]], {straightFirst:false, straightLast:false});
var A_bracket_right_1 = board.create('line', [[2,3.2],[2.2,3.2]], {straightFirst:false, straightLast:false});
var A_bracket_right_2 = board.create('line', [[2.2,3.2],[2.2,0.8]], {straightFirst:false, straightLast:false});
var A_bracket_right_3 = board.create('line', [[2.2,0.8],[2,0.8]], {straightFirst:false, straightLast:false});
//B
var B_bracket_left_1 = board.create('line', [[4,3.2],[3.8,3.2]], {straightFirst:false, straightLast:false});
var B_bracket_left_2 = board.create('line', [[3.8,3.2],[3.8,0.8]], {straightFirst:false, straightLast:false});
var B_bracket_left_3 = board.create('line', [[3.8,0.8],[4,0.8]], {straightFirst:false, straightLast:false});
var B_bracket_right_1 = board.create('line', [[6,3.2],[6.2,3.2]], {straightFirst:false, straightLast:false});
var B_bracket_right_2 = board.create('line', [[6.2,3.2],[6.2,0.8]], {straightFirst:false, straightLast:false});
var B_bracket_right_3 = board.create('line', [[6.2,0.8],[6,0.8]], {straightFirst:false, straightLast:false});
//C
var C_bracket_left_1 = board.create('line', [[8,3.2],[7.8,3.2]], {straightFirst:false, straightLast:false});
var C_bracket_left_2 = board.create('line', [[7.8,3.2],[7.8,0.8]], {straightFirst:false, straightLast:false});
var C_bracket_left_3 = board.create('line', [[7.8,0.8],[8,0.8]], {straightFirst:false, straightLast:false});
var C_bracket_right_1 = board.create('line', [[10,3.2],[10.2,3.2]], {straightFirst:false, straightLast:false});
var C_bracket_right_2 = board.create('line', [[10.2,3.2],[10.2,0.8]], {straightFirst:false, straightLast:false});
var C_bracket_right_3 = board.create('line', [[10.2,0.8],[10,0.8]], {straightFirst:false, straightLast:false});
//Additionszeichen erstellen
var sub_1 = board.create('line', [[3.2,2],[2.8,2]], {straightFirst:false, straightLast:false});
//Gleichheitszeichen erstellen
var equal_1 = board.create('line', [[6.8,2.1],[7.2,2.1]], {straightFirst:false, straightLast:false});
var equal_2 = board.create('line', [[6.8,1.9],[7.2,1.9]], {straightFirst:false, straightLast:false});
//Slider erstellen
var SR = board.create('slider', [[3,4], [7,4], [1, 1, 9]], {snapWidth: 1});
//Verschiebbare Kreise erstellen
var SR_p = board.create('point', [()=>((SR.Value() <= 3 ? SR.Value() -1 : (SR.Value() <= 6 ? SR.Value() - 4 : SR.Value() - 7))), -1], {visible: false});
var circ_Matrix_A = board.create('circle',[
[()=>(SR_p.X()), ()=>(SR.Value() <= 3 ? 3 : (SR.Value() <= 6 ? 2 : 1))],
[()=>(SR_p.X()), ()=>((SR.Value() <= 3 ? 3.25 : (SR.Value() <= 6 ? 2.25 : 1.25)))]
]);
var circ_Matrix_B = board.create('circle', [
[()=>(SR_p.X()+4), ()=>(SR.Value() <= 3 ? 3 : (SR.Value() <= 6 ? 2 : 1))],
[()=>(SR_p.X()+4), ()=>(SR.Value() <= 3 ? 3.25 : (SR.Value() <= 6 ? 2.25 : 1.25))]
])
var circ_Matrix_C = board.create('circle', [
[()=>(SR_p.X()+8), ()=>(SR.Value() <= 3 ? 3 : (SR.Value() <= 6 ? 2 : 1))],
[()=>(SR_p.X()+8), ()=>(SR.Value() <= 3 ? 3.25 : (SR.Value() <= 6 ? 2.25 : 1.25))]
])
equal_1 = ()=>(Number(input_A_11.Value()) - Number(input_B_11.Value()));
equal_2 = ()=>(Number(input_A_12.Value()) - Number(input_B_12.Value()));
equal_3 = ()=>(Number(input_A_13.Value()) - Number(input_B_13.Value()));
equal_4 = ()=>(Number(input_A_21.Value()) - Number(input_B_21.Value()));
equal_5 = ()=>(Number(input_A_22.Value()) - Number(input_B_22.Value()));
equal_6 = ()=>(Number(input_A_23.Value()) - Number(input_B_23.Value()));
equal_7 = ()=>(Number(input_A_31.Value()) - Number(input_B_31.Value()));
equal_8 = ()=>(Number(input_A_32.Value()) - Number(input_B_32.Value()));
equal_9 = ()=>(Number(input_A_33.Value()) - Number(input_B_33.Value()));
var rechnen_button = board.create('button', [5,0, 'Berechnen',
()=>(
C_11.setText(equal_1),
C_12.setText(equal_2),
C_13.setText(equal_3),
C_21.setText(equal_4),
C_22.setText(equal_5),
C_23.setText(equal_6),
C_31.setText(equal_7),
C_32.setText(equal_8),
C_33.setText(equal_9)
)
]);