Das Putzlowitsch Test- und SEO-Blog

Niels Bohr Doodle, Animation und Video

Niels Bohr - Google DoodleWie schon früher bei einigen anderen Doodles gibt es hier ein kleines „Making Of“ für die Animation zum Niels Bohr Google Doodle. Das Doodle ist dem 127. Geburtstag des dänischen Physikers gewidmet und zeigt das nach ihm benannte Bohrsche Atommodell.

Beim Übergang eines Elektrons von einer höheren (rot, n=3) auf eine nieder (blau, n=2) Umlaufbahn wird vom Atom ein Photon (rote Wellenlinie) ausgesendet.

Naheliegend war für mich, die Elektronen auf ihren Bahnen kreisen zu lassen. Für die äußere Bahn (n=3) sieht das so aus:

Niels Bohr - Atommodell n3

Der Übergang vom Niveau n=3 zu n=2 und die Aussendung des Photons ist die eigentlich wichtige Animation:

Niels Bohr - Atommodell Photon

Die Animation war diesmal technisch nicht besonders anspruchsvoll. Ich mußte nur die beiden Elektronen auf den Bahnen, den Pfeil und die Photonenwelle wegretuschieren. Die Elektronen habe ich dann einfach wieder als gelbe Punkte in eigenen Ebenen hinzugefügt und entlang der farbigen Ellipsen bzw. des Pfeils bewegt.

Alle Einzelbilder zusammen dargestellt sehen so aus:

Niels- Bohr Doodle - alle Teilbilder

Für das Video habe ich dann die Anfangssequenz einige Male wiederholt, dann kommt der Elektronen-Übergang und zum Ende die mehrfach wiederholte Endsequenz.

Für die Vertonung habe ich auf altbewährte Musik und Geräusche zurückgegriffen. Das ist vielleicht auf Dauer für Stammseher etwas langweilig. Ich werde meine Musik- und Geräuschesammlung demnächst erweitern, um abwechslunsreicheres Audio-Material zur Verfügung zu haben.

Ob ich das bis zum nächsten Doodle schaffe, weiß ich allerdings nicht.

Keine Kommentare »

Lustige Zappeleffekte mit JavaScript (jQuery)

Klappfenster

Ohne ausklappenden Fenstern geht im modernen Webdesign fast gar nichts mehr. Dynamische Webseiten sind in und auch gar nicht mal so schwer zu erstellen. Durch die Nutzung einer passenden JavaScript-Bibliothek wie jQuery sind oft nur ein paar Zeilen JavaScript-Code notwendig, um die gewünschten Effekte zu erzielen.

Das nachfolgende Beispiel verwendet die Funktionen .hover() und .slideToggle() und sieht im Quelltext recht überschaubar aus:

$("#festes-fenster").hover(
 function(){
  $(this).next().slideToggle(150);
 }
);

JavaScript-Code
Beim div (Fenster) mit der id „festes-fenster“ wird für das Mausereignis „Betreten“ und „Verlassen“ eine Ereignisfunktion (Event-Handler) installiert, die das nächste div mit der Funktion slideToggle() ein- oder ausklappen läßt.

Hier das Beispiel:

festes Fenster

Zappel-Fenster

Bewegt man die Maus in das feste Fentster, wird das Zappel-Fenster ausgeklappt. Verläßt der Mauszeiger wieder den gestrichelt umrandeten Bereich, verschwindet das Fenster wieder. So weit, so gut.

Zappelphilipp

Interessant ist der untere Rand des festen Fensters, denn dieser wird vom Zappelfenster, wenn es sichtbar ist, teilweise überdeckt. Wenn nun der Mauszeiger in diesen Bereich gelangt, beginnt das Zappel-Fenster zu zappeln.

Der Grund ist die Überlappung. In dem Moment, wo das zweite Fenster ausgeklappt wird, überdeckt es das erste Fenster, wodurch die Maus dieses Fenster verläßt. Dadurch wird das Zappelfenster zugeklappt, die Maus ist wieder im festen Fenster, also wird das Zappelfenster wieder ausgeklappt, übderdeckt wieder das feste Fenster, wird wieder zugeklappt usw. usw. Das geht immer weiter, so lange sich der Mauszeiger im Überlappungsbereich der beiden Fenster befindet.

Beispiele aus der Praxis

Daß das nicht nur theoretische Überlegungen sind, zeigen zwei Bespiele aus der Parxis. Dadurch bin ich überhaupt erst auf dieses Phänomen aufmerksam geworden.

Bei Google+ gibt es in der linken Symbolleiste den Menüpunkt für „Fotos“ und ganz unten „Mehr“. Hier werden jeweils Unterfenster nach rechts ausgeklappt, die man zum Zappeln bringen kann. Ich habe das hier in einem kurzen Video demonstriert:

Beim zweiten Beispiel kommt noch eine weiterer Aspekt hinzu, ein Zappel-Speichereffekt. Ich habe es jetzt nicht genauer untersucht, aber es sieht so aus, als würden die Mausereignisse in eine Art Warteschlange eingereiht und asynchron abgearbeitet werden.

Wenn die Maus eine Weile im Zappel-Bereich verweilt und zum nächsten wechselt, zappelt das vorhergehende Fenster noch weiter. Das gibt ganz lustig aussehenden, nun ja, fast schon Tanzdarbietungen:


Splittest Zappel-Seite
Die „Musik“ ist auf der ursprünglichen Webseite nicht vorhanden, die habe ich erst im Video drunter gelegt. :-)

Weitere Artikel mit Bezug zu diesem:
3 Kommentare »

London 2012 – Rhythmische Sportgymnastik (Google Doodle animiert)

London 2012 - Rhythmische Sportgymnastik Doodle

Anmutiges Doodle zur Rhythmischen Sportgymnastik

Heute gibt es auf der Google-Startseite ein Olympia-Doodle zur Turnsportart Rhythmische Sportgymnastik. In der mobilen Version sieht es nicht viel anders aus, als die Doodle der letzten Tage. Die Frage von gestern, ob heute ein Boxen-Doodle mit echten Gegnern kommt, muß ich leider mit Nein beantworten. Weder Boxen, noch echte Gegner, ja noch nicht mal ein interaktives Spiel gibt es.

Das Google-Doodle für den 11. August 2012 ist statisch und gänzlich bewegungslos. Die Gymnastin verharrt in graziöser Haltung. So mußte ich wieder selbst ein bißchen Bewegung in die Sache bringen und mir etwas ausdenken. Ganz so schöne Ideen wie beim Bogenschießen oder Speerwerfen hatte ich nicht, deshalb gibt es auch keine Bewegungsphasen zu sehen.

Hier also meine Animation als Video (engl. Rhythmic Gymnastics):->

Rhythmische Sportgymnastik mit Effekten

Meine Video-Schnittsoftware hat ja so einiges an Blenden und Effekten zu bieten. Bisher habe ich das noch nicht weiter genutzt. Bestenfalls Ein- und Ausblenden von und nach Schwarz und weiches Überblenden habe ich verwendet. Ansonsten meist harte Schnitte.

Da ich die Sportlerin und ihr Band freigestellt und den Hintegrund entsprechend retuschiert habe, wollte ich Gymnastin und Band irgendwie ins Bild bringen. Einfach einblenden ist aber langweilig und so habe ich den Effekt „Funkeln“ verwendet. Ganz nette Sache, finde ich.

In meiner Video-Software steckt sicher noch viel mehr drin. Etwas Sorgen bereitet mir hingegen mein uralter Photoshop 6.0, der nicht mehr ganz auf der Höhe der Zeit ist und unter Windows 7 bisweilen ein seltsames Verhalten an den Tag legt. Da werde ich mir wohl langsam mal Ersatz beschaffen müssen…

Das schreiben die anderen Doodle-Blogger:

Ein Kommentar »

London 2012 – Fußball (Google Doodle interaktiv)

London 2012 - Fußball Doodle

Interaktives Fußball-Doodle

Heute gibt es auf der Google-Startseite ein Olympia-Doodle zur Ballsportart Fußball. In der mobilen Version sieht es nicht viel anders aus, als die Doodles der letzten Tage. Wie gestern schon vermutet, ist nun heute Fußball (Soccer) an der Reihe. Klar, auch das heutige Fußball-Doodle ist als interaktives Spiel umgesetzt. Ob dann morgen Boxen gegen echte Gegner kommt, wird man sehen.

Beim Google-Doodle für den 10. August stellt man sich ins Tor zu einem Torwarttraining. Um die Bälle abzuwehren, steuert man die Spielfigur mit den links/rechts-Cursortasten. Mit der Leertaste, Entertaste oder Cursor-hoch-Taste springt man nach oben, falls ein Hochschuß kommt. Beim Flachschuß muß man nur an der richtigen Stelle im Tor stehen. Das Ganze geht auch mit der Maus zu steuern, was mir persönlich mehr liegt.

Hier meine Ballabwehr als Video (engl. Soccer / Football):->

Fußball liegt mir mehr als Basketball

Beim Fußball habe ich mich wie beim Kanuslalom etwas mehr als beim Hürdenlauf oder Basketball angestrengt und konnte mir mit 48 gehaltenen Bällen sogar alle drei goldenen Sterne verdient. Ob ihr es glaubt, oder nicht, früher habe ich in der Schule beim Pausenfußball (Freistundenfußball) öfter mal im Tor gestanden. Naja, da hieß es immer: „Tore schießen kannst Du ja doch nicht, dann stell dich einfach hinten rein und hau die Dinger weg“. :-)

Fußball interaktiv gegen mobil

Interessant finde ich, daß beim Doodle Bild der mobilen Version (siehe oben) die Treffer von rechts nach links abgekreuzt werden ([ ][x][x]), im richtigen Spiel aber anders herum. Außerdem gibt es bei der rechten Anzeigetafel keine führenden Nullen wie im Spiel, da steht einfach nur die 12.

Anderereseits kann man im Spiel nicht so schön hechten, wie der Torhüter auf dem statische Bild. Und so einen tollen Schweif hat der Ball im richtigen Spiel auch nicht. Naja, ist halt künstlerische Freiheit. :-)

Der Torwart der mobilen Doodle-Version hat schon zwei Buden reinbekommen, aber erst 12 gehalten. Das sieht eher nicht rekordverdächtig aus.

Wer das Fußball-Doodle-Spiel selber mal probieren will, kann das bereits im Doodle-Archiv tun. Viel Spaß!

Das schreiben die anderen Doodle-Blogger:

3 Kommentare »

London 2012 – Kanuslalom (Google Doodle interaktiv)

London 2012 - Kanuslalom Doodle

Heute gibt es auf der Google-Startseite ein Olympia-Doodle zur Wassersportart Kanuslalom. In der mobilen Version sieht es nicht viel anders aus, als die Doodles der letzten Tage. Google hält uns in Atem, wie bereits vorgestern der Hürdenlauf und gestern dann Basketball, ist das heutige Kanuslalom-Doodle als interaktives Spiel umgesetzt. Ich würde mal sagen, die noch kommenden zwei Sport-Doodle werden auch kleine, interaktive Spiele sein? Ich tippe auf Fußball und Boxen.

Beim Google-Doodle für den 9. August setzt man sich als Kanute in ein Kajak und muß die mit Toren festgelegte Strecke auf schnell fließendem Wasser möglichst schnell und fehlerfrei durchfahren. Paddeln kann man mit den links/rechts-Cursortasten (oder hoch/runter). Es geht auch mit einer Mausklick-Technik, allerdings erreicht man da keine wirklich guten Zeit.

Hier meine Paddelversuche als Video (engl. Slalom Canoe):->

Beim Kanuslalom habe ich mich wirklich mal ins Zeug gelegt und bin bei 18 Sekunden durchs Ziel gegangen. Hätte ich am Ende noch Kurs gehalten, wären es vielleicht auch 17 Sekunden geworden. Immerhin reicht die Zeit für zwei von drei Sternen. :-)

Meine Taktik heißt hier übrigens, Augen zu und durch. Ehe ich versuche, die Tore zu erwischen oder den Steinen und Fröschen auszuweichen, konzentriere ich mich lieber auf ein gleichmäßiges Links/Rechts-Tastenklicken, nicht zu hektisch, aber konstant. So bleibe ich halbwegs in der Mitte und mit etwas Glück komme ich gut durch.

Wer das Kanuslalom-Doodle-Spiel selber mal probieren will, kann das bereits im Doodle-Archiv tun. Viel Spaß!

Das schreiben die anderen Doodle-Blogger:

Weitere Artikel mit Bezug zu diesem:
4 Kommentare »