Wobble window jQuery plugin

Es gibt unzählige Tutorials und Code Snippets mit denen man HTML-Elemente „wobblen“ lassen kann. In den meisten Fällen geht es aber eher darum Elemente zu schütteln, bzw. einen shake-Effekt anzuwenden.
Ich wollte allerdings einen wobble-Effekt schreiben, der sich auf die Form von einem DIV bezieht.  Genauer gesagt, ein Effekt der die Form von einem DIV beeinflusst. Das Ganze abhängig von der Mausposition. So entstand das „Wobble window jQuery Plugin“. Über diverse optionale Parameter könnt ihr mit Hilfe vom „Wobble window jQuery Plugin“ einen Hintergrund für ein beliebiges DIV erzeugen, welcher seine Form abhängig von der Mausposition verändert. Der Hintergrund wobblet/wabert und so entsteht ein interessanter Effekt der an eine Flüssigkeit erinnert.
Zuerst gesehen hatte ich diesen Effekt bei Paul Neave. Damals, genauer gesagt 2006, hatte ich den Effekt in Flash nachgebaut. Und jetzt war es endlich mal an der Zeit den Effekt in HTML5 zu überführen und dabei auch für andere Entwickler nutzbar zu machen. Daher die Idee mit dem jQuery Plugin.
Zum Einsatz kommen das Canvas Element und JavaScript. Dadurch sollte sichergestellt sein, dass auch ältere Browser in der Lage sind diesen Effekt darstellen zu können. Mit 3 KB im Zip-Format ist das Plugin recht schlank geworden. So entstehen keine langen Ladezeiten und euer Traffic geht nicht durch die Decke.
Wie bei meinen anderen jQuery Plugins auch könnt ihr diesen Effekt aber auch ohne jQuery auf eure Elemente anwenden.
Ich zeige euch erst ein paar Beispiele (Zu jedem Beispiel könnt ihr euch den Code anschauen). Danach gehe ich noch etwas konkreter auf den Code ein, damit ihr das „Wobble window jQuery Plugin“ direkt nutzen könnt.

Beispiel 1:
view source

Beispiel 2:
view source

Beispiel 3:
view source

Beispiel 4:
view source

Beispiel 5:
view source

Beispiel 6:
view source

Und hier nun ein paar Beispiele wie ihr das in eurer Webseite einbinden könnt. Zunächst einmal müsst ihr die JS Dateien in eure Seite einbinden:

Danach könnt ihr direkt starten. Mit jQuery sieht das wie folgt aus:

$( '#window' ).wobbleWindow();

Und so ohne jQuery:

var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ) );

Natürlich könnt ihr noch diverse Parameter an das Plugin übergeben um den Effekt zu individualisieren. Ein solches Objekt zu erstellen ist optional, aber hier der Vollständigkeit wegen das Objekt mit allen möglichen Parametern:

var settings = {

    name: 'my_window',//name
    depth: 1,//depth for zIndex
    offsetX: 0,//+ or - value the size of the div
    offsetY: 0,//+ or - value the size of the div
    moveTypeIn: 'move',//method points follow the mouse
    moveTypeOut: 'wobble',//method points go back to init position
    wobbleFactor: 0.9,//control the wobble effect
    wobbleSpeed: 0.1,//control the wobble speed
    moveSpeed: 3,//control the move speed
    lineWidth: 1,//lineWidth
    lineColor: '',//no value = no line. Use hex/rgba values
    bodyColor: '#FFF',//no value = no body color. Use hex/rgba values
    numberOfXPoints: 7,//quantity of points horizontal. must be an odd int
    numberOfYPoints: 5,//quantity of points vertical. must be an odd int
    movementLeft: true,//enable/disable movement directions
    movementRight: true,//enable/disable movement directions
    movementTop: true,//enable/disable movement directions
    movementBottom: true,//enable/disable movement directions
    autoResize: true,//if true size will be automatically adjusted
    autoResize: true,//enable/disable automatic size adjustement
    debug: false//enable/disable debug mode

};

Wollt ihr das Plugin mit Parametern starten, dann sieht der Aufruf mit jQuery wie folgt aus

$( '#window' ).wobbleWindow( settings );

Und so ohne jQuery:

var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );

Downloads

Das wars schon. Bleibt mir nur noch euch viel Spaß zu wünschen und die Download Links anzubieten. Die jquery.wobblewindow.min.js, wie hier in den Beispielen verwendet. Die jquery.wobblewindow.js, falls ihr am Code interessiert seid und die jquery.wobblewindow.min.js.zip als Zip.



GitHub

Und hier geht´s zum GitHub Repository. Hier findet ihr immer die aktuelle Version und weitere Tutorials sowie Links.

Wie immer gilt: Falls ihr Fragen oder Anregungen habt, dann hinterlasst einfach einen Kommentar oder schreibt mich an.

Water ripple effect jQuery plugin

Ich war von dem „water ripple effect“ schon immer fasziniert und so wurde es mal Zeit sich mit damit zu beschäftigen. Rausgekommen ist dabei ein kleines jQuery Plugin, welches ihr komfortabel in euren Projekten mit einbinden könnt. Wie bei meinen letzten jQuery Plugins auch, könnt ihr den „water ripple effect“ mit, oder ohne jQuery benutzen. Als Zip und minifiert ist dieses Plugin nur knapp 2KB groß.
Ursprünglich für Java von Neil Wallis geschrieben und später von Sergey Chikuyonok für JavaScript adaptiert, musste ich das Rad nicht neu erfinden. Ich habe lediglich versucht den Code noch an ein paar Stellen weiter zu optimieren.
Zum Einsatz kommen die Canvas und gutes altes JavaScript. Dadurch ist sichergestellt, dass eine maximale Abwärtskompatibilität erreicht wird. So sollten auch ältere Browser in der Lage sein den Effekt darzustellen. Trotz Optimierungen kostet der Effekt allerdings noch immer gut Rechenpower. Ihr solltet also darauf achten nicht zu große Bilder zu verwenden.

Hier könnt ihr euch eine Demo anschauen:



Folgend ein paar Beispiele wie ihr den Effekt in euer Projekt einbinden könnt. Zunächst mit jQuery, bzw. als jQuery Plugin.

Zuerst einmal müsst ihr jQuery und danach dann das Plugin in eure Seite einbinden.

var settings = {

    image: './img/SwimmingPool.jpg',//image path
    rippleRadius: 3,//radius of the ripple
    width: 480,//width
    height: 480,//height
    delay: 1,//if auto param === true. 1 === 1 second delay for animation
    auto: true//if auto param === true, animation starts on it´s own

};

Als nächstes erstellt ihr ein Objekt. Mit diesem könnt ihr diverse Parameter übergeben. Unverzichtlich ist der Parameter image, mit dem ihr angeben müsst wo das Bild liegt das ihr für den Effekt verwenden wollt. Mit rippleRadius bestimmt ihr den Radius der Wellen. Die Parameter width und height geben an wie groß euer Bild ist. Der Parameter delay kommt ins Spiel wenn ihr den Parameter auto auf true stellt. Steht auto auf true läuft die Animation automatisch ab und mit dem delay könnt ihr bestimmen wie schnell

$( '#holder' ).waterRippleEffect( settings );

Hiermit startet, bzw. initiiert ihr den Effekt. holder ist ein einfaches Div. Wie ihr seht wird an dieser Stelle das eben erstellte Objekt settings mit übergeben.
Soweit so gut. False ihr bei den settings auto auf true gestellt habt dann seid ihr im Prinzip schon fertig.
Wollt ihr das Ganze mit der Maus beeinflussen, dann könnt ihr z.B. folgendes schreiben:

$( '#holder' ).click( function( e ) {

    var mouseX = e.pageX - $( this ).offset().left;
    var mouseY = e.pageY - $( this ).offset().top;

    $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );

} );

So erscheinen die Wellen per Klick an der aktuellen Mausposition.

$( '#holder' ).mousemove( function( e ) {

    var mouseX = e.pageX - $( this ).offset().left;
    var mouseY = e.pageY - $( this ).offset().top;

    $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );

} );

Und so per Mousefollow.

Ihr benutzt kein jQuery? Kein Problem. Dann macht es einfach wie folgt ohne jQuery:

Ihr bindet nur die jquery.waterrippleeffect.min.js in eure Seite mit ein.
Der part mit dem settings Objekt ist 1zu1 gleich wie oben für die jQuery Variante beschrieben, weshalb ich das an dieser Stelle nicht noch einmal wiederhole. Ihr könnt diesen Part einfach so von oben übernehmen.
So startet ihr den Effekt:

var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );

holder ist hier wieder ein Div und auch hier wird das settings Objekt mit den Parametern für den Effekt übergeben.
Wollt ihr das Ganze per Mausklick steuern ergänzt folgendes:

document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {

    var mouseX = e.layerX;
    var mouseY = e.layerY;

    waterRippleEffect.disturb( mouseX, mouseY );

} );

Für einen Mouse-Follow schreibt ihr einfach:

document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {

    var mouseX = e.layerX;
    var mouseY = e.layerY;

    waterRippleEffect.disturb( mouseX, mouseY );

} );

Das wars. Mehr ist nicht nötig. Ihr könnt euch auch die Demo oben direkt anschauen und den Code aus dem HTML File entnehmen. Dazu einfach hier klicken.

Zum Download stelle ich euch drei Varianten zur freien Verfügung. Die jquery.waterrippleeffect.min.js wie hier in den Beispielen verwendet. Die jquery.waterrippleeffect.js, falls ihr mal hinter die Kulissen schauen wollt und die jquery.waterrippleeffect.min.js.zip als Zip.

Viel Spaß mit diesem jquery Plugin. Falls ihr Fragen oder Anregungen habt würde ich mich über ein paar Kommentare freuen.
 

Tornado Simulation

Die Tornado Simulation ist ein Experiment das ich schon seit langem starten wollte. Und mit meiner 3D Particle-Engine, die jetzt schon in so zahlreichen anderen Experimenten zum Einsatz kam, und etwas Zeit ließ sich diese Simulation jetzt endlich mal umsetzen.
Für die Simulation selbst kommen keine weiteren Frameworks wie z.B. Three.js zum Einsatz. Einfach pures JavaScript. Dadurch konnte ich auch in diesem Experiment die Dateigröße mit 13KB recht klein halten.
Zum Rendern nutze ich das Canvas-Element und das ImageData Interface um Zugriff auf die Pixel zu bekommen.
Wer sich für dieses Thema interessiert, ich hatte dazu mal ein Tutorial geschrieben.
Aber zurück zum Tornado. Ziel war es im weitesten Sinn eine möglichst realistische Simulation eines Tornados mit den zur Verfügung stehenden Mitteln zu realisieren.
Die Höhe des Tornados ergibt sich aus der Anzahl der „Radial Segments“. Diese sind in einer sich drehenden Spirale angeordnet, die nach oben hin exponentiell größer wird. Auf die Animation der Verschiebung der Spirale könnt ihr mit „Spiral Disp.“ Einfluss nehmen. Um jedes der „Radial Segments“ kreisen die „Tubular Segments“. Deren Anzahl kann nur auf ein Maximum festgelegt werden, da hier der Zufall mitbestimmt wie viele „Tubular Segments“ pro „Radial Segment“ generiert werden. Jedes einzelne „Tubular Segment“, also Partikel, erhält einen per Zufall generierten Graustufen-Wert und kann eine Spur hinter sich herziehen, deren maximale Länge ihr in den Einstellungen per „Max Trail Length“ beeinflussen könnt. Auch auf die Geschwindigkeit und Drehrichtung der Partikel könnt ihr mit „Max Speed“ Einfluss nehmen. Mit „Min Radius“ könnt ihr zudem noch festlegen wie groß/klein der Radius des Tornados unten am Boden ist.
Geht einfach mal in die Einstellungen mit „Open Controls“ und spielt mit den Werten. Aber bitte etwas vorsichtig. Langsame Rechner könnten hierbei schnell an ihre Grenzen gebracht werden!
Ihr könnt die Anwendung direkt hier unterhalb starten (einfach mit der Maus über das untenstehende Fenster fahren), oder ihr öffnet die Simulation in einem neuen Browserfenster. Vor allem User mit mobilen Endgeräten und älteren Rechnern sollten sich die Simulation in einem extra Fenster anschauen.
Viel Spaß und haltet eure Hüte fest.
 

Lissajous Curve

Die Lissajous-Figur ist aus mathematischer Sicht das parametrische Schaubild einer Funktion erfunden vom französischen Physiker Jules Antoine Lissajous.
Hier umgesetzt mit JavaScript ohne weitere Frameworks und dadurch unter 15KB klein.
Spielt einfach mal mit den Parametern. Damit lassen sich interessante Ergebnisse erzielen. Um ein harmonisches Ergebnis zu erziehlen, sollten die Werte der drei Parameter W1, W2 und W3 nah beieinander liegen. Wie z.B. in den Voreinstellungen sichtbar.
Ihr könnt die Anwendung direkt hier unterhalb anschauen, oder, besonders für mobile Endgeräte empfehlenswert, in einem neuen Browserfenster.

Dwitter!

Dwitter? Du meinst bestimmt Twitter! Nein, Dwitter.
Was ist Dwitter? „A social network for short JavaScript demos“.
Dwitter ähnelt Twitter sehr. Nur mit dem Unterschied, dass man mit den 140 Zeichen (bytes) keine Textnachrichten verfasst, sondern kleine JavaScript Demos programmiert.
Die große Herausforderung, und gleichzeitig auch der Reiz, besteht darin, sein Vorhaben in 140 Zeichen Code zu verpacken. Dabei muss man seinen Code brutal optimieren und lernt immer wieder neue Kniffe und Tricks um hier und da ein paar Zeichen einzusparen. Natürlich gibt es Tools wie z.B. das sehr empfehlenswerte „JavaScript Compression Tool“ und andere, aber deren Einsatz allein reicht in den meisten Fällen nicht aus, oder kann nur unterstützend eingesetzt werden.
Am besten schaut man sich andere Beispiele auf Dwitter an und versucht deren Code zu verstehen. So kann man ziemlich schnell viele Tricks zum optimieren seines Codes sammeln.
Hier mal meine ersten Gehversuche auf Dwitter:
https://www.dwitter.net/u/Niklas 

Und hier eine kleine Auswahl meiner Favoriten Dweets:
https://www.dwitter.net/d/701
https://www.dwitter.net/d/1494
https://www.dwitter.net/d/1231
https://www.dwitter.net/d/855
https://www.dwitter.net/d/433
https://www.dwitter.net/d/1829
https://www.dwitter.net/d/915
https://www.dwitter.net/d/1232