Simulera Musen För Rörelse

0
26

Om du någonsin har haft för att visa en interaktiv animation under en direktsänd talk eller en klass, då kan ni veta att det är inte alltid lätt att interagera med dina bilder och samtidigt som man talar.

Detta hände mig när jag behövde för att visa detta partiklar demo till mina elever. Att jag inte vill bo bredvid min dator för att flytta min mus för att visa upp demo.

Se Pennan
Partiklar (flyttar) av Louis Hoebregts (@Mamboleoo)
på CodePen.

Om du inte interagera med iframe, du kommer att se något annat än ett tomt utrymme. Så snart du börjar att flytta din mus eller ditt finger, som du kan se animeringen.

Det är anledningen till att jag skapade samma demo, men jag använde lite extra kod för att simulera att någon interagerar med demo.

Se Pennan
Partiklar (falska) av Louis Hoebregts (@Mamboleoo)
på CodePen.

Simplex noise

Tricket är att använda en algoritm som kommer att generera en “slät” slumpmässiga positioner. Om vi använder en klassisk random-funktionen, den falska musen kommer att vara på en rent slumpmässig position på varje bildruta. Vad vi vill är att ha en position på varje bildruta som är direkt kopplad till den föregående. Tack och lov, det är en teknik som gör precis vad vi behöver: Simplex noise (eller mer känd som Perlin-brus).

Låt oss ta en titt på den här bilden där höjden av varje kolumn är definierad med slumpmässiga värden på topp, och värden från Simplex noise algoritmen nedan.

Du kan snabbt att märka att den nedre grafen verkar mycket smidigare eftersom varje kolumn höjd är ansluten till tidigare. Dessa diagram är bara för att visa en dimension (x-axeln, från vänster till höger) men med Simplex noise du kan få värden i multiplar dimensioner. I vårt fall, vi kommer att behöva två dimensioner för X-och Y-koordinater för den falska musen för vi är simulering.

Om du är mer intresserad av att veta hur Simplex noise fungerar, kolla in videon “I. 5: Perlin-Brus – Den Typ av Kod” av Daniel Shiffman

Få buller koordinater

Det första vi måste göra vår demo arbete är att genomföra ett skript som genererar buller. I mitt fall, jag använder det här skriptet genom att Seph.

När buller skriptet laddas, kan vi börja använda det på varje bildruta för att göra våra flytta musen.

Jag kommer att använda en bild av en mus för demos som jag satte på position: fixed; med en klass .musen, men du kan animera något annat för dina egna projekt.

Så, låt oss ta en titt på koden:

// Vi hämta bilden från DOM
const el = dokument.querySelector(‘.mus’);

// Render-funktionen kallas på varje bildruta
funktionen gör (en) {
// En variabel är mängden millisekunder sedan vi började vårt skript

// Hämta en ljud-värdet baseras på förfluten tid för att få ett nytt värde på varje bildruta
// Detta buller algoritmen returnerar ett värde mellan [-1, 1] så vi behöver mappa dem till [0, 1] genom att lägga till en till värde och dividera det med 2
const noiseX = (buller.simplex2(0, a*0.0005) + 1) / 2;
// Vi få en annan buller värdet för y-axeln, men eftersom vi inte vill ha samma värde än x, måste vi använda ett annat värde för den första parametern
const jag = (buller.simplex2(1, a*0.0005) + 1) / 2;

// Konvertera buller värden från [0, 1] för att storleken på fönstret
const x = noiseX * fönstret.innerWidth;
const y = jag * fönstret.innerHeight;

// Använd x – & y-koordinater på våra element
el.style.förvandla = ” översätta(${x}px, ${y}px)`;

// Ring göra funktion när webbläsaren är beredd att göra det en oändlig loop
requestAnimationFrame(render);
}

// Fråga webbläsaren för att ringa göra för att börja vår animation
requestAnimationFrame(render);

Här är resultatet vi får med ovanstående skript:

Se Pennan
Virtuella användare 1 av Louis Hoebregts (@Mamboleoo)
på CodePen.

Tillåter interaktivitet

Med nuvarande kod är inte tillåtet att interagera med våra demo längre. Låt oss lägga lite mer kod för att använda vår riktig mus position när vi interagerar med demo och byta tillbaka till en falsk musen så fort vi stannar.

const el = dokument.querySelector(‘.mus’);
låt lastMove = 0;

// När musen flyttas
funktion onMouseMove (e) {
// Get the x-och y-koordinater
x = e.clientX;
y = e.clientY;

// Spara den sista flytten tid
lastMove = Datum.nu();
}

// Uppdatering musen position baserat på x & y
funktion updateMouse (x, y) {
el.style.förvandla = ” översätta(${x}px, ${y}px)`;
}

funktionen gör (en) {
// Kontrollera om förra flytten var mer än 500ms sedan
om (Datum.nu() – lastMove > 500) {
// Skapa en falsk position musen

updateMouse(x, y);
}
}

// Lyssna på mus händelser
fönster.addEventListener(‘mousemove’, onMouseMove);

Nu, om du flyttar musen, den falska musen kommer att följa din. Om du slutar att flytta till 500ms, den falska musen för att börja röra sig igen.

Se Pennan
Virtuella användare 3 av Louis Hoebregts (@Mamboleoo)
på CodePen.

Anpassade för rörelse

Hastigheten på musen kan uppdateras genom att ändra värdet på den tredje parametern. Så långt, att vi sätter det här värdet genom att ta förfluten tid multiplicerat med 0.0005, som är lika med a/2000.

// Ange en hastighet förhållandet
const speed = a * 0.0005;
// Använd den fart som
const noiseX = (buller.simplex3(1, 0, hastighet) + 1) / 2;

Vi kan också lägga till lite mer slumpmässighet i ändringarna av riktning genom att lägga till mer buller från sin position.

låt slumpmässigt = 0;
funktionen gör (en) {

// Uppdatering slumpmässigt värde
slumpmässiga += 0.1;
// Beräknar ett x random offset baserat på fönstrets bredd
const randX = buller.simplex3(1, 0, slumpvis uppspelning) * fönstret.innerWidth * 0.1;
// Beräknar en y slumpmässiga offset baserat på fönstret höjd
const randY = buller.simplex3(3, 0, slumpvis uppspelning) * fönstret.innerHeight * 0.1;

// Ange x-och y-värden som baserar sig på (buller * skärm) + slumpmässighet
const x = noiseX * innerWidth + randX;
const y = jag * innerHeight + randY;

}

Spela med ingångar för att se hur hastigheten och slumpmässigt beräknade värden kan påverka den falska musen för rörelse.

Se Pennan
Virtual user 4 av Louis Hoebregts (@Mamboleoo)
på CodePen.

Fler möss

Nu när vi har skapat en falsk mus, varför inte skapa 500 av dem?

Se Pennan
Virtuella användare 5 av Louis Hoebregts (@Mamboleoo)
på CodePen.

Jag nu använda det här tricket för nästan alla mina demos. Jag tycker det är riktigt coolt att kunna visa ett projekt utan att använda en video eller tvingas hålla flytta musen slumpmässigt samtidigt som man försöker att prata om demo.

Om du har några frågor eller kommentarer, vänligen lämna en kommentar nedan, eller pinga mig på .