request_url_withoutHTTP=,canonical_url_withHTTP=,canonical_url_withoutHTTP=,request_url_withoutHTTP_realspaces=. Mathematik (Seite 1 von 3) « Tags « Blog « Bernhard Häussner
Bernhard Häussner
Tags: Artikel mit dem Tag «Mathematik» durchstöbern

Ein schönes Online-Spiel names adinfinitvm

29.06.2016, 12:44

Ich habe ein Online-Spiel programmiert: adinfinitvm. Es ist ein minimalistisches Puzzle-Spiel, mit unendlich vielen Levels. Es basiert auf dem Spiel ∞ loop, das als App für iOS und Android umgesetzt ist, welches wiederum auf dem Flash-Spiel „Loops of Zen“ von Dr. Arend Hintze basiert.

Ich bin anscheinend reichlich uninformiert, was die neuesten Spiele-Apps angeht: Das Loopgame wirbt mit „das beliebteste Game des Jahres 2016“ (obwohl das Jahr gerade mal zur Hälfte vorbei ist) und ich habe davon nur erfahren, da ich ein selbst-designtes T-Shirt trug mit meinem Ravello Switch Knot, welches eine Freundin an das Spiel erinnert hat.

Das T-Shirt vom Ravello Switch Knot mit dem alles begonnen hat

Das T-Shirt vom Ravello Switch Knot mit dem alles begonnen hat

Es ist schwierig aus der großen Menge der kleinen Smartphone-Spielchen herauszustechen. Bei den meisten Spielen muss man seine Geschicklichkeit unter Beweis stellen, und z.B. im Wesentlichen besonders schnell und zum richtigen Zeitpunkt klicken (Hardest Game Ever, Stack). Andere nutzen den Touchscreen (Follow the Line) oder die Neigungssensoren (Temple Run, Teeter) für neuartige Herausforderungen. Solche Spiele werden mir jedoch schnell langweilig, ab einem gewissen Zeitpunkt verbessert man sich kaum noch und alles wird sehr eintönig.

Schon etwas nachhaltig fordernder sind einige Puzzle-Spiele (Two Dots, Candy Crush Saga, Lazors). Diese werden jedoch mit der Zeit so schwer, dass man keine Level mehr schafft oder sich via In-App-Käufen Leben kaufen muss, um weiter zu kommen. Da hört der Spielspaß dann auch sehr schnell auf.

Hier ist das Loopgame eine gelungene Alternative: Die Level werden langsam schwieriger, sind aber nie unschaffbar. Die Aufmachung ist sehr minimalistisch, sodass das Spielen sehr entspannend ist. Es eignet sich perfekt um die Motorik ein bisschen auf Trab zu halten, während man Podcasts, Hörbücher oder Vlogs konsumiert.

Meine Aufmerksamkeit hat aber dies geweckt: Das Modell hinter dem Spiel ist dem des MacMahonMosaik Online Games ziemlich ähnlich, welches ich vor einiger Zeit programmiert habe. Während man beim MacMahonMosaik dreifarbige Quadrate verschieben und drehen kann, kann man im Loopgame Quadrate mit zwei „Farben“ (Pfad-Ende/freier Raum) drehen, aber nicht verschieben. Das MacMahonMosaik hat nur ein Level, welches ziemlich schwer ist. Trotzdem dachte ich, das Spiel ist schnell programmiert, wenn ich meinen alten Code vom MacMahonMosaik leicht abändere.

Als ich meinen sieben Jahre alten Code dann angesehen habe, viel mir auf, dass ich mich damals intensiv mit dem Thema OOP in Javascript beschäftigt habe. Inzwischen gibt es mit ES2015 Klassen in JavaScript. Aber ich fand mich schnell im großen Wirrwar von Javascript Transpilern, source maps, Babel und gulp, sodass ich schnell beschlossen habe, für ein so kleines Projekt lieber nicht den ganzen Konfigurationsaufwand zu betreiben. Als ich nach wachsender Codemenge dann mehrere Dateien zu einer zusammenzufügen musste (hallo cat), bin ich auf coffebar gestoßen, was ohne viel Konfiguration läuft. Und CoffeeScript hat auch Klassen, somit war die Entscheidung gefallen.

Eine weitere Besonderheit ist vielleicht der Verzicht auf jQuery und andere JS-Bibliotheken. Im Jahr 2009 war jQuery noch eine sehr nötige Bibliothek: Nach jeder neuen Version eines Browsers hat man gleich die Acid-Tests durchgeführt, die die Kompatibilität mit grundlegenden DOM-Funktionen testen. Damals war jQuery die Rettung von vielen kleinen Inkompatibilitäten und Bugs. Das war die Zeit, in der jeder Webentwickler durch das Aussprechen von „Internet Explorer 6“ einen enormen Bluthochdruck bekommen konnte. Hier war es für mich eine kleine Herausforderung all die Funktionalitäten des Mosaiks ohne jQuery zu realisieren.

Heute hat sich das Bild geändert: Die API von jQuery wird noch immer mit jeder Version eleganter, aber dank Fortschritt der Browser und Standards entstehen neue Trends weg von jQuery: Für einfache Effekte kann man heute direkt die nativen APIs ansprechen (man denke nur an document.querySelector) und für komplexe Webapplikationen gibt es umfassendere Frameworks wie Angular 2 und React, die es einfach machen, komplexe UIs aus Komponenten mit eigenem State zusammenzustellen. Das Gemüt der Webentwickler erhitzt sich heute eher an „Mobile Safari“.

Auch meine Implementierung des Loopgames, ich nenne sie „adinfinitvm“, profitierte von „neuen“ Webtechnologien: Die Graphiken für Pfade und Dreiecke lassen sich mit SVG erstellen und die Animationen werden mit CSS' transition gemacht. So begnügt sich das Spiel mit einer index.html, den Webfonts und rund einem duzend CoffeeScript-Dateien. Der interessiere Leser kann sich den Code auf GitHub ansehen.

Kommentare: keine

Pentagramme, 5-Ecke, √5 und Φ

21.01.2011, 18:44

In letzter Zeit habe ich mich 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)

Update 2016-04-10

Inzwischen habe ich einen Brute-Force-Algorithmus entwickelt, der das „Vernähen“ lösen kann, jedoch ist dies natürlich wenig zufriedenstellend. Zusätzlich habe ich eine Processing-Sketch gebastelt, die solche Nähwege darsetellen kann. Aber ich sehe es noch immer als offenes Problem, das ordentlich modelliert zu bekommen.

Kommentare: keine

Rechnen mit KDE4 usw.

06.12.2009, 17:30
Klassische Taschenrechner

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)

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.

Kommentare: 1 Einträge

Fun with KAlgebra

28.10.2009, 19:04

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():

Kommentare: keine

3D-Perspektive mit einer kurzen Formel

04.09.2009, 19:07
3D-Effekt mit Javascript

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

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).

Kommentare: 3 Einträge
[ Seite 1 2 3 ] Nächste Seite »
 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: http://1.co.de/