Simulating Mouse Movement

Wenn Sie jemals eine interaktive Animation während eines Live-Vortrags oder einer Klasse präsentieren mussten, wissen Sie vielleicht, dass es nicht immer einfach ist, mit Ihren Folien zu interagieren, während Sie sprechen.

Das ist mir passiert, als ich meinen Studenten diese Partikel-Demo zeigen musste. Ich wollte nicht neben meinem Computer sitzen und meine Maus bewegen müssen, um die Demo zur Schau zu stellen.

Siehe den Pen
Partikel (bei Bewegung) von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Wenn Sie nicht mit dem iframe interagieren, sehen Sie nichts als einen leeren Raum. Sobald Sie beginnen, Ihre Maus oder Ihren Finger zu bewegen, können Sie die Animation sehen.

Aus diesem Grund habe ich die gleiche Demo erstellt, aber mit etwas zusätzlichem Code simuliert, dass jemand mit der Demo interagiert.

Siehe den Pen
Partikel (simuliert) von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Simplex-Rauschen

Der Trick hierbei ist die Verwendung eines Algorithmus, der „glatte“ zufällige Positionen erzeugt. Wenn wir eine klassische Zufallsfunktion verwenden, befindet sich die simulierte Maus bei jedem Frame an einer rein zufälligen Position. Wir möchten jedoch eine Position bei jedem Frame haben, die direkt mit der vorherigen verknüpft ist. Glücklicherweise gibt es eine Technik, die genau das tut, was wir brauchen: Simplex-Rauschen (oder bekannter als Perlin-Rauschen).

Betrachten wir dieses Bild, bei dem die Höhe jeder Spalte mit Zufallswerten oben und Werten aus dem Simplex-Rausch-Algorithmus unten definiert ist.

Sie können schnell feststellen, dass der untere Graph viel glatter aussieht, da jede Spaltenhöhe mit der vorherigen verbunden ist. Diese Graphen zeigen nur eine Dimension (die x-Achse, von links nach rechts), aber mit Simplex-Rauschen können Sie Werte in mehreren Dimensionen erhalten. In unserem Fall benötigen wir zwei Dimensionen für die X- und Y-Koordinaten der simulierten Maus, die wir nachahmen.

Wenn Sie mehr darüber erfahren möchten, wie Simplex-Rauschen funktioniert, schauen Sie sich das Video „I.5: Perlin Noise – The Nature of Code“ von Daniel Shiffman an.

Rauschkoordinaten abrufen

Das Erste, was wir brauchen, um unsere Demo zum Laufen zu bringen, ist ein Skript, das Rauschen generiert. In meinem Fall verwende ich dieses Skript von Seph.

Sobald das Rauschskript geladen ist, können wir es bei jedem Frame verwenden, um unsere Maus zu bewegen.

Ich werde ein Bild einer Maus für die Demos verwenden, die ich mit position: fixed; und der Klasse .mouse platziere, aber Sie könnten auch etwas anderes für Ihre eigenen Projekte animieren.

Schauen wir uns also den Code an.

// We retrieve the image from the DOM
const el = document.querySelector('.mouse');

// The render function is called on every frame
function render (a) {
  // The a variable is the amount of milliseconds since we started our script
  
  // Get a noise value based on the elapsed time to get a new value on every frame
  // This noise algorithm is returning values between [-1, 1] so we need to map them to [0, 1] by adding one to the value and dividing it by 2
  const noiseX = (noise.simplex2(0, a*0.0005) + 1) / 2;
  // We get another noise value for the y axis but because we don't want the same value than x, we need to use another value for the first parameter
  const noiseY = (noise.simplex2(1, a*0.0005) + 1) / 2;
  
  // Convert the noise values from [0, 1] to the size of the window
  const x = noiseX * window.innerWidth;
  const y = noiseY * window.innerHeight;
  
  // Apply the x & y coordinates on our element
  el.style.transform = `translate(${x}px, ${y}px)`;
  
  // Call the render function once the browser is ready to make it an infinite loop
  requestAnimationFrame(render);
}

// Ask the browser to call render to start our animation
requestAnimationFrame(render);

Hier ist das Ergebnis, das wir mit dem obigen Skript erhalten.

Siehe den Pen
Virtueller Benutzer 1 von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Interaktivität zulassen

Mit dem aktuellen Code dürfen wir nicht mehr mit unserer Demo interagieren. Fügen wir etwas mehr Code hinzu, um unsere reale Mausposition zu verwenden, wenn wir mit der Demo interagieren, und wechseln Sie zurück zu einer simulierten Maus, sobald wir aufhören.

const el = document.querySelector('.mouse');
let lastMove = 0;

// When the mouse is being moved
function onMouseMove (e) {
  // Get the x and y coordinates
  x = e.clientX;
  y = e.clientY;
  
  // Save the last move time
  lastMove = Date.now();
}

// Update the mouse position based on x & y
function updateMouse (x, y) {
  el.style.transform = `translate(${x}px, ${y}px)`;
}

function render (a) {
  // Check if last move was more than 500ms ago
  if (Date.now() - lastMove > 500) {
    // Generate a fake mouse position
    ...
    updateMouse(x, y);
  }
}

// Listen to mouse events
window.addEventListener('mousemove', onMouseMove);

Wenn Sie jetzt Ihre Maus bewegen, wird die simulierte Maus Ihnen folgen. Wenn Sie sich 500 ms lang nicht bewegen, beginnt die simulierte Maus wieder zu bewegen.

Siehe den Pen
Virtueller Benutzer 3 von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Angepasste Bewegung

Die Geschwindigkeit der Maus kann durch Änderung des Werts des dritten Parameters aktualisiert werden. Bisher setzen wir diesen Wert, indem wir die vergangene Zeit mit 0,0005 multiplizieren, was gleich a/2000 ist.

// Define a speed ratio
const speed = a * 0.0005;
// Use the speed
const noiseX = (noise.simplex3(1, 0, speed) + 1) / 2;

Wir können auch etwas mehr Zufälligkeit in die Richtungswechsel einbringen, indem wir mehr Rauschen von der Position hinzufügen.

let random = 0;
function render (a) {
  ...
  // Update the random value
  random += 0.1;
  // Compute a x random offset based on the window width
  const randX = noise.simplex3(1, 0, random) * window.innerWidth * 0.1;
  // Compute a y random offset based on the window height
  const randY = noise.simplex3(3, 0, random) * window.innerHeight * 0.1;
  
  // Define the x & y values based on (noise * screen) + randomness
  const x = noiseX * innerWidth + randX;
  const y = noiseY * innerHeight + randY;
  ...
}

Spielen Sie mit den Eingaben herum, um zu sehen, wie Geschwindigkeit und zufällig berechnete Werte die Bewegung der simulierten Maus beeinflussen können.

Siehe den Pen
Virtueller Benutzer 4 von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Mehr Mäuse

Nachdem wir eine simulierte Maus erstellt haben, warum nicht 500 davon erstellen?

Siehe den Pen
Virtueller Benutzer 5 von Louis Hoebregts (@Mamboleoo)
auf CodePen.

Ich verwende diesen Trick jetzt für fast alle meine Demos. Ich finde es wirklich cool, ein Projekt anzeigen zu können, ohne ein Video verwenden zu müssen oder gezwungen zu sein, die Maus zufällig zu bewegen, während ich über die Demo spreche.

Wenn Sie Fragen oder Anmerkungen haben, hinterlassen Sie bitte einen Kommentar unten oder schreiben Sie mir auf Twitter.