Blog Logo Screenlight Blog

Weekend Project: Victor.js

Victor.js

Eine 2D Vektor Mathematik Library für JavaScript.

Vor ein paar Wochen hat mich jemand angefragt, ob ich Lust hätte, mit ihm zusammen meine schon etwas ältere Vektor Library wiederzubeleben. Wir haben dann das API in ein chaining-API umgebaut, sodass Funktionen aneinandergehängt werden können, und einen Haufen neue Funktionen hinzugefügt.

Victor ist eine Mathe Library für JavaScript mit vielen Funktionen, um Vektoren zu Manipulieren, oder Distanzen, Winkel und anderes tolles Zeugs aus ihnen auszurechnen. Ziemlich cool also!

Auf victorjs.org findet sich eine vollständige Dokumentation mit Beispielen zu allen Funktionen und teils sogar interaktiven Demos.

Victor ist open-source (MIT License) und auf GitHub. Wer Lust hat, ist gerne eingeladen, bei der Weiterentwicklung mitzuhelfen.

Demo time!

Folgende “Bouncy Ball” CodePen Demo zeigt, wie man durch Manipulieren Vektoren “magnetisch” auf einander wirklen lassen kann, indem man aus den Distanzen einen Korrektur-Vektor ausrechnet und diesen dann vom Gschwindigkeitsvektor subtrahiert.

Es gibt hier zwei Positions-Vektoren. Die Position vom Magneten und jene des Balls. Dann gibt es einen Geschwigndigkeits-Vektor. Um den Ball zu verschieben, wird der Geschwindigkeits-Vektor zum Positions-Vektor addiert.
Damit der Ball nicht aus dem Fenster fliegt, wird die X bzw. Y Komponente des Geschwindigkeits-Vektors invertiert wenn der Positions-Vektor des Balls auf eine Kante trifft. So entsteht der “Bounce” Effekt.

Um den Magnet Effekt zu erzielen wird ein Korrektur-Vektor errechnet, indem man aus der X-Distanz und der Y-Distanz zwischen dem Magneten und dem Ball einen neuen Vektor erzeugt und diesen anschliessend mit einer Zahl zwischen 0 und 1, der “Magnetstärke” multipliziert.
Der Korrektur-Vektor wird dann vom Geschwindigkeits-Vektor subtrahiert und der Ball wird somit abgebremst oder beschleunigt.
Die Rotation des Magneten entspricht dem Winkel des Korrektur-Vektors.

Wer Lust hat, kann mit den Variablen magnetStrength und magnetReactionTheshold herumspielen.

Die Demo scheint hier im Blog ein Problem zu haben und stoppt nach ca. 10 Sekunden. Keine Ahnung wieso Deshalb!. Aber direkt auf CodePen funktioniert sie prima.

Leave a Response

No comments so far, would you like to be the first?