JSXGraph - WmV - Seminar - Linien

Nachdem die Punkte eingeführt worden sind, können wir uns den Linien widmen. Diese ermöglichen es uns später geometrische Formen gestalten zu können oder Strecken oder Geraden ganz nach unserem Wunsch zu gestalten. Das Schema ist hierbei fast identisch.

Schema

				
					var Liniename = board.create('line', [[x_1,y_1], [x_2,y_2]], {});

Liniename: Gib der Linie einen Namen
line: Eine Art Kennwort, dass dem Script sagt, dass nun eine Linie erstellt wird
[x_1,y_1]: "Startpunkt" der Linie
[x_2,y_2]: "Endpunkt" der Linie
{}: Hier kommen weitere Eigenschaften zum Punkt rein

Hierbei ist es wichtig zu erwähnen, dass die Start- und Endpunkte ohne weitere Attribute keine wirklichen Start- und Endpunkte sind. Vielmehr geben sie an, durch welche zwei Punkte eine Linie gehen soll. Wir haben im Normalfall also immer eine Gerade. Um nun aber eine Strecke zu erhalten, müssen der Linie Eigenschaften gegeben werden.

Eigenschaften / Attribute

				
					color:'FARBE' Verändert die Farbe

fixed: true/false Fixiert die Linie

strokeWidth: ZAHL Verändert die Größe

straightFirst: true/false Linie geht durch Startpunkt oder nicht

straightLast: true/false Linie geht durch Endpunkt oder nicht

firstArrow: true/false Verändert das Aussehen am Startpunkt 

lastArrow: true/false Verändert das Aussehen am Endpunkt 

dash: ZAHL Gestrichelte Linie

JSXGraph template

Beispiele

Vektor

Auf diese Weise können nun beispielsweise Vektoren erstellt werden. Für den Fall, dass die Punkte störend sind, können die durch das Attribut visible ausgeblendet werden.

				
					    //Punkte erstellen
    var p01 = board.create('point', [-5,-3], {visible: false});
    var p02 = board.create('point', [4,5], {});
    //Punkte mittels Linie verbinden
    var line_p01_p02 = board.create('line', [p01,p02], {straightFirst: false, straightLast: false, firstArrow: true});

Damit das mit den Attributen der Punkt ein wenig einfacher geht und am Ende auch übersichtlicher ist, können wir eine Punktvariable erstellen und die dann als Punkt im Linienschema einbauen.

JSXGraph template

Flächen

Auch Flächen können nun mit Hilfe von Punkten und Linien erstellt werden. Bei komplexeren Flächen kann es irgendwann sehr mühselig sein, alle Linien erstellen zu müssen. Eine einfachere und kompaktere Version liefert „polygon“ anstelle von „line“. Mehr dazu auf der Flächen-Seite.

				
					    //Punkte erstellen
    var p_square_01 = b2.create('point', [-5,-5], {size: 1});
    var p_square_02 = b2.create('point', [-5,5], {size: 1});
    var p_square_03 = b2.create('point', [5,-5], {size: 1});
    var p_square_04 = b2.create('point', [3,3], {size: 1});
    //Linien erstellen
    var l_square_01 = b2.create('line', [p_square_01, p_square_02], {straightFirst: false, straightLast: false, strokeWidth: 5})
    var l_square_02 = b2.create('line', [p_square_02, p_square_04], {straightFirst: false, straightLast: false, strokeWidth: 5})
    var l_square_03 = b2.create('line', [p_square_03, p_square_01], {straightFirst: false, straightLast: false, strokeWidth: 5})
    var l_square_04 = b2.create('line', [p_square_04, p_square_03], {straightFirst: false, straightLast: false, strokeWidth: 5})

Damit das mit den Attributen der Punkt ein wenig einfacher geht und am Ende auch übersichtlicher ist, können wir eine Punktvariable erstellen und die dann als Punkt im Linienschema einbauen.

JSXGraph template

Körper

Körper können ebenso auf diese Weise gebaut werden, wenn die Linien im Hintergrund mit Hilfe von „dash“ gestrichelt dargestellt werden.

				
					    //Punkte erstellen
    var p_triangle_01 = b2.create('point', [-5,-3], {size: 1});
    var p_triangle_02 = b2.create('point', [1,-1], {size: 1});
    var p_triangle_03 = b2.create('point', [4,-5], {size: 1});
    var p_triangle_04 = b2.create('point', [0,6], {size: 1});
      
    //Linien erstellen
    var l_triangle_01 = b2.create('line', [p_triangle_01, p_triangle_02], {straightFirst: false, straightLast: false, strokeWidth: 5, dash:3})
    var l_triangle_02 = b2.create('line', [p_triangle_02, p_triangle_03], {straightFirst: false, straightLast: false, strokeWidth: 5, dash:3})
    var l_triangle_03 = b2.create('line', [p_triangle_03, p_triangle_01], {straightFirst: false, straightLast: false, strokeWidth: 5})
    var l_triangle_04 = b2.create('line', [p_triangle_01, p_triangle_04], {straightFirst: false, straightLast: false, strokeWidth: 5})
    var l_triangle_05 = b2.create('line', [p_triangle_02, p_triangle_04], {straightFirst: false, straightLast: false, strokeWidth: 5, dash:3})
    var l_triangle_06 = b2.create('line', [p_triangle_03, p_triangle_04], {straightFirst: false, straightLast: false, strokeWidth: 5})

Damit das mit den Attributen der Punkt ein wenig einfacher geht und am Ende auch übersichtlicher ist, können wir eine Punktvariable erstellen und die dann als Punkt im Linienschema einbauen.

JSXGraph template

Körper 2.0 (WIP)

WIP

JSXGraph template

Matrix und mathematische Symbole

Linien eignen sich auch dafür, bestimmte Klammern für Matrizen zu erstellen, was später noch wichtig sein wird. Auch Rechensymbole lassen sich mit dem bisherigen Wissen problemlos erstellen und individuell anpassen.

				
					    //Rechte Matrix-Klammer
    var p_matrix_r_top_01 = b.create('point', [1,2], {visible: false});
    var p_matrix_r_top_02 = b.create('point', [0,2], {visible: false});
    var p_matrix_r_down_01 = b.create('point', [1,-2], {visible: false});
    var p_matrix_r_down_02 = b.create('point', [0,-2], {visible: false});
    
    var l_matrix_top = b.create('line', [p_matrix_r_top_01,p_matrix_r_top_02], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})
    var l_matrix_vert = b.create('line', [p_matrix_r_top_01,p_matrix_r_down_01], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})
    var l_matrix_vert = b.create('line', [p_matrix_r_down_01,p_matrix_r_down_02], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})

    //Linke Matrix-Klammer
    var p_matrix_l_top_01 = b.create('point', [-3,2], {visible: false});
    var p_matrix_l_top_02 = b.create('point', [-2,2], {visible: false});
    var p_matrix_l_down_01 = b.create('point', [-3,-2], {visible: false});
    var p_matrix_l_down_02 = b.create('point', [-2,-2], {visible: false});
     
    var l_matrix_top = b.create('line', [p_matrix_l_top_01,p_matrix_l_top_02], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})
    var l_matrix_vert = b.create('line', [p_matrix_l_top_01,p_matrix_l_down_01], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})
    var l_matrix_vert = b.create('line', [p_matrix_l_down_01,p_matrix_l_down_02], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})
    
    //Einträge der Matrix
    var matrix_a11 = b.create('text', [-2.5, 1, 'a11']);
    var matrix_a12 = b.create('text', [-0.5, 1, 'a12']);
    var matrix_a21 = b.create('text', [-2.5, -1, 'a21']);
    var matrix_a = b.create('text', [-0.5, -1, 'a22']);
    
    //Additionszeichen
    var plus_01 = b.create('line', [[3,3], [5,3]], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})
    var plus_02 = b.create('line', [[4,2], [4,4]], {straightFirst: false, straightLast: false, strokeWidth: 4, color: 'black'})
    
    //Multiplikationszeichen
    var mult = b.create('point', [-5,4], {size: 10, name:'', color: 'black'})

JSXGraph template

Mathematische Symbole lassen sich natürlich auch mit

				
					var plus = b.create('text', [4, 2, '+'], {fontSize: 100});
    var l_bracket = b.create('text', [4, -3, '['], {fontSize: 100});
    var r_bracket = b.create('text', [7, -3, ']'], {fontSize: 100});

erstellen, jedoch ist hier der Nachteil, dass die Liniendicke oder das Aussehen der Klammer nicht so individuell einstellbar ist, wie die obere Variante, wo die Linien einzeln erstellt werden.

JSXGraph template