JSXGraph - WmV - Seminar - Flächen
Neben der Möglichkeit mit „line“ gibt es auch noch eine andere Möglichkeit, Flächen zu erstellen, die einige Eigenschaften mehr mit sich bringen. Selbst (interaktive) abstrakte Kunstwerke lassen sich damit erstellen. Die Rede ist von „polygon“.
Schema
var Polygonname = board.create('polygon', [[x_1,y_1], [x_2,y_2], ..., [x_n, y_n]], {});
Polygonname: Gib dem Polygon einen Namen
polygon: Eine Art Kennwort, dass dem Script sagt, dass nun ein Polygon erstellt wird
[x_1,y_1], ... , [x_n, y_n]: Eckpunkte deines Polygons
{}: Hier kommen weitere Eigenschaften zum Polygon rein
Bei der Wahl der Eckpunkte sollte unbedingt auf die richtige Reihenfolge im oder gegen den Uhrzeigersinn geachtet werden, da sonst sehr verrückte Strukturen zustande kommen.
Eigenschaften / Attribute
fillColor: 'FARBE' Verändert die Füllfarbe
fillOpacity: ZAHL Verändert Deckkraft (0% = 0, 50% = 0.5, 100% = 1)
WIP
Beispiele
1. Binomische Formel
Mit den Flächen lassen sich zum Beispiel die binomischen Sätze visualisieren. Hier wurde die erste binomische Formel genommen.
Dabei wurden alle Punkte, bis auf den schwarzen Mittleren fixiert. Damit die Linien gerade bleiben, wurden die Koordinaten der Punkte mit einer function abhängig von den Koordinaten vom schwarzen Punkt erstellt. Zum Schluss kommen noch die Beschriftungen hinzu, die ebenfalls in Abhängigkeit vom mittleren Punkt platziert worden sind. Auf diese Weise erhalten wir eine schöne visuelle Darstellung von der ersten binomischen Formel.
//Punkte erstellen
var p5 = board.create('point', [0,0], {name:'', color:'black'});
var p1 = board.create('point', [-6,5], {name:'', color:'black', fixed: true, visible: false});
var p2 = board.create('point', [-6,()=>(p5.Y())], {name:'', color:'black', fixed: true, visible: false});
var p3 = board.create('point', [-6,-3], {name:'', color:'black', fixed: true, visible: false});
var p4 = board.create('point', [()=>(p5.X()),5], {name:'', color:'black', fixed: true, visible: false});
var p6 = board.create('point', [()=>(p5.X()),-3], {name:'', color:'black', fixed: true, visible: false});
var p7 = board.create('point', [5,5], {name:'', color:'black', fixed: true, visible: false});
var p8 = board.create('point', [5,()=>(p5.Y())], {name:'', color:'black', fixed: true, visible: false});
ar p9 = board.create('point', [5,-3], {name:'', color:'black',fixed: true, visible: false});
//Polygone erstellen
var pol_a2 = board.create('polygon', [p1,p2,p5,p4], {fillColor: 'blue'});
var pol_ab_01 = board.create('polygon', [p4,p5,p8,p7], {fillColor: 'red'});
var pol_ab_02 = board.create('polygon', [p2,p3,p6,p5], {fillColor: 'red'});
var pol_b2 = board.create('polygon', [p5,p6,p9,p8], {fillColor: 'green'});
//Beschriftungen erstellen
//außen
var t_a_h = board.create('text', [ ()=>((p3.X() + p6.X())/2), ()=>(p3.Y()-1), 'a']);
var t_a_v = board.create('text', [ ()=>(p1.X()-1), ()=>((p1.Y() + p2.Y())/2), 'a']);
var t_b_h = board.create('text', [ ()=>((p6.X() + p9.X())/2), ()=>(p6.Y()-1), 'b']);
ar t_b_v = board.create('text', [ ()=>(p2.X()-1), ()=>((p2.Y() + p3.Y())/2), 'b']);
//innen
var t_a2 = board.create('text', [()=>((p3.X() + p6.X())/2), ()=>((p1.Y() + p2.Y())/2),'a^2']);
var t_ab_01 = board.create('text', [()=>((p6.X() + p9.X())/2), ()=>((p1.Y() + p2.Y())/2),'ab']);
var t_ab_02 = board.create('text', [()=>((p3.X() + p6.X())/2), ()=>((p2.Y() + p3.Y())/2),'ab']);
var t_b2 = board.create('text', [()=>((p6.X() + p9.X())/2), ()=>((p2.Y() + p3.Y())/2),'b^2']);
1. Binomische Formel mit 3D-Effekt
Wer der Visualisierung einen 3D-Effekt hinzugeben möchte, kann es mit der shadow Attribut wie folgt machen:
var shadow_r = board.create('line', [p7, p9], {straightFirst: false, straightLast: false, strokeWidth:1, shadow: {enabled: true, offset:[3, 2], blur: 3}});
var shadow_b = board.create('line', [p3, p9], {straightFirst: false, straightLast: false, strokeWidth:1, shadow: {enabled: true, offset:[0, 4], blur: 3}});
Schema
Natürlich lassen sich auch Sätze wie der Satz des Pythagoras damit erstellen. Jedoch wird es hierbei sehr mühselig, alle Seiten und Ecken in Abhängigkeit der anderen zu erstellen. Dafür eignet sich dann regularPolygon, was nur eine Seite benötigt und dann ein gleichmäßiges Polygon aus der Anzahl der angegebenen Ecken erstellt.
var Polygonname = board.create('regularPolygon', [[x_1,y_1], [x_2,y_2] ECKEN], {});
Polygonname: Gib dem Polygon einen Namen
regularPolygon: Eine Art Kennwort, dass dem Script sagt, dass nun ein gleichseitiges Polygon erstellt wird
[x_1,y_1], [x_2,y_2]: Eine Seite des Polygons
{}: Hier kommen weitere Eigenschaften zum Polygon rein
Beispiele
Polygone
Einfache Polygone lassen sich damit also wie folgt erstellen:
var rP_01 = board.create('regularPolygon', [[-1,-2],[2,2],6])
var rP_02 = board.create('regularPolygon', [[4,-2],[5,-5],4], {vertices: {visible:false}})
Die Punkte werden dabei automatisch erstellt. Sind diese jedoch unerwünscht, können die bei den Attributen mit
vertices: {visible:false}
unsichtbar gemacht werden. Auf diese Weise können sie auch individuell angepasst werden.
Satz des Pythagoras
Das Knifflige ist hierbei, dass sehr viele Punkte in Abhängigkeit voneinander erstellt werden müssen. Dabei bewegen sich die Punkte nicht nur horizontal oder vertikal, sondern in beiden Richtungen auf Kreisbahnen. Da das zu aufwendig zu programmieren ist, wählen wir für das Dreieck polygon und für die Quadrate regularPolygon, wobei die Seite gerade so lang wie die dazugehörige Seite vom Dreieck ist.
//Halbkreis erstellen
var circ = board.create('curve', [(t)=>(0.5+3.5*Math.cos(t)), (t)=>(3.5*Math.sin(t)-1.15), 0, Math.PI], {dash:4});
//Glider erstellen
var gl = board.create('glider', [circ])
//Eckpunkte vom Dreieck erstellen
var p_triangle_c = board.create('point', [()=>(gl.X()),()=>(gl.Y())], {name:'', color:'black'});
var p_triangle_a = board.create('point', [-3,-1], {name:'', size:1, color:'black', fixed: true});
var p_triangle_b = board.create('point', [4,-1], {name:'', size:1, color:'black', fixed: true});
//Eckepunkte zu einem Polygon verbinden
var pol_triangle = board.create('polygon', [p_triangle_c, p_triangle_a, p_triangle_b], {fillOpacity: 0});
//An jeder Seite ein gleichseitiges Polygon erstellen
var rpol_rect_b2 = board.create('regularPolygon', [p_triangle_a, p_triangle_c, 4], {vertices: {size: 1, color: 'black', name:''}})
var rpol_rect_a2 = board.create('regularPolygon', [p_triangle_c, p_triangle_b, 4], {vertices: {size: 1, color: 'black', name:''}})
var rpol_rect_c2 = board.create('regularPolygon', [p_triangle_b, p_triangle_a, 4], {vertices: {size: 1, color: 'black', name:''}})
Hierbei wurde, um immer rechtwinklige Dreiecke zu erhalten, ein Halbkreis mit Hilfe von curve erstellt und auf diesem ein Punkt (glider) erstellt, der sich nur entlang des Kreises bewegen kann.
Mathematik und Kunst
Da soll noch einmal einer sagen, die Mathematik sei keine Kunst!
Schema
Um gleich die panische Frage, ob man bei einem Kreis nun unendlich viele Punkte bzw. ein regularPolygon mit unendlich vielen Ecken erstellen muss, zu beantworten: circle ist das, was du suchst!
var Kreisname = board.create('circle', [MITTELPUNKT, RADIUS], {});
Kreisname: Gib dem Kreis einen Namen
circle: Eine Art Kennwort, dass dem Script sagt, dass nun ein Kreis erstellt wird
MITTELPUNKT: Mittelpunkt vom Kreis
RADIUS: Radius vom Kreis
{}: Hier kommen weitere Eigenschaften zum Polygon rein
Beispiele
Einfache Kreise
Damit lassen sich einfache Kreise aller Art erstellen.
var radius = board.create('point', [1,4])
var center = board.create('point', [1,1])
var circ_01 = board.create('circle', [center,radius]);
var circ_02 = board.create('circle', [[-4,-3],2], {fillColor:'blue', fillOpacity:0.5});