Die Simulation Wird Die Bewegung Der Maus

0
19

Wenn Sie jemals hatte, zum anzeigen einer interaktiven animation während einer live-Vortrag oder eine Klasse, dann dürfen Sie wissen, dass es nicht immer einfach zu interagieren mit Ihren Folien und beim reden.

Dies geschah zu mir, wenn ich brauchte, um dies zu zeigen Teilchen demo für meine Schüler. Ich wollte nicht bleiben, neben meinem computer auf meine Maus, um zu zeigen, die demo.

Siehe Stift
Partikel (in Bewegung) von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Wenn Sie interagieren nicht mit dem iframe, werden Sie nichts sehen, aber ein Leerzeichen. Sobald Sie beginnen, verschieben Sie Ihre Maus oder Ihren finger, können Sie die animation sehen.

Aus diesem Grund habe ich die gleichen demo, aber ich habe einige extra-code zu simulieren, jemand der Interaktion mit der demo.

Siehe Stift
Partikel (fake) von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Simplex noise

Der trick hier ist die Verwendung eines Algorithmus zur Generierung von “glatten” zufälligen Positionen. Wenn wir mit einer klassischen random-Funktion, die gefälschte Maus an eine rein zufällige position in jedem Bild. Was wir wollen, ist zu haben eine position in jedem Bild, das direkt mit dem vorherigen verbunden. Zum Glück gibt es eine Technik, die genau das macht, was wir brauchen: – Simplex-Rauschen (oder besser bekannt als Perlin-Rauschen).

Lassen Sie uns nehmen einen Blick auf dieses Bild, in dem die Höhe jeder einzelnen Spalte definiert ist, die mit zufälligen Werten auf der Oberseite, und die Werte von Simplex-noise-Algorithmus weiter unten.

Sie können schnell feststellen, dass die untere Kurve scheint viel glatter, da jede Spalte die Höhe ist verbunden mit der vorherigen. Diese Diagramme sind zeigt nur eine dimension (x-Achse, von Links nach rechts), aber mit Simplex-noise-Sie können Werte in vielfachen Dimensionen. In unserem Fall müssen wir zwei Dimensionen für die X-und Y-Koordinaten der gefälschte Maus wir sind die Simulation.

Wenn Sie sind mehr daran interessiert zu wissen, wie die Simplex-noise funktioniert, überprüfen Sie heraus das video “I. 5: Perlin Noise – The Nature of Code” von Daniel Shiffman

Schnell Rauschen Koordinaten

Das erste, was wir brauchen, um unsere demo-Arbeit ist die Umsetzung eines Skripts, das erzeugt Lärm. In meinem Fall verwende ich dieses Skript von Seph.

Sobald die noise-script geladen wird, können wir beginnen, es auf jedem Bild zu machen, unsere Maus verschieben.

Ich werde mit einem Bild einer Maus, die für die demos, die ich auf position: fixed; mit der a-Klasse .Maus, aber Sie konnte animieren, etwas anderes für Ihre eigenen Projekte.

Also, lassen Sie uns einen Blick auf den code:

// Wir nehmen das Bild aus dem DOM
const el = document.querySelector(‘.Maus’);

// Der render-Funktion aufgerufen wird, auf jedem Bild
die Funktion render () {
// Die variable ist die Menge der Millisekunden seit dem Start unseres Skripts

// Eine noise-Wert basierend auf der verstrichenen Zeit, um einen neuen Wert für jeden frame
// Dieser Lärm-Algorithmus ist die Rückgabe-Werte zwischen [-1, 1], so müssen wir diese zuordnen zu [0, 1], indem zu dem Wert und Division durch 2
const noiseX = (Lärm.simplex2(0, a*0.0005) + 1) / 2;
// Holen wir uns eine weitere noise-Wert für die y-Achse, aber weil wir nicht wollen, den gleichen Wert als x, dann brauchen wir einen anderen Wert für den ersten parameter
const noiseY = (Lärm.simplex2(1, a*0.0005) + 1) / 2;

// Konvertieren der noise-Werte aus [0, 1], um die Größe des Fensters
const x = noiseX * Fenster.innerWidth;
const y = noiseY * Fenster.innerHeight;

// Anwenden der x – & y-Koordinaten auf unser element
el.Stil.transform = `translate(${x}px, ${y}px)`;

// Aufruf der render-Funktion, sobald der browser bereit ist, es zu machen einer Endlosschleife
requestAnimationFrame(render);
}

// Fragen Sie den browser aufrufen, machen Sie zu start unser animation
requestAnimationFrame(render);

Hier ist das Ergebnis, das wir erhalten mit dem obigen script:

Siehe Stift
Virtuelle Benutzer 1 durch Louis Hoebregts (@Mamboleoo)
auf CodePen.

Ermöglichen Interaktivität

Mit dem aktuellen code, wir sind nicht erlaubt zu interagieren mit unserer demo mehr. Fügen wir ein bisschen mehr code zur Nutzung unserer realen position der Maus, wenn wir interagieren mit der demo und wechseln Sie zurück auf eine gefälschte Maus, sobald wir aufhören.

const el = document.querySelector(‘.Maus’);
lassen Sie lastMove = 0;

// Wenn die Maus bewegt wird
Funktion onMouseMove (e) {
// Um die x-und y-Koordinaten
x = e ist.clientX;
y = e ist.clientY;

// Speichern der letzten Zeit verschieben
lastMove = Datum.jetzt();
}

// Update der Maus-position auf x & y
Funktion updateMouse (x, y) {
el.Stil.transform = `translate(${x}px, ${y}px)`;
}

die Funktion render () {
// Überprüfen, wenn der Letzte Zug war mehr als 500ms vor
if (Datum.jetzt() – lastMove > 500) {
// Erzeugen eines fake-Maus position

updateMouse(x, y);
}
}

// Hören Sie auf Maus-Ereignisse
Fenster.addEventListener(‘mousemove’, onMouseMove);

Wenn Sie jetzt die Maus bewegen, die gefälschte Maus Folgen Ihnen. Wenn Sie aufhören, sich zu bewegen für 500ms, die gefälschte Maus wird anfangen sich zu bewegen wieder.

Siehe Stift
Virtuelle Benutzer 3 durch Louis Hoebregts (@Mamboleoo)
auf CodePen.

Angepasste Bewegung

Die Geschwindigkeit der Maus kann aktualisiert werden, indem Sie den Wert des Dritten Parameters. Bisher setzen wir diesen Wert von der verstrichenen Zeit, multipliziert mit 0.0005, die gleich a/2000.

// Definition einer Geschwindigkeit-Verhältnis
const speed = a * 0.0005;
// Nutzen Sie die Geschwindigkeit
const noiseX = (Lärm.simplex3(1, 0, speed) + 1) / 2;

Wir können auch hinzufügen, ein bisschen mehr Zufall in die Richtung ändert, indem mehr Lärm aus seiner position.

lassen Sie random = 0;
die Funktion render () {

// Update die random-Wert
random += 0.1;
// Berechnung der x-zufälligen Versatz auf der Grundlage des Fenster Breite
const randX = Lärm.simplex3(1, 0, random () * Fenster.innerWidth * 0.1;
// Berechnung der y-zufälligen Versatz auf der Grundlage des Fenster-Höhe
const randY = Lärm.simplex3(3, 0, random () * Fenster.innerHeight * 0.1;

// Definition der x – & y-Werte basiert auf (Lärm * Schirm) + Zufälligkeit
const x = noiseX * innerWidth + randX;
const y = noiseY * innerHeight + randY;

}

Spielen Sie mit den Eingaben um zu sehen, wie speed und nach dem Zufallsprinzip ermittelten Werte beeinflussen können, die fake-Bewegung der Maus.

Siehe Stift
Virtuelle Benutzer 4 durch Louis Hoebregts (@Mamboleoo)
auf CodePen.

Mehr Mäuse

Jetzt haben wir erstellt eine gefälschte Maus, warum nicht 500?

Siehe Stift
Virtuelle Benutzer 5 durch Louis Hoebregts (@Mamboleoo)
auf CodePen.

Jetzt nutze ich diesen trick für fast alle meine demos. Ich denke, es ist wirklich cool, die Möglichkeit, um ein Projekt ohne Verwendung einer video-oder gezwungen wird sich zu bewegen die Maus nach dem Zufallsprinzip, während Sie versucht zu sprechen über die demo.

Wenn Sie irgendwelche Fragen oder Anmerkungen, bitte einen Kommentar unten hinterlassen oder ping mich an .