Simulare il tremore (ad esempio dalla malattia di Parkinson) con il mouse su una pagina Web?


204

Sto lavorando per una fondazione che sensibilizzi sull'accessibilità in Internet. Per una presentazione, vogliamo offrire un piccolo laboratorio che simuli diverse disabilità / menomazioni alle persone. Questo viene fatto tramite un sito Web creato appositamente per questa presentazione.

Una delle menomazioni dimostrate sta avendo un tremore, il che significa sperimentare movimenti della mano traballanti e difficili da controllare. Con questa menomazione, è molto difficile spostare esattamente il cursore del mouse e premere il pulsante del mouse mentre il mouse si trova su un collegamento. Sia alcune persone anziane che le persone con malattie, ad esempio il Parkinson, possono soffrire di tremore.

Ora vorrei in qualche modo spostare il cursore del mouse in modo imprevedibile, quindi è molto difficile per le persone fare clic su un piccolo pulsante. Poiché JavaScript non consente di spostare direttamente il cursore del mouse, sto cercando altri modi per raggiungere questo obiettivo. Ho avuto le seguenti idee:

  • Utilizzo di un driver / utilità del mouse che simula lo scuotimento del mouse.
  • Nascondi il cursore del mouse tramite CSS, posiziona un'animazione GIF di un cursore del mouse che si agita al posto del cursore originale (con JavaScript), quindi fai clic sul link target solo ogni pochi secondi per circa un secondo. Ciò darebbe almeno la sensazione di fare sempre clic nel momento sbagliato.

Mentre la prima idea sarebbe piuttosto interessante, non sono riuscito a trovare uno strumento come questo, sia per Mac che per Windows. E non ho alcuna abilità nel programmare una cosa del genere da solo.

La seconda idea sembra un po 'goffa, ma otterrebbe l'effetto desiderato, credo.

Qualcuno ha un'altra idea?


35
In realtà puoi controllare la posizione del cursore (beh, uno emulato) con l' API di blocco puntatore
Stuart P. Bentley

2
Prova a cercare developer.mozilla.org/en-US/docs/Web/API/… . Il collegamento diretto alla demo è mdn.github.io/pointer-lock-demo . Finché è accettabile per il tuo scopo dire agli utenti il ​​clic su una tela e consentire alla pagina di disabilitare il cursore del mouse, potresti voler basare il tuo codice su questo
Aristocrate

5
La stessa domanda aumenta la consapevolezza tra noi sviluppatori web. Grazie per avermelo chiesto! Quanto pensi che dovrebbe essere grande un pulsante per essere cliccabile?
Ideogram,

4
Solo un livello di tremore: ci sono due tipi di base - "tremore essenziale" e tremore di Parkinson - e sono completamente diversi. Il "tremore essenziale" (che non è puramente una condizione degli anziani), è un tremore "intenzionale", il che significa che è evidente solo quando l'individuo sta cercando di fare qualcosa, e peggiora tanto più l'individuo cerca di controllarlo. Il tremore del PD, d'altra parte, si verifica principalmente a riposo, e il tremore spesso non è evidente quando l'individuo sta cercando di fare qualcosa (anche se la rigidità dovuta al PD potrebbe essere presente).
Hot Licks

2
Ho pubblicato una versione di Linux che utilizza xdotool per controllare il mouse, ma esiste uno strumento simile per Windows chiamato autoit. Sembra piuttosto semplice e c'è anche un tag per esso [autoit]. Inoltre sembra che tu abbia bisogno di 2 versioni. Uno che scuote di più fino a quando inizia il movimento e poi si calma un po 'mentre l'altro è relativamente stabile fino all'inizio del movimento.
technosaurus

Risposte:


148

Ho fatto una breve demo di qualcosa su cui spero che tu possa essere in grado di basare il tuo codice, usando l' API di blocco puntatore .

Ho modificato questo repository pointer-lock-demo modificato questo e l'ho modificato per aggiungere un elemento di movimento casuale.

Ecco il link alla mia pagina GitHub: https://aristocrates.github.io/pointer-lock-demo
Ed ecco il link al mio repository: https://github.com/aristocrates/pointer-lock-demo

Il codice javascript di importanza è contenuto in app.js , nel canvasLoop(e)metodo.

L'unica cosa che ho cambiato dalla demo originale è stata dopo le righe

x += movementX * 2;
y += movementY * 2;

Ho aggiunto due righe per rappresentare il movimento casuale:

x += Math.floor(Math.random()*3 - 1);
y += Math.floor(Math.random()*3 - 1);

Ci sono ancora molte cose che potresti migliorare, ma speriamo che questo possa aiutarti a iniziare.


36
Come nota nella funzionalità, il movimento casuale non è lo stesso di una mano tremante. Con movimenti casuali, il puntatore può spostarsi sullo schermo. Con una mano tremante il puntatore vibrerà attorno a un punto centrale.
zzzzBov,

5
Vale la pena notare che il supporto del browser per Pointer Lock Api non è eccezionale: questo non funzionerà in Internet Explorer o Safari.
Steve Sanders,

3
Non ho trovato il tempo di provarlo da solo, ma forse lo sai questo: l'API di blocco puntatore funziona anche al di fuori di un'area di disegno? O è limitato a una tela?
Joshua Muheim,

8
Un'implementazione più realistica traccia la posizione "reale" del cursore e si sposta in modo casuale all'interno di un cerchio attorno a quello, ma potrebbe essere troppo complesso.
tckmn,

1
@Chris Chrome ora lancia Blocked pointer lock on an element because the element's frame is sandboxed and the 'allow-pointer-lock' permission is not set.. Sembra che jsFiddle stia incorporando il contenuto in un frame sandbox (ovvero non consente il blocco del puntatore tramite <iframe sandbox="webkit-allow-pointer-lock">, consultare i documenti ). Prova a mettere l'esempio in un'unica pagina, non sandbox.
ComFreek,

36

Modo non javascript

In realtà, mi piacciono le soluzioni, che possono essere basate su javascript, dal momento che sono più probabilmente legate al web, e buone probabilità sono - indipendenti dal sistema operativo. Tuttavia, stavo pensando: come risolvere il problema per tutti i browser, poiché le soluzioni javascript, in questo caso, saranno difficili da regolare per tutti i browser possibili (non sono sicuro che sia possibile).

Quindi, come hai già detto, esiste un altro modo, ovvero emulare il comportamento a livello di sistema operativo. Questo ha anche un altro vantaggio: potresti essere sicuro che per il browser sembra al 100% come era umano (perché, beh, è ​​il driver che sta inviando il segnale). Quindi è possibile utilizzare soluzioni basate su driver / dispositivo con qualsiasi browser (o anche in situazioni, quando javascript è disabilitato).

Linux

Sfortunatamente, coinvolgere il driver / dispositivo provoca immediatamente la dipendenza del sistema operativo. Quindi per ogni sistema operativo avrai bisogno della tua soluzione. In questo post mi concentro sulla soluzione basata su Linux (quindi, funzionerà con Linux) e Mac OS un po '. Con Linux, è possibile scrivere eventi sul dispositivo in modo esplicito, quindi di seguito è riportato un esempio di funzione con loop principale:

int main()
{
    struct input_event event, event_end;

    int  fd = open("/dev/input/event4", O_RDWR);
    long ma = getInteger("Enter max amplitude [points, 0..50]: ", 0, 50);
    long ta = getInteger("Enter max wait time [usecs , 0..200000]: ", 0, 200000);
    if (fd < 0)
    {
        printf("Mouse access attempt failed:%s\n", strerror(errno));
        return -1;
    }
    memset(&event, 0, sizeof(event));
    memset(&event, 0, sizeof(event_end));
    gettimeofday(&event.time, NULL);
    event.type = EV_REL;
    gettimeofday(&event_end.time, NULL);
    event_end.type = EV_SYN;
    event_end.code = SYN_REPORT;
    event_end.value = 0;
    while(1)
    {
        event.code  = rand() % 2 ? REL_X : REL_Y;
        event.value = (rand() % 2 ? -1 : 1) * randomTill(ma);
        write(fd, &event, sizeof(event));
        write(fd, &event_end, sizeof(event_end));
        usleep(randomTill(ta));
    }
    close(fd);
    return 0;
}

Il mio codice completo per il problema è disponibile qui . Il programma chiederà l'ampiezza del "tremore" e la sua frequenza (quindi, quante volte in micro-secondi sono tra i "tremori"). Per emulare la situazione, costringerà il mouse a muoversi casualmente per i 0..Xpunti in direzione casuale (su-giù-sinistra-fondo) e ad attendere casualmente i 0..Ymicro-secondi fino al prossimo "tremore", vi Xè ampiezza di "tremore" eY è la frequenza di "tremore "

Un'altra cosa potrebbe essere quella di adattare il programma al proprio sistema. Il programma è "fittizio" e non è in grado di rilevare il mouse da solo, quindi "/dev/input/event4"è codificato. Per capire quale potrebbe essere l'identificatore del tuo sistema, puoi provare:

user@host:/path$ cat /proc/bus/input/devices | grep mouse
H: Handlers=mouse0 event3 
H: Handlers=mouse1 event4

E così le possibilità sono "event3"e "event4"- ma per il tuo sistema che potrebbero avere altri valori. Quindi, se è diverso da quello attualmente utilizzato nel codice C, basta cambiare la riga corrispondente (quindi, allineare int fd = open("/dev/input/event4", O_RDWR);e posizionare il dispositivo anzichéevent4 )

Una demo gif per questo programma (frame rate basso, sfortunatamente, quindi tieni l'immagine non troppo grande) qui .

Una piccola nota a margine (se non sai cosa fare con il codice C) - per compilare il programma sopra, basta usare:

user@host:/path$ gcc -std=gnu99 file.c -o m

dov'è file.cil nome del tuo file di codice sorgente C, quindi otterrai eseguibile, chiamato mnella tua directory. Molto probabilmente avrai bisogno delle autorizzazioni per scrivere direttamente nel dispositivo del mouse, quindi puoi usare sudo:

user@host:/path$ sudo ./m

Altro sistema operativo

La logica rimarrà la stessa:

  • Trova un modo per accedere al tuo dispositivo mouse
  • Scrivi evento di spostamento del mouse
  • Applica la randomizzazione al tuo evento

Questo è tutto. Ad esempio, Mac OS ha il suo modo di lavorare con il mouse (non come Linux, anche Mac non lo è procfs), è ben descritto qui .

Come conclusione

Cosa c'è di meglio - javascript o soluzioni orientate al dispositivo - dipende da te, perché determinate condizioni (come cross-browser o cross-OS) possono decidere tutto in questo caso. Pertanto, ho fornito linee guida insieme ad alcuni esempi di funzionamento su come implementarlo a livello di sistema operativo. Il vantaggio qui è che la soluzione è cross-browser, ma come costo abbiamo un programma associato al sistema operativo.


Grazie mille per questo post molto dettagliato. Ho il sospetto che dimostreremo su un tablet (Android o iOS), quindi non saremo in grado di modificare il comportamento del mouse a livello di sistema operativo. Ma comunque molto interessante!
Joshua Muheim,

53
Come diavolo hai intenzione di dimostrare il mouse traballante sui dispositivi touchscreen?
Assapora il

6
@Davor Onestamente, dubito fortemente che le persone che hanno davvero problemi con tremori / mani tremanti userebbero un dispositivo touch , a meno che non volessero impazzire intenzionalmente.
Chris Cirefice,

2
@ChrisCirefice: O sono costretti a farlo, perché devono usare uno dei dispositivi gazillion là fuori che hanno lo scopo di rendere le nostre vite più belle e usare schermi touch ... ricorda che questo è per aumentare la consapevolezza del problema con cui queste persone hanno problemi quello.
PlasmaHH,

@PlasmaHH L'OP non ha menzionato questo per sensibilizzare le persone che hanno tremori e le loro difficoltà (in particolare) con i dispositivi touch-screen. E ancora, non credo che chi ha realmente problemi con tremori è abbastanza masochista per cercare di utilizzare tenuti in mano di dispositivi touch-screen . Ci sono dispositivi che sono molto più facili da usare, come telefoni con pulsanti grandi (meccanici). La maggior parte dei sistemi operativi include la navigazione vocale (ad es. Riconoscimento vocale - Sistema operativo Windows). Immagino che le persone gravemente affette userebbero quegli strumenti invece di un iPhone.
Chris Cirefice,

23

L'ho fatto una volta per scherzo, sul forum Puppy Linux e ho ottenuto il commento che:

Le persone con Parkinson non penseranno che sia divertente !!!

La cura qui è semplicemente cntrl-C, per fortuna.

Ecco lo script della shell che richiede xdotool

#!/bin/sh
while :; do
   xdotool mousemove_relative -- -$(($RANDOM % 10)) $(($RANDOM % 10))
   xdotool mousemove_relative -- $(($RANDOM % 10)) -$(($RANDOM % 10))
   sleep ${1:-.1} #adjust this as necessary for effect
done

Nome come parkinson_sim ed esegui con argomento facoltativo per il tempo tra tremori che può essere compreso tra 0,001 e 999,0.

parkinson_sim [time_between_tremors_in_seconds] #default è 0.1

Ho fatto l'errore di fare clic su di me invece di eseguirlo dalla riga di comando e ho scoperto rapidamente quanto deve essere frustrante. Mi ci sono voluti diversi tentativi per aprire una finestra del terminale per ucciderlo.


1
potresti voler sostituire i due punti con qualcosa come "sleep 0.01" per limitare l'utilizzo e la velocità della cpu, perché sul mio rig fa salti veloci non realistici con il tuo codice.
nonchip

1
@nonchip - Grazie per le informazioni, non l'ho mai eseguito abbastanza a lungo per scoprire l'utilizzo della CPU. Aggiunto un sonno al corpo.
technosaurus,

Sai nella maggior parte delle distribuzioni Linux puoi aprire il terminale usando i comandi da tastiera, giusto?
solo

@justhalf In quel momento Puppy di default, il collegamento al terminale era premere `una finestra di ROX-Filer. Ci sono voluti un paio di tentativi per aprirlo, quindi ho usato la tastiera per aprire il menu. Poco dopo ho creato un demone di controllo vocale rudimentale usando pocketphinx_continuous e circa 10 linee di shell.
technosaurus,

while :; do ...; sleep $time; donedovrebbe quasi sempre esserlo while sleep $time; do ...; done, perché quando l'utente preme Ctrl-C, il comando attualmente in esecuzione lo sarà quasi sicuramente sleep, e le shell non finiscono sempre lo script quando l'utente lo desidera. Ciò si verifica in particolare durante i test nelle shell interattive, ma a volte può accadere anche negli script. Anche meglio sarebbe while xdotool ... && xdotool ... && sleep ...; do :; done.

16

La tua seconda idea (nascondi il cursore) è a metà strada per quella che penso possa funzionare bene per te:

  • Nascondi il cursore del mouse tramite CSS, come suggerisci. ( cursor:noneIIRC)
  • Invece di una GIF a cursore traballante, usa qualche immagine + posizionamento assoluto CSS + JS per emulare il puntatore del mouse; vale a dire, seguire il mouse attorno alla pagina e posizionare l'immagine del cursore nel punto in cui si trova il cursore del mouse in modo nativo.

Quindi, aggiungi un po 'di tremore matematico al codice del cursore, per "scuotere" il cursore. Spetta a te determinare quali sono le curve giuste per simulare correttamente l'input di tremore.

Infine: per qualunque controllo tu stia programmando (link, ecc.):

  • acquisire eventi click, spostarli nella posizione "tremore" corrente in base allo stato delle curve del tremore e controllare i limiti per verificare se l'utente si è scrollato di dosso l'elemento desiderato o, eventualmente, in un elemento non previsto .

Un grande vantaggio di questa implementazione: il tuo 'cursore traballante' verrà visualizzato sui dispositivi touch, che non avrebbe un cursore per cominciare.


Modificare:

Basato sulla base JSFiddle di Michael Theriot (molto pulita e utile!) Dai commenti, eccone uno che trema costantemente con uno sweep normalmente distribuito attorno all'attuale posizione del cursore: http://jsfiddle.net/benmosher/0x4mc64v/4/

(L' normalarray è il risultato della chiamata rnorm(100)nella mia console R. Il modo più semplice che ho potuto pensare in JS per campionare un intero casuale normalmente distribuito.)


Alcune informazioni sugli eventi del mouse JS standard: javascript.info/tutorial/…
Ben Mosher,

Grazie, questa è davvero una degna aggiunta alla mia idea.
Joshua Muheim,

Il violino è semplicemente bello per un progetto a cui sto lavorando, anche se ha 4 anni ti dispiacerebbe se lo rubassi come base per la simulazione del Parkinson che fa parte del mio progetto?
Graham Ritchie,

@GrahamRitchie: bene con me, ma Michael Theriot ha svolto la maggior parte del lavoro, IIRC 😄
Ben Mosher,

14

Solo un'idea per ottenere il tremore "giusto", puoi registrare il movimento del mouse di un paziente reale, questo lo rende più autentico quando dici alle persone da dove provengono i dati.

Lì uno script per consentire a un gatto di seguire il cursore del mouse, è possibile regolarne uno per consentire a un secondo cursore di seguire (saltare) il cursore. La pagina calcola la posizione del secondo cursore, quindi può anche determinare se un evento click ha esito positivo o meno.

Se puoi, per favore, rendilo basato sul web, raggiungerai molte più persone in questo modo rispetto a chiedere loro di installare un programma o attivare il flash o qualunque cosa ci sia.


Grazie per questo suggerimento
Joshua Muheim,

1
Mi piace questa idea: la posizione del mouse potrebbe essere registrata in qualsiasi intervallo di tempo tramite JavaScript. Potresti quindi tracciare i movimenti (piano XY) e persino ottenere alcune statistiche di base per una formula più "valida" di "tremor_randomness" per la soluzione API di blocco puntatore o qualcosa di simile. Ciò richiederebbe un po 'più di lavoro (prendi la posizione XY ogni 100 ms per 10 secondi, per esempio) e l'analisi, ma ti darebbe un effetto molto più reale della semplice randomizzazione. Per la tua causa, potrebbe valerne la pena.
Chris Cirefice,

10

Invece di provare a spostare il puntatore, è possibile spostare invece l'applicazione (pagina Web). Ho scritto un semplice modulo HTML che contiene alcuni campi di immissione. Quando si sposta il mouse sul modulo, il modulo si sposta.

Puoi vedere una demo della forma mobile su jsfiddle . Prova a fare clic su uno dei campi di input per vedere l'effetto.

Ho usato l' effetto shake jquery per raggiungere questo obiettivo. Il javascript per l'effetto shake è simile al seguente e fa sì che il modulo si sposti su e giù ogni volta che si sposta il mouse su di esso:

<script type="text/javascript">
    $(document).ready(function() {
        $("#toggle").hover(function () {
            $(this).effect("shake", { direction: "up", times: 1, distance: 40}, 1000);
        });
    });
</script>

Sebbene la forma si sposti solo su e giù, penso che abbia l'effetto desiderato. Puoi giocare con i parametri (direzione, tempi, distanza, nonché il senza nome "1000" sopra) per modificare il movimento della forma.


3
Ci ho pensato anche io, ma sebbene sia più facile da implementare, non mostra la "vera" esperienza di un tremore.
Joshua Muheim,

10

Perché non usare una soluzione hardware? Ci sono alcuni topi là fuori in cui è possibile mettere pesi, come Logitech G500. Invece di ingrassare, inserisci un piccolo motore oscillante che scuoti leggermente il mouse. Questo ha anche simulato di più il vero disordine: non è solo il cursore a scuotere, ma l'intera mano e il mouse. E significa anche che puoi mostrare altri software oltre ai siti Web.

Invece di un mouse con una fessura per il peso, puoi anche registrare semplicemente qualcosa sul mouse, ma è più evidente.


Dato che sono un fanatico del computer e non un meccanico, mi atterrò a una soluzione elettronica. Grazie!
Joshua Muheim,

Sebbene una possibile soluzione hardware sia quella di rompere il mouse (presumibilmente cablato) aggiungendo un generatore di rumore casuale ad esso.
Hot Licks

6

Mentre pensavi di farlo con un driver del mouse personalizzato suppongo che farebbe un piccolo programma in esecuzione sul PC? In questo caso, ecco un piccolo snippet per C #, che sposta il cursore in modo casuale in un intervallo di più meno 5px attorno alla posizione corrente del cursore. Dopo ogni spostamento, il programma attende da 50 ms a 100 ms (non preciso!). L'agitazione può essere configurata adattando i valori per lo spostamento e le pause. L'ho eseguito in un'applicazione console e - a seconda dei valori - mi è stato difficile interrompere il programma.

Random rand = new Random();

while(true)
{
    Cursor.Position = new Point() { X = Cursor.Position.X + rand.Next(11)-5, Y = Cursor.Position.Y + rand.Next(11)-5 };
    Thread.Sleep(rand.Next(50) + 50);
}

6

Ecco una versione di Windows del mio script xdotool che utilizza AutoIt . Questo è stato il mio primo script AutoIt in assoluto, e ci sono voluti solo un paio di minuti per scrivere, quindi sono sicuro che può essere migliorato. Basta salvare con l'estensione .au3 ed eseguirlo con AutoIt (Esegui script x86).

HotKeySet("{HOME}", "GStart")
HotKeySet("{PAUSE}", "Gpause")
HotKeySet("{ESC}", "Gexit")

While 1
    Sleep(100)
WEnd

Func Gstart()
While 1
    sleep(100)
    $pos = MouseGetPos()
    $x = $pos[0] + 10 - Random(0, 20, 1)
    $y = $pos[1] + 10 - Random(0, 20, 1)
    MouseMove($x,$y)
Wend
Endfunc


Func Gpause()
While 1
   sleep(100)
Wend
Endfunc

Func Gexit()
    MsgBox(0, "exit box", "Script exited")
    Exit 0
EndFunc

controlli

  • Home: avvia la simulazione.
  • pausa: sospende la simulazione.
  • Esc: esci dalla simulazione.

Oppure usa la mia versione compilata da qui .


Molto bella. Grazie!
Joshua Muheim,

5

Non puoi aspettarti che nessuno sia in grado di tenere le mani perfettamente ferme, quindi una cosa che puoi considerare è,

  1. Spiega agli utenti cosa stai facendo e,
  2. Rendi gli elementi cliccabili sulla pagina demo molto più piccoli del normale.
  3. Aumentare al massimo la sensibilità del mouse sul sistema di esempio.

Il mio ragionamento è (avvertimento, non sono un esperto di medicina o di medicina) riducendo gli elementi cliccabili, creando un problema simile per la maggior parte delle persone che una persona affetta dalla malattia di Parkinson dovrebbe affrontare con un sito Web di tutti i giorni.


Anche questa è un'idea interessante. Di sicuro sto pensando di rendere gli elementi cliccabili abbastanza piccoli, comunque.
Joshua Muheim,

2
Temo che la maggior parte degli utenti di mouse possa controllare il proprio dispositivo fino a 1-2 pixel se si concentrano, ad esempio il tremolio della mano è inferiore a 1 pixel con le impostazioni del mouse che utilizzo. Quindi probabilmente non è una soluzione universale se i pulsanti sono più grandi di 1-2 pixel ...
Jonas Heidelberg

Aggiungerei il n. 3, aumentando la velocità del mouse e facendo clic sulle impostazioni al massimo
Ryan B

Avrebbe senso avere una sorta di "controllo automatico del volume" sul mouse, amplificando i piccoli movimenti e avvicinando quelli più grandi al "normale".
Hot Licks

4

Puoi usare una tuta di simulazione per la vecchiaia, come quella descritta in questo articolo ... Sospetto che la parte dei tremori alle mani sia solo un motore vibrante legato attorno al polso, oltre ad alcuni guanti spessi per rendere le mani generalmente goffe.


Grazie. Anche se questo è molto interessante, probabilmente non avremo soldi e tempo per mettere tutti i visitatori nella causa. ;)
Joshua Muheim,

5
Non sarebbe più adatto come commento?
Selali Adobor,

Bene, ero un po 'confuso riguardo ai tag javascript e html, ma dal momento che il richiedente ha anche suggerito di utilizzare driver del mouse speciali (e quindi menzionato i tablet) sembra che altre soluzioni siano le benvenute. Una volta eliminata la specifica limitazione tecnologica, questa è una risposta. Questo è davvero il modo in cui i ricercatori in questo campo stanno risolvendo il problema della simulazione della disabilità legata all'età. Penso anche che potresti fare il fai-da-te in modo relativamente economico se vuoi solo i tremori: uno di quei pesi da polso in velcro e un motore vibrante, non dovrebbero essere troppo duri.
user3067860

4
  • Nel tuo DIVCSS-nascondi il cursore usandocursor:none;
  • Crea un'immagine del cursore .png e spostala ( left, top) con jQ attivomousemove
  • Randomizza il .png margin-lefte margin-topusando a setTimeout (per rendere agevole il riposizionamento usa CSS3 transitiono fallo con jQ .animate()).

Nota: lo script non può sapere se la mano è ancora sul mouse;)

function rand(min, max) {return Math.random() * (max - min) + min;}

var $cursor = $('div img');

$('div').mousemove(function(e) {  // Make .png follow the mouse coordinates
  $cursor.css({
    left: e.pageX,
    top:e.pageY
  });
}).hover(function(e){
  $cursor.toggle(); // Show .png cursor as we enter the DIV
});

(function tremor(){ // Add tremor to .png image
  $cursor.css({
      marginLeft: rand(-15,15), // arm tremor
      marginTop:  rand(-30,30)  // hand contractions
  });
  setTimeout(tremor, rand(50,100));
}());
div{
  position:absolute;
  background:#eee;
  height:100%;
  width:100%;
  cursor:none;
}

div img{
  display:none;
  position:absolute;
  transition: margin 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://i.stack.imgur.com/KwMGA.png"></div>


2

Le parti di basso livello della simulazione del tremore hanno ormai una buona risposta. Aggiungerò qualcosa concentrandomi sul tipo di tremore per simulare:

La maggior parte delle risposte implementa un cursore del mouse che si sta muovendo su un percorso casuale con una larghezza di passo massima fissa in direzione X e Y.

Questo dovrebbe funzionare abbastanza bene per il caso d'uso di rendere difficile colpire un'area specifica come un pulsante.

Per la questione più generale della simulazione dei problemi di UI causati da un tremore della malattia di Parkinson, sarebbe almeno interessante simulare effettivamente i movimenti della mano di questo tipo di tremore.
Ho il sospetto che la camminata casuale potrebbe non essere un'approssimazione molto buona .

Naturalmente può essere difficile ottenere dati di tracciamento della mano reale del movimento del tremore, ma ci sono certamente articoli sull'analisi di questo tipo di tremore:

Il documento Rappresentazione parametrica del movimento della mano nella malattia di Parkinson riguarda come tracciare al meglio le tracce del movimento della mano 3D.
Il documento è wallwalled, ma l'anteprima in alto a destra, etichettata "Look Inside>" sull'immagine del libro, mostra alcune trame interessanti di diverse rappresentazioni dei dati di tracciamento della mano .

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.