Het Simuleren Van De Bewegingen Van De Muis

0
41

Als je ooit hebt gehad om een interactieve animatie tijdens een live-talk of een klasse, dan mag je weten dat het niet altijd gemakkelijk om te communiceren met uw dia ‘ s en tijdens het praten.

Dit gebeurde bij mij toen ik het nodig om dit aan te tonen deeltjes demo aan mijn studenten. Ik wilde niet blijven naast mijn computer om te bewegen muis om te pronken met de demo.

Zie de Pen
Deeltjes (verplaatsen) door Louis Hoebregts (@Mamboleoo)
op CodePen.

Als u niet samen met het iframe, zult u niets zien, maar een lege ruimte. Zodra u begint met het bewegen van uw muis, of met uw vinger, en u kunt zien dat de animatie.

Om die reden heb ik dezelfde demo, maar ik gebruikte een aantal extra code te simuleren iemand de interactie met de demo.

Zie de Pen
Deeltjes (nep) door Louis Hoebregts (@Mamboleoo)
op CodePen.

Simplex geluid

De truc hier is om het gebruik van een algoritme dat zal genereren “glad” willekeurige posities. Als we gebruik maken van een klassieke random-functie, de nep muis op een puur willekeurige positie op elk frame. Wat we willen is om een positie op elk frame dat direct gekoppeld is aan de vorige. Gelukkig, er is een techniek die precies doet wat we nodig hebben: Simplex ruis (of meer algemeen bekend als Perlin noise).

Laten we een kijkje nemen op deze afbeelding waar de hoogte van elke kolom is gedefinieerd met willekeurige waarden op de top, en de waarden van de Simplex-ruis-algoritme hieronder.

U kunt snel merken dat de onderste grafiek lijkt veel soepeler omdat elke kolom hoogte is verbonden met de vorige. Deze grafieken zijn slechts het tonen van één dimensie (de x-as van links naar rechts), maar met Simplex geluid kunt u de waarden in veelvouden afmetingen. In ons geval moeten we de twee dimensies voor de X-en Y-coördinaten van de nep muis we simuleren.

Als u meer geïnteresseerd om te weten hoe Simplex geluid werkt, bekijk dan de video “I. 5: Perlin Noise – De Aard van de Code” door Daniel Shiffman

Voor geluid coördinaten

Het eerste wat we nodig hebben om onze demo werken is voor de uitvoering van een script dat veroorzaakt ruis. In mijn geval, ik gebruik dit script door Seph.

Zodra het geluid script wordt geladen, kunnen we beginnen te gebruiken op elk frame om de muis te verplaatsen.

Ik zal met behulp van een afbeelding van een muis voor de demo ‘ s die ik op position: fixed; met een klasse .muis, maar je kon animeren iets anders voor uw eigen projecten.

Dus, laten we een kijkje nemen in de code:

// We halen de afbeelding van de DOM
const el = document.querySelector(‘.muis’);

// De render functie wordt aangeroepen op elk frame
functie render () {
// De variabele is het aantal milliseconden sinds we begonnen met onze script

// Een geluid waarde gebaseerd op de verstreken tijd is om een nieuwe waarde op elk frame
// Dit geluid algoritme is het retourneren van waarden tussen [-1, 1], dus we moeten ze toewijzen aan [0, 1] door het toevoegen van de ene naar de waarde en delen door 2
const noiseX = (ruis.simplex2(0, a*0.0005) + 1) / 2;
// We krijgen een ander geluid waarde voor de y-as, maar omdat we willen niet dezelfde waarde dan x, gebruiken we een andere waarde voor de eerste parameter
const noiseY = (ruis.simplex2(1, a*0.0005) + 1) / 2;

// Converteer de ruis waarden uit [0, 1] om de grootte van het venster
const x = noiseX * venster.innerWidth;
const y = noiseY * venster.innerHeight;

// Het toepassen van de x-en y-coördinaten op ons element
el.stijl.transform = `vertalen(${x}px, ${y}px)`;

// Roep de render functie wanneer de browser is klaar om het te maken een oneindige lus
requestAnimationFrame(render);
}

// Vraag de browser om een oproep weer te beginnen met onze animatie
requestAnimationFrame(render);

Hier is het resultaat dat we krijgen met het bovenstaande script:

Zie de Pen
Virtuele gebruiker 1 door Louis Hoebregts (@Mamboleoo)
op CodePen.

Interactie toelaten

Met de huidige code in, wij zijn niet toegestaan te communiceren met onze demo meer. Nu nog een beetje meer code om onze echte muis positie wanneer we de interactie met de demo-en terug te schakelen naar een nep muis zo snel als we stoppen.

const el = document.querySelector(‘.muis’);
laat lastMove = 0;

// Wanneer de muis wordt verplaatst
functie onMouseMove (e) {
// Voor de x-en y-coördinaten
x = e.clientX;
y = e.clientY;

// Sla de laatste tijd verplaatsen
lastMove = Date.nu();
}

// Update van de muis positie gebaseerd op x & y
functie updateMouse (x, y) {
el.stijl.transform = `vertalen(${x}px, ${y}px)`;
}

functie render () {
// Check als laatste stap werd meer dan 500ms geleden
if (Date.nu() – lastMove > 500) {
// Genereer een nep muis positie

updateMouse(x, y);
}
}

// Beluister de muis evenementen
venster.addEventListener(‘mousemove’, onMouseMove);

Nu, als u met uw muis, de nep muis zal volgen jou. Als u stoppen met het verplaatsen van voor 500ms, de nep muis start weer in beweging.

Zie de Pen
Virtuele gebruiker 3 door Louis Hoebregts (@Mamboleoo)
op CodePen.

Aangepaste beweging

De snelheid van de muis kan worden bijgewerkt door het veranderen van de waarde van de derde parameter. Zo ver, we zijn het instellen van deze waarde door de verstreken tijd vermenigvuldigd met 0.0005, wat gelijk is aan een/2000.

// Definieer een snelheid verhouding
const toer = a * 0.0005;
// Gebruik de speed
const noiseX = (ruis.simplex3(1, 0, speed) + 1) / 2;

We kunnen ook het toevoegen van een beetje meer willekeur in de veranderingen van richting door het toevoegen van meer ruis van zijn positie.

laat random = 0;
functie render () {

// Update de willekeurige waarde
willekeurige += 0.1;
// Het berekenen van een willekeurige x offset gebaseerd op het raam de breedte
const randX = ruis.simplex3(1, 0, random) * venster.innerWidth * 0.1;
// Het berekenen van een willekeurige y offset gebaseerd op het raam hoogte
const randY = ruis.simplex3(3, 0, random) * venster.innerHeight * 0.1;

// Definieer de x en de y-waarden op basis van (ruis * u kunt het scherm) + willekeur
const x = noiseX * innerWidth + randX;
const y = noiseY * innerHeight + randY;

}

Spelen met de ingangen om te zien hoe de snelheid en willekeurig berekende waarden kunnen van invloed zijn op de nep-muis-beweging.

Zie de Pen
Virtual user 4 door Louis Hoebregts (@Mamboleoo)
op CodePen.

Meer muizen

Nu hebben we een nep muis, waarom niet 500 van hen?

Zie de Pen
Virtuele gebruiker 5 door Louis Hoebregts (@Mamboleoo)
op CodePen.

Nu gebruik ik deze truc voor bijna al mijn demo ‘ s. Ik vind het echt cool om te worden in staat om een project weergeven zonder het gebruik van een video of gedwongen te houden en de muis te bewegen willekeurig terwijl het proberen om te praten over de demo.

Als u nog vragen of opmerkingen hebben, laat dan een reactie hieronder of ping me op .