JSXGraph - WmV - Seminar - Punkte

Punkte gehören zu den Grundbausteinen der interaktiven Inhalte. Mit ihnen lassen sich viele geometrische Figuren einfach programmieren und Bewegungen leicht umsetzen. Die Punkte werden nach einem ganz bestimmten Schema aufgebaut und können dann beliebig konfiguriert werden.

Schema

				
					var Punktname = board.create('point', [x,y], {});

Punktname: Gib dem Punkt einen Namen
point: Eine Art Kennwort, dass dem Script sagt, dass nun ein Punkt erstellt wird.
[x,y]: Ort vom Punkt
{}: Hier kommen weitere Eigenschaften zum Punkt rein

Eigenschaften / Attribute

				
					name:'NAME' Verändert den Namen

color:'FARBE' Verändert die Farbe

face:'FACE' Verändert das Aussehen

fixed: true/false Fixiert den Punkt

size: ZAHL Verändert die Größe
JSXGraph template

Die Attribute können auch miteinander gemischt werden, indem sie durch ein Komma voneinander getrennt werden.

				
					var Hamburg = board.create('point', [4,-2], {name:'Hamburg', color:'red', face:'[]', fixed: true, size:'5'});

Function

Manchmal kann es nützlich sein, wenn sich ein Punkt bewegt, dass sich dann auch ein anderer Punkt um die gleiche Strecke oder um die gleiche Strecke oder gar in einer ganz anderen Richtung bewegt. Um das realisieren zu können, werden functions verwendet. Diese geben dem Browser die Aufgabe, zum Beispiel die Position vom Punkt A ständig zu überwachen und sobald etwas an der Position geändert wird, diese Veränderung dann wie angegeben zu nutzen. Zum Beispiel, um den Punkt B ebenfalls um die gleiche Strecke wie Punkt A zu bewegen. Es gibt hierbei verschiedene Schreibweisen, wobei hier die schreibarmeweise genutzt wird.

				
					Lang:
function(){return INHALT;}
				
			
				
					Kurz:
()=>(INHALT)


Damit nun die Position von einem Punkt A abgefragt werden kann, wird die Funktion wie folgt geschrieben:

				
					x-Wert abfragen:
()=>(A.X())
				
			
				
					y-Wert abfragen:
()=>(A.Y())

Diese Funktion wird dann beim x-Wert oder beim y-Wert vom Punkt B eingesetzt. Beides ist ebenso möglich.

JSXGraph template 
				
					//A startet bei [0,0] und B bei [1,5]
var A = board.create('point', [0,0], {name:'A'});
var B = board.create('point', [()=>(1+A.X()),()=>(5+A.Y())], {name:'B'});

Im nächsten Beispiel bewegt sich der Punkt B doppelt so schnell wie A.

JSXGraph template 
				
					//A startet bei [0,0] und B bei [1,5]
var A = board.create('point', [0,0], {name:'A'});
var B = board.create('point', [()=>(1+2*A.X()),()=>(5+2*A.Y())], {name:'B'});
Startseite
Linien