Tags: Artikel mit dem Tag «Mathematik» durchstöbern
Pentagramme, 5-Ecke, √5 und Φ
In letzter Zeit habe ich mich einal genauer mit den Winkeln und Strecken-Verhältnissen in Fünfecken und Pentagrammen beschäftigt, und bin dabei auf allerlei Vielfache der Wurzel 5 und der Goldenen Zahl Φ gestoßen. Dem zweidimensionalen Pentagramm, wie auch dem Dodekaeder, und in gewisser Weise auch dem Ikosaeder liegt das Fünfeck als Baustein zugrunde.
Pentagramm und Fünfeck
Die Winkel im Pentagramm sind fast alle 36°, oder Vielfache, wie 18°, 72°, 108°, 144°. Die Längenverhältnisse sind schon interessanter: Beim Fünfeck stehen Diagonale (in der Skizze blau) und Seitenlänge (magenta) im Verhältnis des Goldenen Scnittes, genauso im Pentagramm der große (hellblau, [AS]) und der kleine (hellmagenta, [SS'']) Abschnitt (gleichzeitig Seite des kleinen Fünfecks) der Seite. Dadurch, dass das Pentagramm aus den Diagonalen des Fünfecks gebildet wird, kann man von der Seitenlänge des kleinen Fünfecks auf die des Großen schließen:
[AD] = d(S,S'') + 2*Φ*d(S,S'')
[AD] = Φ*[AB]
1/Φ = Φ - 1
[AB] = [ d(S,S'') + 2*Φ*d(S,S'') ]/Φ = ( 1/Φ + 2 )*d(S,S'')
= (Φ + 1)*d(S,S'')
Interessant für meine Zwecke war dies, um die Polarkoordinaten aller Punkte herauszubekommen. Dabei dient M als Ursprung, und wenn die drei Punkte A, M' und S bestimmt wurden, lassen sich die übrigen Punkte durch Rotation finden. Durch Rotation (und Spiegelung) der beiden in Cyan markierten Strecken lässt sich das gesamte Pentagramm bilden. Das habe ich bei meinen Konstruktionen verwendet. Der Azimut φ ist bei allen 3 Punkten trivial. Allein der Radius r bedarf einiger Überlegung.
Zum Glück hilft Wikipedia hier mit 2 recht praktischen Formeln für In- und Umkreisradius, sodass man sich einiges Gerechne mit Dreiecks-Ähnlichkeiten, Pythagoras etc. sparen kann:
r_i = a/10 * √(50+10√5) r_u = a/10 * √(25+10√5)
Da r(M') der Inkreisradius des kleinen Fünfecks ist, r(S) der Umkreisradius des kleinen Fünfecks und r(A) der des großen ist, kann man die Entfernungen zunächst leicht als Vielfache der Kantenlänge des kleinen Fünfecks (d(S,S'') hier a) schreiben:
r(M') = a/10 * √(25+10√5) r(S) = a/10 * √(50+10√5) r(A)) = (Φ+1) * a/10 * √(50+10√5)
Die Länge a wird nicht benötigt, und ich habe r(M') auf 1 festgelegt. Dann löst man auf:
r(M') = 1
a = 10 / √(25+10√5)
r(S) = √(50+10√5) / √(25+10√5)
= -1 + √5
r(A)) = (Φ+1) * √(50+10√5) / √(25+10√5)
= 1 + √5
= 3.2360679774997896964091736687312762354406183596115257...
Hier ergeben sich überraschend sehr einfache Zahlenverhältnisse. Zumal da ich nicht wirklich sehe, wie man die Wurzeln so fein auflösen kann, aber der Computer schafft es irgendwie.
Dodekaeder und Ikosaeder
Offensichtlich kann man ein Dodekaeder aus 12 regulären Fünfecken bauen. Doch auch die Kanten des Ikosaeders bestehen aus den selben (also gleich ausgerichteten) 12 Fünfecken. Dies wird in der Videoanimation klar:
Dodecaicosahedron (seq3)
Übrigens sieht man in der Animation für 1 Frame einen Ikosidodekaeder, der ebenfalls gebaut werden könnte.
Einige der Diagonalen und Kanten der Fünfecke kann man zu 3 („goldenen“) Rechtecken zusammenfügen, an deren Ecken alle Kanten zusammenlaufen. Diesen Sachverhalt kann man nutzen, um das Ikosaeder zu zeichnen, wie hier im Video beschrieben:
Ikosaeder zeichnen in 3 Schritten
Oder man scheidet die 3 Rechtecke aus Papier oder Pappe und „vernäht“ sie dann mit den übrigen Kanten. Dann entsteht eine Figur, wie oben im Foto. Dabei bin ich mir noch nicht sicher, ob es eigentlich trivial ist, die Kanten so mit einem durchgehenden Faden zu nähen, ohne dass man keine Kante doppelt, eine Ecke dreimal beschickt und dann wieder dort heraus kommt, wo man angefangen hat. Eine Art dreidimensionales Nikolaushaus. Ich habe es auf Anhieb geschafft, aber instinktiv ein bisschen Taktik verwendet und stets etwas voraugedacht... (Das ist sicher interessant zu modellieren, wenn man mal Zeit hat)
Rechnen mit KDE4 usw.
Klassische Taschenrechner
Was macht man mit einem Computer? Rechnen? Meistens eMails lesen und schreiben, im Internet surfen, Artikel, Blogeinträge, Briefe und Aufsätze verfassen, Daten einpflegen, zocken... und hin und wieder sogar Programmieren.
Aber hier soll es wirklich einmal um das Rechnen gehen, also das womit man einen Großteil der Grundschulzeit verbracht hat, und die Anwendungen, die man dazu unter Linux/KDE4 verwenden kann.
bc
Natürlich kann man den Linux-Konsolen-Rechner bc verwenden:
Er kann mit beliebiger Genauigkeit rechen, unterstützt Variablen und zeigt den Rechenverlauf an. Daher kann man ihn auch aus Shell-Scripten verwenden, was ihn ziemlich universal einsetzbar und automatisierbar macht.
[Update 2009-12-13] Zum Beispiel lässt sich so das kartesische Produkt der Zeilen zweier Dateien A und B durch-multiplizieren:
while read lA;do while read lB;do echo $lA*$lB;done <B;done <A|bc >result
ALT+F2=
Der Programmstarter kann auch Rechnen! Sobald im Einfabefenster ein = steht wird der Rest als Term interpretiert und das Ergebnis angezeigt. Das ist sehr praktisch, wenn man schnell ein paar Kosten aufaddieren will oder ähnliches. Man kann auch gut Experimentieren, da das Ergebnis schon beim Tippen angezeigt wird.
Für kompliziertere Rechnungen wird das aber schnell unübersichtlich. Außerdem hat der Rechner leider einen Rundungsfehler, statt z.B. 5,5 zeigt er öfters 5,49999 an usw.
KCalc
Der Klassische Rechner auf KDE ist KCalc:
Es hat alle Funktionen, die man von einem solchen Rechner erwarten könnte: Funktionstasten für diverse wissenschaftliche und mathematische Funktionen, Umrechnung verschiedener Zahlensysteme, und ein geordnetes Verzeichnis von Konstanten aus fast allen Wissenschaftsbereichen. Man kann natürlich auch auch einige Tasten ausblenden.
KAlgebra
Etwas erweiterte Funktionen hat KAlgebra:
Neben der bc-ähnlichen Konsole mit Vorschlägen beim Tippen, sowie einem 2D und 3D Plotter (Siehe Fun with KAlgebra), beinhaltet er außerdem eine Funktionsliste mit graphischer Vorschau.
Wolfram Alpha
Jetzt verlassen wir das KDE-Gebiet in Richtung Internet. Auf der Webseite Wolfram Alpha lassen sich nahezu alle denkbaren Berechnungen durchführen, auch Integrieren und Rechen mit exotischen Daten (Eigenschaften Chemischer Elemente, Aktienkurse, Mathematische Modelle, Wetter usw.). Zu fast jeder Berechnung gibt es einen Graphen oder eine Illustration, zum Integrieren die Rechenschritte, zu Funktionen diverse Daten und einiges mehr. Siehe die sehr lange Liste von Beispielen und meine Lifestream-Einträge zum Schlagwort Wolfram.
Nebenbei bemerkt...
Natural Display (links)
Ich für meinen Teil rechne oft mit dem klassischen Taschenrechner, in meinem Fall der fx-85EF oder der fx-85MS, von denen ich einen fast immer griffbereit habe. Obwohl sie nicht die kompliziertesten Modelle sind haben sie neben dem grundlegenden Funktionsumfang auch noch schöne Stochastik-Funktionen und Rechnen mit Prozenten und Grad, der EF hat ein Natural Display (also „schöne“ Anzeige von Brücken, Wurzeln usw. ) und Wertetabellen.
Außerdem habe ich einen Rechenschieber, mit dem sich schnell und Stromlos zumindest die Berechnungen -, +, *, /, sin, ^2, ^3, cos, arc, tan, lg berechnen lassen.
Für Windows hier eine Empfehlung für SpeedCrunch.
Einer der besten Rechner ist sicherlich der Graphing Calculator von Pacific Tech. Er zeigt nicht nur alle Rechnungen so an, wie im Mathebuch, sondern rechnet mit Vektoren und Komplexen zahlen und plottet sogar Vierdimensionales. Gibts allerdings nur für Mac und Windows und kostet seinen Preis.
Fun with KAlgebra
One of the apps that was updated for KDE4 suite was the graphing calculator KAlgebra. It does not only have the nice live preview for all kinds of functions but also a neat 3D view. Of course this is where you can poke around best:
You can really produce impressive stuff and uncommon graphs, because you can use functions like ceiling() and abs():
3D-Perspektive mit einer kurzen Formel
3D-Effekt mit Javascript
Für die Gestaltung von 3D-Effekten, sind zwar duzende Hardware-beschleunigte Toolkits parat, doch im Fall von HTML-Canvas bzw. auf Webseiten generell sieht das Angebot nicht so reich aus. Das hat mich dazu bewegt, selbst einen kleinen Blick in die Mathematik hinter 3D-Projektionen/3D-Perspektive zu werfen. Meine Erkenntnisse konnte ich in einer kurzen Formel zusammenfassen.
Wer sich nicht für die Mathematik interessiert, kann natürlich flash oder eine der vielen Canvas-3D-Librarys verwenden.
Das Prinzip hinter der 3D-Projektion ist meist das einer Lochkamera. Lichtstrahlen fallen vom abzubildenden Punkt im Raum durch ein Loch und auf einen Schirm. Diese Art der Projektion war eine der ersten bekannten und mit ihrer alten Bezeichnung „camera obscura“ (lat. für dunkle Kammer, die in der der Schirm angebracht war) namensgebend für die heute auf Linsenoptik basierenden Kameras.
Die Lochkamera ist leider nicht so lichtstark wie die Linsenoptik und ihre Schärfe ändert sich nicht mit der Entfernung, sondern mit der Größe des Lochs.
Im Gegensatz zur Linsenoptik ist die Lochkamera aber durch den einfachen Strahlensatz zu berechnen. Mit dem Strahlensatz kann man ganz einfach die Koordinaten eines Punktes im Raum umrechnen in Koordinaten auf dem Schirm. Dazu genügt folgende Funktion:
F:ℝ³→ℝ², F(x,y,z)= P( x*d / z | y*d / z ) ; d: distance to screen
Dass diese Funktion klappt, zeigt dieses Beispiel. Hier eine Graphische Erläuterung:
Strahlensatz für Perspektive. Schwarz: Abzubildender Punkt/Lichtstrahl, Blau: Kamera, Grün: Kameraparameter Bildweite, Rot: Koordinate auf dem Schirm, Lila: Ursprungskoordinaten
Wegen dem Strahlensatz gilt x' / x = d / z, aufgelöst x' = d*x / z, analog für die y-Koordinate.
Etwas logischer wäre vielleicht der Schirm hinter dem Loch, vor allem da Objekte näher an die Kamera heran kommen können, doch so kann man sich den Schirm wie den Computerbildschirm vorstellen, durch den man in die Raumillusion hineinschaut.
Diese Formel erledigt die Abbildung in der Kamera. Jedoch muss der Punkt bereits in Koordinaten relativ zur Kamera gegeben sein. Da man normalerweise Punkte zunächst durch ein Weltkoordinatensystem definiert, muss man sie erst transformieren.
Bei meinem einfachen Beispiel beschränkt sich die Transformation zunächst auf eine Verschiebung entlang der z-Achse und später habe ich noch eine Rotation um die y-Achse hinzugefügt. Diese Koordinatenumrechnungen lassen sich in Transformationsmatrizen beschreiben.
Dann fehlt eigentlich nur noch die Darstellung. Im Beispiel wird der Text durch einfache CSS-Manipulationen an die richtige Position gebracht, und die Kreise werden mit dem canvas-Element gerendert.
Mit einem solchen Modell lassen sich schon einfache Drahtgitter problemlos darstellen (Demo), da eine Kante zwischen zwei Punkten im Raum auch eine Strecke zwischen zwei Punkten auf dem Schirm darstellt, und uns somit die Berechnung dieser Bildpunkte erspart. Für eine ausgefeiltere Darstellung kann man Dreiecke oder Polygone verwenden (Demo), für die ungefähr das selbe gilt, nur dass z.B. ihr Winkel zu einer Lichtquelle für die Kolorierung verwendet werden kann
Für nahezu realistische Lichteffekte bedarf es allerdings eines anderen Modells, genannt Raytracing, bei dem man den Weg rückwärts geht und bei der Kamera anfängt. Das wurde übrigens auch schon in Javascript umgesetzt, ist aber für Echtzeit-Anwendungen eher ungeeignet (vielleicht kommen bald die ersten Computerspiele mit der - in Realtime - noch neuen Technik).
MacMahonMosaik Online Game
Mac Mohan Mosaik
Da ich beim Känguru-Wettbewerb 2009 mitgemacht habe, habe ich auch das MacMahonMosaik in die Hände bekommen. Es ist ein kleines Rätsel ähnlich wie Sudoku. Weil es interessant zu Modellieren ist, habe ich das MacMahonMosaik als Online-Spiel erstellt. Hier ein paar Details zu Implementierung:
Modell
Jedes Quadrat im Spiel hat 4 Kanten, die in 3 verschiedenen Farben markiert sein können. Daher lässt sich jede Anordnung als 4-Tupel einer 3-Menge auffassen. Diese 81 Tupel wiederum können den natürlichen Zahlen von 0-80 zugeordnet werden. Somit habe ich als Objekte zunächst die 24 Quadrate (die anderen fallen weg, da sie durch Drehung erreicht werden können), die jeweils eine Zahl speichern. Sie müssen sich nun z.B. drehen können. Dazu wird die Zahl in das Tupel umgerechnet und die Einträge des Tupels um eine Stelle verschoben, wobei der letzte Eintrag der erste wird. Um zu Überprüfen, ob zwei Quadrate aneinander passen, dreht man eines der beiden zweimal und schaut dann einfach ob in der gewünschten Richtung die selben Farben stehen. Dadurch sieht die Prüffunktion im Javascript sehr kurz aus:
p.checkMatch=function(other,pos){
var mycodes=this.getColorCodes(); // Tupel aus Zahl
var o=other.clone(); // Neues Quadrat mit selber Zahl
var othercodes=o.rotate().rotate().getColorCodes(); // anderes Q. 2x drehen
return (mycodes.charAt(pos)==othercodes.charAt(pos)); //prüfen
}
Zusätzlich haben die Quadrate noch ein paar Darstellungsrelevante optionale Eigenschaften und Methoden. Ist ihnen ein <Canvas>-Element im HTML-Baum delegiert, können sie ihm die passenden Event-Handler für das interaktive Drehen und Bewegen zuweisen und eine graphische Repräsentation ihrer selbst zeichnen. Und sie speichern einige Daten für drag & drop.
Doch beim Ziehen und Ablegen kommt das zweite Objekt ins Spiel: Das Feld in dem die Quadrate abgelegt werden können. Wann immer man ein Quadrat bewegt, frag dieses Quadrat beim Gitter nach, ob es sich einrasten kann. Das Gitter gäbe dann die Pixel-Koordinaten des Einrastpunkts auf dem Bildschirm und die Koordinaten innerhalb des Gitters zurück. Wird das Quadrat dann fallen gelassen, registriert es sich im Gitter.
Das Gitter hat dazu ein zweidimensionales Feld hinterlegt, in dem es Pointer zu den abgelegten Quadraten speichern kann. Wenn jetzt ein Quadrat im Raster abgelegt wird und sich registriert hat, weist es das Raster an, sich zu revalidieren - Das Gitter ruft für jedes Quadrat und je seine vier Nachbarn die Prüffunktion auf. (Da das „Passen“ symmetrisch ist, ließe sich die Komplexität des Algorithmus vielleicht noch optimieren, doch das hätte wieder mehr Code zur Folge und bei 24 Einheiten...) Da das Gitter nur Zeiger zu den Quadraten speichert, ist bei einer Drehung eines Quadrats keine weitere Registrierung nötig. Falls also ein Quadrat angeklickt wird, rotiert es sich, aktualisiert die eigene Darstellung und gibt den Revalidierungsbefehl an das Raster.
Für die Darstellung hat das Gitter auch eine recht einfache Methode, die den Feldhintergrund rötlich färbt, sollte ein Fehler vorliegen und eine Gratulation meldet, sollten alle Quadrate an einem passenden Ort sein, also das Spiel gewonnen.
Ablaufdiagramm
Hier mal ein kleiner Flowchart. Man beginne das Lesen bei den Event-Handlern: (erstellt mit U+2500-U+257F: Box Drawing)
Quadrat
├ Zahl ◁──────┐ {Umrechnung}
├ (Tupel) ◁───┘
├ Drehen() ◀────────┐◁──┐─┐▷─────┐
├ Prüfen(Quadrat) ──◆───┊─┊──────┊──┐
├ [Darstellung] │ │ │ │ │
│ ├ Visualisieren◁─┊───┊─┘ │ │
│ └ [Handler] │ │ │ └──┐
│ ├ Klick ──────┊───┘ │ │
│ ├ Packen ────┊────────────┊──┐ │
│ ├ Bewegen ◀───┊───┐ │ │ │
│ └ Ablegen ────┊─────────┬▷─┤ │ │
└ Kopieren() ►──────┘ │ │ │ │ ▼ bool
[XY,XY] │ │ │ │
Gitter │ │ │ │ │
├ Feld[X,Y] │ │ │ │ │
├ KoordinatenBei(XY) ───┘ │ │ │ │
├ Registrieren(Quadrat) ◀─XY─┘ │ │ │
│ └ Un-Registrieren() ◀─────XY───┊──┘ │
├ Alle Prüfen() ►────────┐─▷────│─────┘
└ Darstellung erneuern() ─┘ ◁───┘
└ Färben(), Gratulation()
Wie das Gitter überprüft, ob auch am Rand rote Kanten liegen? Statt weiteren Code für den Rand zu basteln, wird das Gitter mit voll-roten Quadraten ohne graphische Repräsentation außerhalb das Gitters vorbelegt. Das hat den kleinen Nebeneffekt, das auch out-of-bounds-Fehler im Prüfalgorithmus vermieden werden, da ja z.B. bei negativen Gitterkoordinaten -1 stets ein solches „virtuelles“ Quadrat liegt.
Wie man also sieht, kann man an diesem Spiel schon einige lustige Code-Spar-Methoden benutzen. Eigentlich sparen sie nicht nur Code, sondern auch Nachdenken, wenn man sie „sieht“.
Javascript Umsetzung
JS-Closures habe ich in letzter Zeit immer mehr zu schätzen gelernt. (Man muss in PHP übrigens auch nicht mehr lange darauf verzichten) Sie lassen den Programmierer Funktionen, also mehr oder weniger Code, wie ein String oder eine Zahl an andere Funktionen übergeben oder in Variablen spichern, sodass mit anonymen Funktionsobjekten als Closures in JS eigene Kontrollstrukturen definiert werden können, wie diese zweifache for-Schleife, um über Koordinaten bzw. Zweidimensionales zu loopen:
function loopXY(w,h,cb) {
for (var x=0;x<w;x++) {
for (var y=0;y<h;y++) {
cb(x,y);
}
}
}
var m=[];
loopXY(5,7,function(x,y){
m.push("("+x+","+y+")");
});
alert(m);
Wie man sieht stehen in Javascript in den Closures alle äußeren Variablen zur Verfügung. Das wiederholte verwenden des Namens einer äußeren Variable führt trozdem noch dazu, dass in der Closure diese lokal verwendet wird und außen der alte Wert erhalten bleibt. Ein bischen gewöhnungsbedürftig ist die Verwendung von this in JS. Im oben gezeigten Code würde z.B. in der Schleife this auf window zeigen. Das lässt sich mit der Function.call oder der Function.apply-Funktion kompensieren, wie in diesen Code-Schnippseln für Event-Handler.
Für die Erstellung von Objekten (außer reinen Datenspeichern, die mit {} einfach erstellt werden können) verwende ich folgende Grundstruktur:
function Square(id) { // constructor
this.id=id; // Eigenschaften initialisieren
}
(function(){
var p=Square.prototype; // shortcut zum Prototype
p.setId=function(id) { // einfacher Setter
this.id=id;
return this; // macht Setter chainable
};
var privat; // kann nur von den Objektmethoden gesehen werden
function privatauch() {} // dito
})();
var s=new Square (3);
Allerdings bin ich mir nicht sicher, ob das wirklich besser ist, als alles in Konstruktoren zu packen.
Der Code des Onlinegames ist vielleicht nicht ganz so interessant zu lesen, wie es war ihn zu erstellen, aber ich denke, hinein schauen lohnt sich. Ich bin natürlich immer interessiert an weiteren Javascript-Techniken und Tipps zur Code-Gestaltung.