Simulere Musen For Bevegelse

0
19

Hvis du noensinne har hatt for å vise en interaktiv animasjon under en live snakke eller en klasse, så du kan vite at det er ikke alltid lett å arbeide med lysbilder og mens du snakker.

Dette skjedde til meg når jeg trengte å vise denne partikler demo til mine elever. Jeg hadde ikke lyst til å bo ved siden av datamaskinen min for å flytte musen for å vise frem den demo.

Se Penn
Partikler (trekk) av Louis Hoebregts (@Mamboleoo)
på CodePen.

Hvis du ikke bruker iframe, vil du ikke se annet enn en tom plass. Så snart du begynner å bevege musen eller fingeren din, kan du se animasjonen.

Dette er grunnen til at jeg opprettet den samme demoen, men jeg brukte litt ekstra kode for å simulere noen samspill med demo.

Se Penn
Partikler (falske) av Louis Hoebregts (@Mamboleoo)
på CodePen.

Simplex-støy

Trikset her er å bruke en algoritme som genererer “glatt” tilfeldige posisjoner. Hvis vi bruker en klassisk random-funksjon, den falske mus vil være på et rent tilfeldig posisjon på hver ramme. Det vi ønsker er å ha en posisjon på hver ramme som er direkte knyttet til den forrige. Heldigvis, det er en teknikk som gjør akkurat hva vi trenger: Simplex-støy (eller mer kjent som Perlin noise).

La oss ta en titt på dette bildet hvor høyden av hver kolonne er definert med tilfeldige verdier på toppen, og verdier fra Simplex-støy-algoritmen nedenfor.

Du kan raskt legge merke til at den nederste grafen virker mye jevnere fordi hver kolonne høyde er koblet til den forrige. Disse grafene er bare viser én dimensjon (x-aksen, fra venstre til høyre), men med Simplex-støy du kan få verdier i flere dimensjoner. I vårt tilfelle, vil vi trenger to mål for X-og Y-koordinatene til de falske mus vi er å simulere.

Hvis du er mer interessert i å vite hvordan Simplex-støy fungerer, sjekk ut videoen “I. 5: Perlin Noise – Arten av Koden” av Daniel Shiffman

Få støy koordinater

Det første vi må gjøre vår demo-arbeid er å implementere et skript som genererer støy. I mitt tilfelle, jeg bruker dette skriptet ved å Seph.

Når støy skript som er lastet inn, vi kan begynne å bruke det på hver ramme for å gjøre vår mus flytte.

Jeg vil bruke et bilde av en mus for demoer som jeg satt på stilling: fast; med en klasse .mus, men du kan animere noe annet for dine egne prosjekter.

Så, la oss ta en titt på koden:

// Vi hente bildet fra DOM
const el = – dokument.querySelector(‘.mus’);

// Gjengi funksjonen kalles på hver ramme
function render () {
// En variabel er antall millisekunder siden vi startet vår script

// Få en støy verdi basert på medgått tid å få en ny verdi på hver ramme
// Denne støyen algoritmen er returnerer verdier mellom [-1, 1] slik at vi trenger å tilordne dem til [0, 1] ved å legge til en verdi og dele det med 2
const noiseX = (støy.simplex2(0, a*0.0005) + 1) / 2;
// Vi få en annen støy verdi for y-aksen, men fordi vi ikke vil ha samme verdi enn x, må vi bruke en annen verdi for den første parameteren
const noiseY = (støy.simplex2(1, a*0.0005) + 1) / 2;

// Konverter støy verdier fra [0, 1] til størrelsen på vinduet
const x = noiseX * vindu.innerWidth;
const y = noiseY * vindu.innerHeight;

// Gjelder x-og y-koordinater på våre element
el.stil.forvandle = `oversette(${x}px, ${y}px)`;

// Ringe gjengi funksjon når nettleseren er klar til å gjøre det i en uendelig løkke
requestAnimationFrame(render);
}

// Stille inn din nettleser til å ringe gjengi å starte vår animasjon
requestAnimationFrame(render);

Her er resultatet vi får med skriptet ovenfor:

Se Penn
Virtuell bruker 1 av Louis Hoebregts (@Mamboleoo)
på CodePen.

La interaktivitet

Med den gjeldende koden, og vi har ikke lov til å samhandle med vår demo lenger. La oss legge til litt mer kode for å bruke vår ekte mus posisjon når vi samhandler med demo og gå tilbake til en falsk musen så snart vi stoppe.

const el = – dokument.querySelector(‘.mus’);
la lastMove = 0;

// Når musen flyttes
funksjonen onMouseMove (e) {
// Komme i x-og y-koordinater
x = e.clientX;
y = – e.clientY;

// Lagre siste trekk tid
lastMove = Dato.nå();
}

// Oppdater musen posisjon basert på x & y
funksjonen updateMouse (x, y) {
el.stil.forvandle = `oversette(${x}px, ${y}px)`;
}

function render () {
// Sjekker om siste trekk var mer enn 500ms siden
hvis (Dato.nå() – lastMove > 500) {
// Generer en falsk mus posisjon

updateMouse(x, y);
}
}

// Lytte til mus hendelser
vinduet.addEventListener(‘mousemove’, onMouseMove);

Nå, hvis du beveger musen, den falske mus vil følge deg. Hvis du slutter å bevege seg for 500ms, den falske mus vil begynne å bevege seg igjen.

Se Penn
Virtuell bruker 3 av Louis Hoebregts (@Mamboleoo)
på CodePen.

Tilpassede bevegelser

Hastigheten på musen kan bli oppdatert ved å endre verdien av den tredje parameteren. Så langt, vi setter denne verdien ved å ta den tiden som er gått multiplisert med 0.0005, som er lik a/2000.

// Definerer en hastighet
const hastighet = a * 0.0005;
// Fart
const noiseX = (støy.simplex3(1, 0, hastighet) + 1) / 2;

Vi kan også legge til litt mer tilfeldigheten i endring av retning ved å legge til mer støy fra sin posisjon.

la tilfeldig = 0;
function render () {

// Oppdatere tilfeldig verdi
tilfeldig += 0.1;
// Beregne x tilfeldig offset basert på vinduet bredde
const randX = støy.simplex3(1, 0, tilfeldig) * vindu.innerWidth * 0.1;
// Beregne y tilfeldig offset basert på vinduet høyde
const randY = støy.simplex3(3, 0, tilfeldig) * vindu.innerHeight * 0.1;

// Definerer x-og y-verdier basert på (støy * skjermen) + tilfeldigheten
const x = noiseX * innerWidth + randX;
const y = noiseY * innerHeight + randY;

}

Spille med innganger for å se hvordan hastigheten og tilfeldig beregnede verdier kan påvirke falske musen bevegelse.

Se Penn
Virtuell bruker 4 av Louis Hoebregts (@Mamboleoo)
på CodePen.

Flere mus

Nå som vi har opprettet en falsk mus, hvorfor ikke lage 500 av dem?

Se Penn
Virtuell bruker 5 av Louis Hoebregts (@Mamboleoo)
på CodePen.

Jeg nå bruke dette trikset, for nesten alle mine demoer. Jeg tror det er veldig kult å være i stand til å vise et prosjekt uten å bruke en video eller blir tvunget til å bevege musen tilfeldig mens du prøver å snakke om demo.

Hvis du har noen spørsmål eller kommentarer, kan du legge igjen en kommentar nedenfor eller ping meg på .