Freitag, 3. Dezember 2010

Physik-Java-Applet: Lissajous-Figuren

Lissajous-Figuren entstehen durch Überlagerung harmonischer Schwingungen. Schließt man beispielsweise an ein Oszilloskop in x- und y-Richtung eine Wechselspannung an, ergeben sich bei bestimmten Frequenzverhältnissen solche Figuren.

Beispiel einer Lissajous-Figur für das Frequenzverhältnis 2/3 (exakt: 2,0001 / 3), Farbenkreis aktiviert.
Mithilfe dieser Lissajous-Figuren lassen sich auf einem Oszilloskop Frequenzunterschiede zweier Wechselspannungen bestimmen.

Mathematisch lassen sich sie sich durch folgende Funktion beschreiben:

(Quelle: Wikipedia)



Nur bei rationalen Frequenzverhältnissen, d.h. der Bruch x-Frequenz / y-Frequenz lässt sich mit ganzen Zahlen ausdrücken (z.B. 1 / 1,5 = 2 / 3, ergibt das Bild oben), entstehen geschlossene Figuren. Bei einer ganz geringen Abweichung aus einem solchen rationalen Verhältnisses, z.B. 2,0001 / 3 (s.o.), bewegen sich die Figuren und es entsteht der Eindruck einer dreidimensionalen Drehung um die Achse mit der höheren Frequenz (hier um die y-Achse).

Das Java-Applet, das dieses Phänomen simulieren kann, lässt sich hier online verwenden und steht als Zip-Archiv zum Download bereit.

Es bietet eine Hand voll Einstellmöglichkeiten:

  • x- und y-Frequnz, sowie die Abweichung aus dem rationalen Verhältnis (Frequenzunterschied).
  • Die Anzahl der Zeitschritte (entspricht der Anzahl der Eckpunkte), in denen ein Momentanbild einer Figur gezeichnet werden soll.
  • Eine Pause (Mikro-Timeout) zwischen diesen Zeitschritten kann in ms angegeben werden, um die Entstehung eines Momentanbilds zu verdeutlichen.
  • Eine Pause (Makro-Timeout) zwischen zwei kompletten Momentanbildern kann eingestellt werden, um die Bewegung zu verlangsamen.
  • Die Farbenkreis-Option kann aktiviert werden. Dadurch wird jeder Zeitschritt in einer anderen Farbe von rot (entspricht der Phase 0, Anfang der Periode) bis grün (entspricht der Phase 2π, der vollen Periode).
  • Wenn die Füllen-Option aktiviert ist wird der Bildschirm nicht geleert, bevor einer ein neues Momentanbild gezeichnet wird (würde in der Realität bedeuten, dass ein Punkt des Oszilloskops nach Elektronenbeschuss unendlich lange nachleuchtet). Durch diese Option kann gezeigt werden, dass bei nicht rationalen Frequenzverhältnissen nach einer gewisse Zeit jeder Punkt des Schirms getroffen wird.
  • Letztendlich kann noch die Strichdicke festgelegt werden.
  • Die Animation kann zu jeder Zeit gestoppt und wieder fortgesetzt werden. Auch ein Reset der Zeit ist möglich.
Anmerkung: Auch nicht-Physiker können mit diesem Applet Spaß haben, wenn man beispielsweise einen Frequenzunterschied einstellt, dazu die Farbenkreis- und Füllen-Option aktiviert und noch die Strichdicke etwas erhöht. Es ergeben sich ganz tolle Farbenspiele :-).

Viel Spaß beim rumspielen und wie immer gilt bei Fragen zum Programm oder Programmierung des selbigen, einfach eine Email oder ein Kommentar schreiben.

Physik-Java-Applet: Dreifachspalt

Aus einer regen Diskussion damals im Physik-Unterricht bezüglich der Musteraufgabe I. c) ABI 2004 Baden-Württemberg ist die Aufgabe für mich entstanden, das Zeigerdiagramm eines Dreifachspalts mithilfe eines Programms zu verdeutlichen.

Beispiel eines Dreifachspaltexperiments

Das Java-Applet besteht im Wesentlichen aus drei Komponenten:

  1. Der Versuchsaufbau (oben), bei dem der Erreger, die Spalte und der Auftreffpunkt (frei) verschoben werden kann.
  2. Das Zeigerdiagramm (unten, links), das die durch Interferenz entstehenden Phasendifferenzen der von den verschiedenen Spalten ausgehenden Wellen im Auftreffpunkt darstellt. Dabei kann die Reihenfolge der Zeiger frei bestimmt und Kreise um die Zeiger gezeichnet werden, die alle möglichen Winkel des entsprechenden Zeigers andeuten.
  3. Ein Schaubild (unten, rechts), das die resultierende Amplitude im Abhängigkeit des variablen Phasenwinkels (der jeweils andere wird dann als konstant betrachtet) darstellt.

Verändert man den Versuchsaufbau, so wirken sich diese Veränderungen auf die beiden anderen Komponenten aus. Andersrum natürlich nicht, da eine Veränderung des Phasenwinkels viele Ursachen haben kann und sich willkürlich eine herauszusuchen halte ich für....na ja willkürlich :-)

Das Applet kann hier online verwendet werden und steht als Zip-Archiv zum Download bereit.


Wer Interesse an der Programmierung des Applets hat, möge mir doch bitte eine Email schreiben oder einen Kommentar verfassen.

PS: Danke an dieser Stelle an meinen tollen damaligen Physik Kurs inkl. meinem Lehrer J.H., die mich motivierten dieses Programm zu schreiben.

Freitag, 4. Juni 2010

Coole iPhone-kompatible "Loading Indicator" im Apple-Stil mit SVG


Seit hunderten von Jahren wurden "loading indicator", "activity indicator", "progress indicator", "spinning wait indicator" oder auch "Throbber" mittels animierter GIFs realisiert, die man sich auf Seiten wie ajaxload.info in allen Farben und Formen generieren lassen kann. Der Vorteil ist, dass die Animation von so ziemlich allen Browsern korrekt dargestellt wird. Die Nachteile bemerkt man erst, sobald man als Webentwickler die Grafik skalieren möchte oder noch viel schlimmer die Grafik auf verschiedenen Hintergründen anzeigen will. Um das Problem zu demonstrieren, habe ich diese Testseite erstellt: http://dev.ubbel.de/html/loading/gif.html
Fangen wir mit der ersten Zeile an: hier sieht alles in Ordnung aus. In der zweiten Zeile wird die gleiche Grafik auf rotem Hintergrund verwendet und man erkennt einen unschönen Rand. Das liegt daran, dass GIF zwar Transparenz unterstützt, aber keine Alpha-Transparenz (Teiltransparenz). In der dritten Zeile wurde eine andere Grafik mit angepasstem Hintergrund verwendet und es ist wieder alles in Ordnung. Wie man sieht, kann man die unschönen Ränder vermeiden, indem man für jeden Hintergrund eine Grafik erstellt - nicht gerade schön, aber es funktioniert.
Was aber, wenn einem der Hintergrund unbekannt ist? Dazu folgende Demonstration: http://dev.ubbel.de/html/loading/gif_alpha.html
Hier wurde mit der CSS3-Funktion "rgba()" ein Teiltransparenter Overlay erzeugt, der Hintergrund von loading_alpha.gif ist auf die Farbe eingestellt, die entsteht, wenn schwarz mit 70 prozentiger Deckkraft auf weißem Hintergrund entsteht. Durch die ausgesprochen komplizierte und höchtwissenschaftliche Berechnung dieser Farbe (#4C4C4C) ist es mir gelungen, dass es zumindest auf dem weißen Hintergrund gut aussieht. Ganz anders sieht es in der unteren Hälfte, dort wo der rote Hintergrund durchscheint, aus - hier sind wieder diese gemeinen Ränder entstanden.
Zusammengefasst: GIFs sind doof und unflexibel!

Also suchte ich nach einer anderen Möglichkeit und bin auf APNG - animierte PNGs - gestoßen, die aber derzeit nur von Firefox und Opera unterstützt werden. Zonk, APNGs sind raus, da mir die Unterstützung von Safari und speziell MobileSafari auf dem iPhone sehr wichtig ist. So suchte ich also weiter...

Meine erste Idee war, eine nicht animierte Grafik, die Alphatransparenz unterstützt, zu nehmen und diese mit der CSS3-Eigenschaft "transform" zu drehen. Da Safari (auch auf dem iPhone) SVGs darstellen können, bot sich dieses Format an (PNGs wären genauso möglich gewesen). Das Ergebnis könnt ihr hier bestaunen: http://dev.ubbel.de/html/loading/css_transform.html
Die Animation ist mit purem CSS3 realisiert und läuft auf dem iPhone dank Hardwarebeschleunigung deutlich flüssiger als auf dem PC.
Der HTML-Teil ist ziemlich einfach und benötigt keine weitere Erklärung:
<img id="loading" src="loading.svg" alt="Laden..."/>
Spannender wird's im CSS-Teil: hier wird zunächst die Animation definiert...
@-webkit-keyframes rotate {
  from {
    -webkit-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(360deg);
  }
}

...und anschließend dem img-Element "#loading" mit einer Umlaufdauer von 5 Sekunden zugewiesen:
#loading {
  height: 200px;
  width: 200px;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

Da ich mich für ein SVG entschieden habe, kann man die Grafik beliebig hoch- oder runterskalieren.
Eine coole Erweiterung dieser Methode ist die Grafik nicht direkt mit einem img-Element anzuzeigen sondern als Maske für einen Container zu verwenden. Dadurch kann man die Farbe des loading indicators mittels der Hintergrundfarbe des Containers steuern.
Das ganze sieht in etwa so aus: http://dev.ubbel.de/html/loading/css_transform_mask.html
Der unheimlich komplexe HTML-Teil vereinfacht sich zu:
<div id="loading"></div>
Der CSS-Teil wird um die CSS3-Eigenschaft "-webkit-mask-image" und die gewünschte Hintergrundfarbe erweitert:
#loading {
  height: 200px;
  width: 200px;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-mask-box-image: url(loading.svg);
  background-color: red;
}
So schön, unser loading indicator dreht sich. Aber halt, er soll sich ja garnicht drehen! Stattdessen sollte er eigentlich in 30°-Schritten "springen". Blöderweise gibt es noch keine Möglichkeit mit reinem CSS diese Sprünge zu animieren. Denkbar wären in Zukunft "discrete" oder "paced" als "timing-function". Für andere Typen von "Throbber"n, kann diese Methode aber durchaus eingesetzt werden: http://dev.ubbel.de/html/loading/star_css_transform_mask.html.
Ein Nachteil bleibt aber: Die Grafik braucht immer einen Container bzw. ein img-Element und kann nicht wie die doofen GIFs als "background-image" zugewiesen werden. Das erschwert die praktischen Einsatzmöglichkeiten, da man an jeder Stelle, an der ein indicator angezeigt werden soll, ein Container platziert werden muss.

Suchen wir also wieder weiter... und da wir schon bei SVG sind bleiben wir doch gleich hier. Im Gegensatz zu CSS bietet SVG nämlich die Möglichkeit einer "diskreten", d.h. "springenden" Animation.
Das Ergebnis ist hier zu bestaunen: http://dev.ubbel.de/html/loading/svg.html
Perfekt, die Animation stimmt jetzt und läuft sehr flüssig.
Der HTML-Teil ist wieder äußerst komplex:
<img id="loading" src="loading_animated.svg" alt="Laden..."/>
Auch der CSS-Teil ist deutlich komplizierter geworden:
#loading {
  height: 200px;
  width: 200px;
}

Eine kleine Erklärung vielleicht: "height" gibt die Höhe der Grafik an und "width" die Breite :-P

Na ja, viel interessanter ist der SVG-Teil:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="320" height="320">
  <g>
    <line id="line" x1="15" y1="160" x2="65" y2="160" stroke="#111" stroke-width="30" style="stroke-linecap:round"/>
    <use xlink:href="#line" transform="rotate(30,160,160)" style="opacity:.0833"/>
    <use xlink:href="#line" transform="rotate(60,160,160)" style="opacity:.166"/>
    <use xlink:href="#line" transform="rotate(90,160,160)" style="opacity:.25"/>
    <use xlink:href="#line" transform="rotate(120,160,160)" style="opacity:.3333"/>
    <use xlink:href="#line" transform="rotate(150,160,160)" style="opacity:.4166"/>
    <use xlink:href="#line" transform="rotate(180,160,160)" style="opacity:.5"/>
    <use xlink:href="#line" transform="rotate(210,160,160)" style="opacity:.5833"/>
    <use xlink:href="#line" transform="rotate(240,160,160)" style="opacity:.6666"/>
    <use xlink:href="#line" transform="rotate(270,160,160)" style="opacity:.75"/>
    <use xlink:href="#line" transform="rotate(300,160,160)" style="opacity:.8333"/>
    <use xlink:href="#line" transform="rotate(330,160,160)" style="opacity:.9166"/>
    
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" begin="0s" dur="1s" repeatCount="indefinite" calcMode="discrete"
    keyTimes="0;.0833;.166;.25;.3333;.4166;.5;.5833;.6666;.75;.8333;.9166;1"
      values="0,160,160;30,160,160;60,160,160;90,160,160;120,160,160;150,160,160;180,160,160;210,160,160;240,160,160;270,160,160;300,160,160;330,160,160;360,160,160"/>
  </g>
</svg>
Zunächst wird eine kleine Linie "#line" gezeichnet, diese dann 11 mal geklont und jeweils um 30° gedreht (die erste Zahl von "rotate()" steht für den Drehwinkel in Grad, die beiden anderen legen den Drehmittelpunkt fest, hier in der Mitte der Grafik) und die Deckkraft abgestuft.
"animateTransform" ist für die Animation verantwortlich: in "keyTimes" sind in 1/12 Schritten die Zeiten für die in "values" angegebenen Werte für "rotate()" definiert. Durch den angegebenen "calcMode" ("discrete") wird zwischen den Werten nicht interpoliert, sondern "gesprungen".
OK, die Animation läuft wie sie soll im Safari, blöderweise aber nicht auf dem iPhone. Versuche die Grafik mit dem object- oder embed-Element anstatt des img-Elements einzubinden scheiterten ebenfall, da zwar die Animation lief, leider aber diese zwei Elemente einen unveränderlichen weißen Hintergrund haben. Dann hätte man gleich so doofe GIFs nehmen können.
ABER, die Rettung: Bindet man die Grafik als "background-image" ein, läuft die Animation perfektísimo: http://dev.ubbel.de/html/loading/svg_background.html
HTML-Teil ohne Kommentar:
<div id="loading"></div>
CSS-Teil:
#loading {
  height: 200px;
  width: 200px;
  background-image: url(loading_animated.svg);
  -webkit-background-size: 200px;
}

Pretty simple, right?
Geil, nutzen wir die Euphorie und bauen noch einen dezenten Schatten ein, der auf nicht weißem Hintergrund ganz nett aussieht: http://dev.ubbel.de/html/loading/svg_background_shadow.html
"#line" wird dazu einfach durch diese Gruppe ersetzt:
<g id="line" stroke-width="30" style="stroke-linecap:round">
  <line x1="20" y1="165" x2="70" y2="165" stroke="white" style="opacity:.7"/>
  <line x1="15" y1="160" x2="65" y2="160" stroke="#111"/>
</g>
Es wird also unter die eigentliche Linie noch eine schwächere, leicht versetze Linie gezeichnet.


Abschließend noch ein Anwendungsbeispiel unseres wunderschönen loading indicators in einer iPhone-Webapp:



Der HTML-Teil sieht einfach wie immer aus:
<div id="loading">Laden...</div>
Der CSS-Teil ist etwas größer geworden, aber trotzdem noch selbsterklärend:
#loading {
  min-height: 80px;
  -webkit-border-radius: 8px;
  -webkit-box-shadow: rgba(0, 0, 0, .3) 1px 1px 3px;
  width: 90%;
  margin: 0 5%;
  position: absolute;
  top: 55px;
  background: url(img/loading_white.svg) 50% 16px no-repeat, rgba(0, 0, 0, .7);
  -webkit-background-size: 25px;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 1) 0 -1px 1px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  z-index: 10;
  padding: 40px 10px 20px;
  -webkit-box-sizing: border-box;
}


Also nochmal zusammengefasst: Wir haben herausgefunden, dass GIFs doof sind, APNGs (noch) keine Alternativen sind, CSS3 auch noch nicht ganz ausgereift ist und SVGs ziemlich cool sind. Außerdem haben wir einen super sexy loading indicator mit modernen "Open Web"-Standards erstellt und gesehen wie man ihn wunderschön einsetzen kann.

Noch eine kleine Anmerkung was die Dateigröße betrifft: die GIFs haben um die 4 KB, die finale SVG nur 2 KB. Dabei darf man nicht vergessen, dass die GIFs 32 x 32 Pixel groß sind und die SVGs auf jede beliebige Größe skaliert werden können.

Für weitere Fragen, Anmerkungen oder Ehrungen bitte die Kommentare benutzen :-)

Dienstag, 9. März 2010

Lass dein Handy Sudokus lösen!

Meine fünfte und letzte J2ME-Anwendung (Überblick über alle meine Handyprogramme hier) ist ein Sudokulöser für Handys, der vielleicht sogar dem einen oder anderen einmal nützlich sein könnte.
Die Benutzung gestaltet sich eigentlich ganz einfach: Über die Handy-Tastatur wird das Sudoku eingegeben, was zugegeben etwas umständlich ist, und per mehrmaligen Druck auf die Rautetaste (#) wird das Sudoku schrittweise gelöst (siehe Video).
Der Lösungsalgorithmus ist eigentlich auch recht simpel und orientiert sich an meiner Strategie Sudokus per Hand zu lösen:
  • Grundsätzlich kommen für jedes Feld die Zahlen von 1 bis 9 als "Kandidaten" in Frage.
  • Ich suche mir ein bestimmtes Feld aus und schaue welche Zahlen bereits in der gleichen Zeile, Spalte und "Box" (ihr wisst was gemeint ist, oder?) stehen und kann diese sofort als Kandidaten für dieses Feld ausschließen.
  • Bleibt nur ein solcher Kandidat übrig, ist das die richtige Zahl für dieses Feld.
  • So verfahre ich immer wieder mit jedem Feld bis das Sudoku gelöst ist.
Anmerkung: Natürlich verfahre ich nicht nur nach dem oben beschriebenen Verfahren, sondern nutze jede Menge "Abkürzungen", sonst würde man ja verrückt werden... :-)

Mathematisch könnte man das so beschreiben:
Ki,j sei die Kandidatenmenge des Feldes Fi,j in der Zeile i und Spalte j und ist zu Beginn Ki,j = {1...9}.
Z1...Z9 sind die Mengen der je in einer Zeile enthaltenen Zahlen.
S1...S9 sind die Mengen der je in einer Spalte enthaltenen Zahlen.
B1,1...B3,3 sind die Mengen der je in einer Box enthaltenen Zahlen.
Für die Kandidatenmenge des Feldes Fi,j gilt dann in jedem Iterationsschritt
Ki,j = Ki,j \ Zi  ∩  Ki,j \ Sj  ∩  Ki,j \ Bi,j oder kürzer Ki,j = Ki,j \ (Zi ∪  Sj ∪ Bi,j).
Sprich in jedem Iterationsschritt wird die Kandidatenmenge des Feldes um die Zahlen, die in der gleichen Zeile, Spalte und Box enthalten sind, reduziert.
In Java sieht das ganze so aus:

candidatesSet = new Set(new int[] {1, 2, 3, 4, 5, 6, 7, 8, 9});
candidatesSet.remove(colSet.merge(rowSet).merge(boxSet));

Wobei Set eine eigene Klasse ist und eine mathematische Menge repräsentiert. Die Methode Set.merge führt zwei Mengen zusammen und gibt die Vereinigungsmenge zurück.

Ich habe für die Darstellung des Sudokus das Lightweight UI Toolkit (LWUIT), da es im Standard-LCDUI kein Tabellen-Widget gibt.

Die App sollte auf so ziemlich allen Java-Handys laufen, wobei ich vermute, dass (obwohl kein Beschleunigungssensor verwendet wird) die Java-Plattform 8 vorausgesetzt wird. Getestet wie immer nur mit einem Sony Ericsson K850i, W980 und C902, mit neueren Geräten sollte es keine Probleme geben.
Hier könnt ihr euch die Anwendung herunterladen und über USB oder Bluetooth auf eurem Handy installieren. Viel Spaß damit!

Bei Interesse veröffentliche ich auch gerne Ausschnitte des Java-Quellcodes.

Dienstag, 2. März 2010

Mäxle: Trinkspiel für dein Handy

Maexle ist, wie der Name schon vermuten lässt, die Umsetzung meines liebsten Trinkspiels (neben Katongo, oder wenn's schnell gehen muss auch gerne Pajongo ;-)) Mäxle. Die Regeln und etliche Variationen können in diesem Wikipediaartikel nachgelesen werden, ebenso weitere Bezeichnungen für das Würfelspiel, wie z.B. Meiern (scheinbar der "offizielle" Name), Mäxchen, Meier, Lügenmax(-mäx), Schummelmax, Mexican, Mexico, Mäxchen Meier, Lügen, Riegen, Einundzwanzig und mein Favorit: Meterpeter :-)
Wie schon bei den letzten drei Teilen meiner Serie, handelt es sich hierbei wieder um eine J2ME-Anwendungen für geeignete Handys (siehe unten), die ich kostenlos zum Download anbiete.
Features:
  • Gewürfelt werden kann sowohl per Tastendruck, als auch viel natürlicher durch bloßes Schütteln des Handys (Beschleunigungssensor vorausgesetzt).
  • Bei jedem Wurf vibriert das Handy und es erklingt ein realistisches Würfelgeräusch. Erst wenn dieses verschwindet, kann der Nächste würfeln, sodass man nicht heimlich doppelt würfeln kann (zum Bescheißen aber gleich mehr ;-)).
  • Die Sterntaste (*) aktiviert den Cheat-Modus: Jetzt kann auf 1, 2, 3, 4, 5, 6 entsprechend ein 1er-, 2er-, 3-er, 4er-, 5-, 6-er Pasch und auf 0 ein Mäxle hingemogelt werden.
  • Die Rautetaste (#) deaktiviert den Cheat-Modus wieder, sodass deine Mitspieler nicht so schnell hinter dein Geheimnis kommen können.
  • Hält man die 0 Taste während des Schüttelns gedrückt, ändern sich die zwei Würfelaugen nicht, was bei strategischem Einsatz recht nützlich sein kann.
  • Die Würfel werden bei jedem Wurf gedreht.


Die technische Umsetzung basiert auf einer Vektorgrafik (SVG), die nach Registrierung des Schüttelns (1,5g ≈ 14,71500 m/s^2) die Würfelobbjekte ähnlich wie bei Gravitation dreht und über DOM-Operationen (SVG ist ein XML-Format) die durch Zufall bzw. (gewolltem ;-)) Zufall  bestimmten Würfelaugen ein- (visibility="visible") bzw. ausblendet (visibility="hidden"). Weitere Fragen können gerne in den Kommentaren gestellt werden.

Da auch dieses Spielchen wieder auf den Beschleunigungssensor des Handys zugreift, funktioniert es nur auf Geräten, die einen solchen besitzen und auf denen mindestens die Java-Plattform 8 läuft. Speziell das JSR 256 (Mobile Sensor API) muss unterstützt werden. Getestet wurde es mit einem der ersten Sony Ericsson Handys, das diese Bedingungen erfüllt, dem K850i. Außerdem getestet auf dem W980 und C902, mit neueren Geräten sollte es keine Probleme geben.
Wenn euer Handy diese Anforderungen erfüllt, könnt ihr euch die Anwendung hier herunterladen und über Bluetooth oder USB auf das Gerät laden. Viel Spaß damit!

Bei Interesse veröffentliche ich auch gerne Ausschnitte des Java-Quellcodes.

Eine kleine Anmerkung noch zum Schluss: Auf dem K850i muss der erste Wurf durch Tastendruck geschehen, da die Anwendung sonst einfriert. Danach kann dann auch durch Schütteln gewürfelt werden. Auf anderen Geräten ist mir dieser Bug noch nicht begegnet.

Mittwoch, 24. Februar 2010

OinkiDoinki - Fang das Ziel durch Kippen und Neigen!


Kommen wir im dritten Teil der Serie über meine J2ME-Anwendungen zu meinem absoluten Liebling: OinkiDoinki ist ein Handyspiel, bei dem es darum geht, durch Kippen und Neigen das kleine Quadrat mit der Kugel zu treffen. Ist das gelungen, so taucht es an einer anderen Stelle wieder auf.
Features:
  • Durch Kippen und Neigen des Handys wird die Kugel bewegt!
  • Durch Drücken der Stern-Taste (*) können beliebig viele Kugeln hinzugefügt werden und auf der Raute-Taste (#) wieder stückweise gelöscht werden. Die Kugeln stoßen sich (näherungsweise) physikalisch korrekt ab.
  • Das Ziel-Kästchen kann auf 5 ausgeblendet werden.
  • Auf 0 werden die Vibration, die bei vielen Kugeln recht störend seien können, ansonsten aber wirklich klasse sind, deaktiviert werden.
  • Durch Schütteln ändert sich die Hintergrundfarbe, wobei das Quadrat die Komplementärfarbe des Hintergrunds annimmt.
  • Geheimtipp: Im Dunklen sieht eine oft wiederholte auf-und-ab-Bewegung ziemlich cool aus - fast wie ein Regenbogen ;-)

Obwohl mich das Spiel viel Zeit und Nerven gekostet hat (vor allem die Stöße von mehreren Kugeln), bin ich im Nachhinein froh diese investiert zu haben und bin richtig stolz darauf :-).


Da auch bei diesem Spiel wieder auf den Beschleunigungssensor des Handys zugegriffen wird, ist ein solcher zwingend erforderlich. Ebenfalls obligatorisch ist die Java-Platform 8 und speziell die Unterstützung des JSR 256 (Mobile Sensor API). Getestet wurde es mit einem der ersten Sony Ericsson Handys, das diese Bedingungen erfüllt, dem K850i. Außerdem getestet auf dem W980 und C902, mit neueren Geräten sollte es keine Probleme geben.
Wenn euer Handy diese Anforderungen erfüllt, könnt ihr euch die Spiel hier herunterladen und über Bluetooth oder USB auf das Gerät laden. Viel Spaß damit!

Bei Interesse veröffentliche ich auch gerne Ausschnitte des Java-Quellcodes.

Kleine Anmerkung noch zum Schluss: Um eines klarzustellen - ich habe das Spiel vor ca. 2 Jahren geschrieben, also noch bevor das Bedienkonzept Schütteln, Neigen, Kippen auf dem iPhone umgesetzt wurde... ich hätte es früher veröffentlichen sollen :-(
:D

Gravitation - Wo ist "unten"?


Im zweiten Teil der Serie über meine J2ME-Anwendungen will ich euch Gravitation vorstellen. Dieses Programm zeigt euch mit einem schlichten Pfeil wo unten ist - egal wie ihr das Handy haltet, der Pfeil zeigt stets nach unten. Auf Wunsch (Klick auf 0) kann zusätzlich die Erdbeschleunigung in m/s^2 oben eingeblendet werden.
Wie schon das vorherigen Teil wird dazu auf den im Handy integrierten Beschleunigungssensor zugegriffen und aus den Werten, die dieser liefert, ein Winkel berechnet, um den der Pfeil gedreht wird. Der Pfeil wird durch eine Vektorgrafik (SVG) dargestellt und mithilfe eine Rotationsmatrix gedreht. Fragen über die genaue Funktionsweise können in den Kommentaren gestellt werden.
Dieses Video demonstriert die Verwendung von Gravitation:


Das Programm funktioniert logischerweise nur auf Handys mit Beschleunigungssensor (heutzutage sind die meisten damit ausgerüstet), auf denen mindestens die Java-Plattform 8 läuft. Speziell das JSR 256 (Mobile Sensor API) muss unterstützt werden. Getestet wurde es mit einem der ersten Sony Ericsson Handys, das diese Bedingungen erfüllt, dem K850i. Außerdem getestet auf dem W980 und C902, mit neueren Geräten sollte es keine Probleme geben.
Wenn euer Handy diese Anforderungen erfüllt, könnt ihr euch die Anwendung hier herunterladen und über Bluetooth oder USB auf das Gerät laden. Viel Spaß damit!

Bei Interesse veröffentliche ich auch gerne Ausschnitte des Java-Quellcodes.

Accelerometer - Beschleunigungsmesser für Handys


Das ist der erste Teil einer fünfteiligen Serie, in der ich euch meine J2ME-Anwendungen für Handys (speziell Sony Ericsson Geräte) vorstellen werde.
Nachdem ich festgestellt hatte, das mein altes Handy (ein Sony Ericsson K850i) Bilder automatisch dreht, wenn ich das Gerät kippe, fragte ich mich wie das genau funktioniert und habe durch Internetrecherche erfahren, dass darin ein Beschleunigungssensor verbaut ist. Dieser liefert Beschleunigungswerte in x-, y-, und z-Richtung, die über eine Java-API (JSR256) ausgelesen werden können. Also fing ich an meine erste J2ME-Anwendung zuschreiben, die zugleich meine erste Java-Anwendung überhaupt war.
Dabei entstand der Accelerometer, ein Beschleunigungsmesser für Handys, der die x-, und y-Komponente der auf das Gerät wirkende Beschleunigung in einem Polarkoordinatensystem darstellt. Oben links werden zusätzlich die Werte in m/s^2 angeeigt. Damit ist es z.B. möglich die Beschleunigung beim Autofahren, beim Start im Flugzeug oder die Erbeschleunigung (in unseren Breiten ca. 9,81 m/s^2) zu messen.
Für die Entwicklung habe ich das Sony Ericsson SDK und die Mobility-Version von Netbeans verwendet.
Hier ist noch eine kurze Video-Demonstration des Accelerometers:

Das Programm funktioniert logischerweise nur auf Handys mit Beschleunigungssensor (heutzutage sind die meisten damit ausgerüstet), auf denen mindestens die Java-Plattform 8 läuft. Speziell das JSR 256 (Mobile Sensor API) muss unterstützt werden. Getestet wurde es mit einem der ersten Sony Ericsson Handys, das diese Bedingungen erfüllt, dem K850i. Außerdem getestet auf dem W980 und C902, mit neueren Geräten sollte es keine Probleme geben.
Wenn euer Handy diese Anforderungen erfüllt, könnt ihr euch die Anwendung hier herunterladen und über Bluetooth oder USB auf das Gerät laden. Viel Spaß damit!

Bei Interesse veröffentliche ich auch gerne Ausschnitte des Java-Quellcodes.

Dienstag, 23. Februar 2010

I Am Rich als iPhone WebApp [Update: Jetzt auch offline verfügbar!]

So, mal wieder was für Angeber - also so ziemlich alle iPhone-Besitzer (wie Bilder wie dieses bestätigen - gut...ich geb's zu, meins ist auch dabei ;-)): Die iPhone-App I Am Rich, der sogar ein Wikipedia-Artikel gewidmet wurde, hat im Prinzip keine Funktion außer anzugeben und war für einen Tag für erschwingliche $999 im App Store zu haben. Natürlich um anzugeben und vor allem um einen guten Freund und selbst ernannten iPhone-Profi etwas vorzuführen, habe ich dazu ein Webapp-Pendant erstellt und veröffentliche es nun hier.
Wer auch so cool sein will wie ich, kann mit seinem Safari auf dem iPhone auf folgende Seite navigieren: http://dev.ubbel.de/iphone/webapp/iamrich. Das sieht dann zunächst ziemlich langweilig aus - um den Effekt, wie auf dem Screenshot rechts gezeigt, zu erzielen, muss man im Safari in der unteren Leiste auf das kleine Plus (+) klicken und die Option "Zum Home-Bildschirm hinzufügen" wählen. Daraufhin wird auf dem Homescreen ein Symbol mit dem Titel "I Am Rich!" abgelegt, dass genauso aussieht wie eine richtige App. Öffnet man diese Webapp startet Safari, jedoch ohne die obere Adressleiste und die Optionsleiste unten, und man erhält das Ergebnis, wie auf dem Screenshot rechts gezeigt.

Für Ober-Angeber habe ich noch die Funktion eingebaut, seinen eigenen Namen anzeigen zu lassen. Und zwar geht das ganz einfach über die URL: http://dev.ubbel.de/iphone/webapp/iamrich/?name=nicky. Also einfach das hinter "?name=" (hier: "nicky") durch euren Namen ersetzen und ihr werdet ruck zuck die coolsten in der Schule sein.
Viel Spaß damit!

Update: Die "I Am Rich!"-WebApp ist jetzt auch offline verfügbar! Für alle, die die App bereits installiert haben, empfiehlt es sich sie nochmal vom iPhone zu löschen und genau wie oben beschrieben ein neues "I Am Rich!"-Icon auf dem Homescreen abzulegen, denn nur so sind die Offline-Funktionalitäten gewährleistet. An dem "Installationsprozess" hat sich nichts geändert.
Besonders praktisch ist diese Neuerung für iPod Touch-Besitzer oder um die Mädels im Ausland zu beeindrucken ;-).

Montag, 22. Februar 2010

Buchstabensalat mit Php-Script lösen

Jeder kennt diese kleinen Rätsel, bei denen man eine ungeordnete Zeichenkette (z.B. pleaf) durch Umstellung der Buchstaben (Permutation) in ein sinnvolles, meist recht einfaches Wort (apfel) umwandeln soll. Um bei 9Live richtig abzusahnen, habe ich mir ein kleines Php-Script geschrieben, dass einen einfachen Permutations-Algorithmus implementiert und alle möglichen Buchstabenkombinationen an Google sendet und sie nach der Anzahl der Suchtreffer zu sortieren.
Der Algorithmus geht rekursiv vor:
Angenommen die Zeichenmenge ($pool) sei [a; b; c; d], dann nimmt er sich zuerst das erste Element (hier a) und "hält es fest" ($hold). Dann geht er eine Ebene tiefer und hält das nächte Element fest (hier b), festgehalten wird jetzt also a und b, die Restzeichenmenge ist [c; d]. Sind nur noch zwei Elemente in der Restzeichenmenge (wie hier c und d) werden diese einmal in der normalen Reihenfolge (cd) und einmal in der umgekehrten Reihenfolge (dc) zur Ergebnismenge hinzugefügt, zuvor werden jedoch die festgehaltenen Elemente (ab) vorne angehängt, sodass die Ergebnismenge folgendermaßen aussieht: [abcd, abdc].
Ist eine solche Reihe abgeschlossen springt es zur nächsten und hält dann zunächst b, dann a fest und hängt den Rest wie oben beschrieben an.
Für größere Tiefen, d.h. eine größere Zeichenmenge verläuft das ganze analog, nur dass dann 3 Elemente (z.B. abc) "festgehalten" werden.
Hier ein Ausschnitt des relevaten Code-Teils:
/**
* Permutation (rekursiv)
*
* @author Dominique d'Argent (nicky.nubbel@googlemail.com)
* @param $pool Zeichenmenge, entweder direkt als Array oder als String
* @param $sep   Seperator, um die als String übergebene Zeichenmenge aufzuteilen
* @returns array: Alle möglichen Kombinationen der Zeichenmenge
*/

function permutation($pool, $sep = '', $hold = array()) {
  // pool-Parameter in ein Array umwandeln
  if (!is_array($pool)) {
    if (is_string($pool)) {
      $pool = $sep ? explode($sep, $pool) : str_split($pool);
    }
    else {
      $pool = (array)$pool;
    }
  }
  // wenn nur noch zwei Elemente übrig sind, z.b. a und b, diese einmal in normaler und 
  // einmal in umgekehrter Reihenfolge zurückgeben: [ab, ba]
  if (count($pool) == 2) {
    return array(implode($sep, array_merge($hold, $pool)), // normale Reihenfolge: ab
                 implode($sep, array_merge($hold, array_reverse($pool)))); // umgekehrte Reihenfolge: ba
  }
  else {
    $res = array();
    foreach ($pool as $key => $value) {
      $new_pool = $pool;
      array_splice($new_pool, $key, 1); // das Element mit dem Index $key aus dem Array löschen
      
      $new_hold = array_merge($hold, array($value)); // den Wert des Elements mit dem Indey $key "festhalten"
      
      $res = array_merge($res, permutation($new_pool, $sep, $new_hold)); // mit der übrigen Zeichenmenge das selbe machen, bis nur noch 2 Elemente übrig sind (s.o.)
    }
    return $res;
  }
}

Eigentlich ganz einfach oder? :-)

Hier noch die Online-Demo: http://dev.ubbel.de/php/permutation/ - die Ergebnisse werden nach der Anzahl der Googletreffer sortiert.
Eigene Zeichenmengen können über die URL übergeben werden, z.B. http://dev.ubbel.de/php/permutation/?pool=nicky - leider ist der Server schon bei recht wenigen Elementen überfordert bzw. braucht sehr lange :-(

Der vollständige Quelltext (live und in Farbe) ist hier zu finden: http://dev.ubbel.de/php/permutation/permutation.phps

Präsentation über LEGO Mindstorms NXT

Da ich auch immer viele Informationen aus dem Internet beziehe, dachte ich mir, gebe ich ihm mal etwas zurück. Deshalb veröffentliche ich hier meine Präsentation über NXT-Roboter. Sie beinhaltet sowohl Aspekte der Hardware als auch der Software (speziell Programmierung mit NXT-G) und gibt abschließend noch einige Informationen, Erfahrung und Kritik an der First LEGO League.
Online-Demo: http://docs.ubbel.de/presentations/nxt
Die Präsentation basiert auf einem Html-Grundgerüst, dass ich optisch und interaktiv mit jQuery UI und Css aufgewertet habe, was mir glaube ich auch ganz gut gelungen ist. Der Folienwechsel geschieht nach einem Klick in der Navigationsleiste links über einen asynchronen XMLHttpRequest (AJAX), dass heißt es wird nicht die ganze Seite neu geladen, sondern nur der Content-Bereich in der Mitte. Die Seite ist optimiert für Google Chrome 4+ und einer Auflösung von 1280x800px, andere Kombinationen sind natürlich auch gut möglich. Leider habe ich festgestellt, dass das Layout auf unserem Beamer in der Schule durch die Bilder etwas verzerrt wurde.

Ihr könnt die Präsentation hier herunterladen. Viel Spaß damit!

Sonntag, 21. Februar 2010

Gehirntrainer mit GWT

Dieses "Gehirntrainer"-Projekt habe ich vor einigen Jahren angefangen und - wie viele meiner Projekte - nie fertiggestellt...
Drei Disziplinen habe ich immerhin geschafft:

  1. 20 simple, arithmetische Kopfrechenaufgaben lösen, wobei die richtigen Ergebnisse und die Zeitgemessen werden.

  2. Zählen wie viele Leute nach einiger Zeit in einem Haus sind, nachdem zuvor unterschiedlich viele Leute in das Haus bzw. aus diesem heraus gerannt sind. Meine Lieblingsdisziplin :-)

  3. Ein einfacher Reaktionstest: Man muss die grünen Quadrate mit der Maus berühren und am Ende wird die Zeit angezeigt.


Das Programm wurde in Java geschrieben und mithilfe des Google Web Toolkits (GWT) in eine Rich Internet Application (RIA), also im Prinzip in HTML + Javascript-Code, umgewandelt.

Eine Online-Demo ist hier einzusehen: http://dev.ubbel.de/gwt/gehirntrainer/Gehirntrainer.html
Auf Wunsch stelle ich den Java-Quelltext natürlich auch zum Download bereit.


UPDATE: Leider habe ich gerade festgestellt, dass meine Lieblingsdisziplin online nicht funktioniert :-(. Wer dennoch damit spielen will, kann sich die ganze Anwendung hier herunterladen.

NXT folgt Linie mithilfe zweier Lichtsensoren

So, jetzt will ich Euch mal ein kleines NXT-G-Programm vorstellen, dass den Roboter auf einer schwarzen Linie im Kreis fahren lässt. Im Roboter sind zwei Lichtsensoren verbaut - einer hängt knapp links von der Linie und einer entsprechend rechts daneben. Die Sensorwerte im Bereich von 0 bis 100 werden ausgelesen und anschließend voneinander subtrahiert. Diese Differenz im Bereich von -100 bis 100 geht dann in die Lenkung und in die Leistung der Motoren mit ein und sorgt für eine (zumindest theoretisch) weiche Kurvenbahn.
Hier noch eine kurze Demonstration:


Das verwendete NXT-G-Programm steht hier zum Download bereit.

Quadratische Gleichungen lösen mit jQuery

Diese kleine jQuery-Anwendung habe ich mal zum Angeben im Informatikunterricht erstellt ;-). Das eigentliche Programm ist recht simpel und eigentlich nicht erwähnenswert. Es behandelt alle Fälle, die bei einer quadratischen Gleichung auftreten können und liefert die entsprechende Lösungsmenge. Mit jQuery und einigen schönen Effekten habe ich das schlichte Programm etwas aufgewertet. Ebenfalls sehenswert sind die automatisch ablaufenden Tests, die alle o.g. Fälle abdecken.

Erster Test [UPDATE]

So, das ist mein erster Post.

UPDATE: Falls sich jemand fragt, wozu dieser Blog ist... na ja, ich glaube im Wesentlichen dient er mir als Referenzen-Sammlung. Ich habe schon so viel Zeit in die Programmierung von teilweise ernsthaften Anwendungen, oft aber auch nur Spielereien, gesteckt und habe aber nach den vielen Jahren so gut wie nichts vorzuweisen. Deshalb benutze ich jetzt hier diesen Blog, um meine Arbeiten zu sammeln :-)


Technorati claim token: AKTTW5HC4GUP