¿Simulando temblor (de, por ejemplo, la enfermedad de Parkinson) con el mouse en una página web?

204

Estoy trabajando para una fundación que crea conciencia sobre la accesibilidad en Internet. Para una presentación, queremos ofrecer un pequeño taller que simule diferentes discapacidades / impedimentos para las personas. Esto se realiza a través de un sitio web creado especialmente para esta presentación.

Una de las deficiencias demostradas es tener un temblor, lo que significa experimentar movimientos de manos temblorosos y difíciles de controlar. Con este impedimento, es muy difícil mover el cursor del mouse exactamente y presionar el botón del mouse mientras el mouse está sobre un enlace. Tanto algunas personas mayores como personas con enfermedades, como el Parkinson, pueden sufrir temblores.

Ahora me gustaría mover de alguna manera el cursor del mouse de una manera impredecible, para que sea muy difícil para las personas hacer clic en un botón pequeño. Debido a que JavaScript no permite mover el cursor del mouse directamente, estoy buscando otras formas de lograrlo. Se me ocurrieron las siguientes ideas:

  • Usar un controlador / utilidad de mouse que simula el movimiento del mouse.
  • Oculte el cursor del mouse a través de CSS, coloque una animación GIF de un cursor de mouse tembloroso en el lugar del cursor original (con JavaScript) y luego haga clic en el enlace de destino cada pocos segundos durante un segundo más o menos. Esto al menos daría la sensación de que uno siempre hace clic en el momento equivocado.

Si bien la primera idea sería genial, no pude encontrar una herramienta como esta, ya sea para Mac ni para Windows. Y no tengo ninguna habilidad para programar tal cosa yo mismo.

La segunda idea parece un poco torpe, pero creo que lograría el efecto deseado.

¿Alguien tiene otra idea?

Joshua Muheim
fuente
35
En realidad, puede controlar la posición del cursor (bueno, una emulada) con la API de bloqueo de puntero
Stuart P. Bentley
2
Intente mirar developer.mozilla.org/en-US/docs/Web/API/… . El enlace directo a la demostración es mdn.github.io/pointer-lock-demo . Siempre que sea aceptable para su propósito decirles a los usuarios que hacen clic en un lienzo y permitir que la página desactive el cursor del mouse, es posible que desee basar su código en esto
Aristócrates
55
La misma pregunta crea conciencia entre nosotros los desarrolladores web. ¡Gracias por preguntar! ¿Qué tan grande crees que debería ser un botón para poder hacer clic?
Ideograma
44
Solo un nivel establecido en el temblor: hay dos tipos básicos: "temblor esencial" y temblor de Parkinson, y son completamente diferentes. El "temblor esencial" (que no es puramente una condición de los ancianos), es un temblor de "intención", lo que significa que es aparente solo cuando el individuo está tratando de hacer algo, y empeora cuanto más trata de controlarlo. El temblor de la EP, por otro lado, ocurre principalmente en reposo, y el temblor a menudo no es obvio cuando el individuo está tratando de hacer algo (aunque la rigidez debida a la EP puede estar presente).
Hot Licks
2
Publiqué una versión de Linux que usa xdotool para controlar el mouse, pero hay una herramienta similar para Windows llamada autoit. Parece bastante simple e incluso hay una etiqueta para ello [autoit]. También parece que necesitas 2 versiones. Uno que tiembla más hasta que comienza el movimiento y luego se calma un poco, mientras que el otro es relativamente estable hasta que comienza el movimiento.
technosaurus

Respuestas:

148

Hice una demostración rápida de algo en lo que esperemos que pueda basar su código, utilizando la API de bloqueo de puntero .

Bifurqué este repositorio pointer-lock-demo y lo modifiqué para agregar un elemento de movimiento aleatorio.

Aquí está el enlace a mi página de GitHub: https://aristocrates.github.io/pointer-lock-demo
Y aquí está el enlace a mi repositorio: https://github.com/aristocrates/pointer-lock-demo

El código javascript de importancia está contenido app.jsen el canvasLoop(e)método.

Lo único que cambié de la demostración original fue después de las líneas

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

Agregué dos líneas para representar un movimiento aleatorio:

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

Todavía hay muchas cosas que podría mejorar, pero espero que esto pueda ayudarlo a comenzar.

Aristócratas
fuente
36
Como nota en la funcionalidad, el movimiento aleatorio no es lo mismo que una mano temblorosa. Con un movimiento aleatorio, el puntero puede desplazarse por la pantalla. Con una mano temblorosa, el puntero vibrará alrededor de un punto central.
zzzzBov
55
Vale la pena señalar que la compatibilidad del navegador para la Api de bloqueo de puntero no es excelente, esto no funcionará en Internet Explorer o Safari.
Steve Sanders el
3
No encontré el tiempo para probarlo yo mismo, pero tal vez conozcas este: ¿la API de bloqueo de puntero también funciona fuera de un lienzo? ¿O está restringido a un lienzo?
Joshua Muheim
8
Una implementación más realista rastrearía la posición "real" del cursor y se movería al azar dentro de un círculo alrededor de eso, pero eso podría ser demasiado complejo.
tckmn
1
@Chris Chrome ahora lanza Blocked pointer lock on an element because the element's frame is sandboxed and the 'allow-pointer-lock' permission is not set.. Parece que jsFiddle está incrustando el contenido en un marco de espacio aislado (es decir, no permite el bloqueo del puntero a través de <iframe sandbox="webkit-allow-pointer-lock">, consulte los documentos ). Intente poner la muestra en una sola página, no sandboxed.
ComFreek
36

Manera no javascript

En realidad, me gustan las soluciones, que pueden estar basadas en javascript, ya que es más probable que estén relacionadas con la web, y es muy probable que sean independientes del sistema operativo. Sin embargo, estaba pensando en cómo resolver su problema para todos los navegadores, ya que las soluciones de JavaScript, en este caso, serán difíciles de ajustar para todos los navegadores posibles (no estoy seguro de si es posible).

Entonces, como mencionó, hay otra forma, es decir, emular el comportamiento a nivel del sistema operativo. Esto también tiene otra ventaja: puede estar seguro de que para el navegador se ve 100% como si fuera humano (porque, bueno, es el controlador el que está enviando la señal). Por lo tanto, puede usar soluciones basadas en controladores / dispositivos con cualquier navegador (o incluso en una situación en la que JavaScript esté deshabilitado).

Linux

Desafortunadamente, la participación del controlador / dispositivo causa inmediatamente la dependencia del sistema operativo. Entonces, para cada sistema operativo, necesitará su propia solución. En esta publicación, estoy centrado en la solución basada en Linux (por lo tanto, funcionará con Linux) y Mac OS un poco. Con Linux, es posible escribir eventos en el dispositivo explícitamente, por lo que a continuación se muestra una muestra de la función con el bucle principal:

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;
}

Mi código completo para el problema se encuentra aquí . El programa solicitará la amplitud del "temblor" y su frecuencia (por lo tanto, cuánto tiempo en microsegundos hay entre "temblores"). Para emular la situación, obligará al mouse a moverse aleatoriamente por 0..Xpuntos en dirección aleatoria (arriba-abajo-izquierda-abajo) y esperará 0..Ymicrosegundos al azar hasta el próximo "temblor", hay Xuna amplitud de "temblor" yY es frecuencia de "temblor". "

Otra cosa puede ser adaptar el programa a su sistema. El programa es "ficticio" y no puede detectar el mouse por sí mismo, por lo que "/dev/input/event4"está codificado. Para darse cuenta de lo que puede ser un identificador para su sistema, puede intentar:

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

Y así, las posibilidades son "event3"y "event4", pero para su sistema, eso puede tener otros valores. Entonces, si eso es diferente del que se usa actualmente en el código C, simplemente cambie la línea correspondiente (así, alinee int fd = open("/dev/input/event4", O_RDWR);y coloque su dispositivo en lugar deevent4 )

Una demostración de gif para este programa (baja velocidad de fotogramas, desafortunadamente, así que mantenga la imagen no demasiado grande) aquí .

Una pequeña nota al margen (si no sabe qué hacer con el código C): para compilar el programa anterior, solo use:

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

donde file.cestá el nombre de su archivo de código fuente C, entonces obtendrá el ejecutable, llamado men su directorio. Lo más probable es que necesite permisos para escribir directamente en el dispositivo del mouse, por lo que puede usar sudo:

user@host:/path$ sudo ./m

Otro sistema operativo

La lógica seguirá siendo la misma:

  • Encuentre una manera de acceder a su dispositivo de mouse
  • Escribir evento de mover el mouse
  • Aplicar aleatorización a su evento

Eso es. Por ejemplo, Mac OS tiene su propia forma de trabajar con el mouse (no como Linux, Mac tampoco procfs), está bien descrito aquí .

Como conclusión

Lo que es mejor, javascript o soluciones orientadas a dispositivos, depende de usted, porque ciertas condiciones (como el navegador cruzado o el sistema operativo cruzado) pueden decidir todo en este caso. Por lo tanto, he proporcionado pautas junto con cierto ejemplo de trabajo de cómo implementar eso en el nivel del sistema operativo. El beneficio aquí es que la solución es un navegador cruzado, pero como costo tenemos un programa vinculado al sistema operativo.

Alma Do
fuente
Muchas gracias por esta publicación tan detallada. Sospecho que lo demostraremos en una tableta (Android o iOS), por lo que no podremos cambiar el comportamiento del mouse a nivel del sistema operativo. Pero muy interesante de todos modos!
Joshua Muheim
53
¿Cómo diablos vas a demostrar un ratón tembloroso en dispositivos con pantalla táctil?
Davor
66
@Davor Honestamente, dudo mucho que las personas que realmente tienen problemas con temblores / manos temblorosas usarían un dispositivo táctil , a menos que quisieran volverse locos intencionalmente.
Chris Cirefice
2
@ChrisCirefice: O se ven obligados a hacerlo, porque tienen que usar uno de los millones de dispositivos que están destinados a hacer nuestras vidas más agradables y usar pantallas táctiles ... recuerden que esto es para crear conciencia sobre el problema con el que estas personas tienen problemas. ese.
PlasmaHH
@PlasmaHH El OP no mencionó que esto es para sensibilizar a las personas que tienen temblores y su dificultad (específicamente) con dispositivos de pantalla táctil. Y de nuevo, no creo que nadie que haya problemas con temblores es tan masoquista como para tratar de utilizar portátiles dispositivos de pantalla táctil . Hay dispositivos que son mucho más fáciles de usar, como teléfonos con botones grandes (mecánicos). La mayoría de los sistemas operativos incluyen navegación por voz (por ejemplo, Reconocimiento de voz - Sistema operativo Windows). Me imagino que las personas gravemente afectadas usarían esas herramientas en lugar de un iPhone.
Chris Cirefice
23

Hice esto como una broma una vez, en el Foro Puppy Linux y recibí el comentario de que:

¡Las personas con Parkinson no pensarán que es divertido!

Curar aquí es simplemente cntrl-C, por suerte.

Aquí está el script de shell que requiere 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

Nombre como parkinson_sim y ejecute con argumento opcional para el tiempo entre temblores que puede ser 0.001 a 999.0.

parkinson_sim [time_between_tremors_in_seconds] #default es 0.1

Cometí el error de hacer clic en él en lugar de ejecutarlo desde la línea de comandos y rápidamente descubrí lo frustrante que debe ser. Me llevó varios intentos abrir una ventana de terminal para matarlo.

technosaurus
fuente
1
es posible que desee reemplazar el colon por algo como "dormir 0.01" para limitar el uso y la velocidad de la CPU, porque en mi plataforma hace saltos rápidos poco realistas con su código.
nonchip
1
@nonchip - Gracias por la información, nunca lo ejecuté lo suficiente como para descubrir el uso de la CPU. Agregó un sueño al cuerpo.
technosaurus
Sabes que en la mayoría de las distribuciones de Linux puedes abrir el terminal usando comandos de teclado, ¿verdad?
justhalf
@justhalf En Puppy predeterminado en ese momento, el acceso directo del terminal era presionar `en una ventana de ROX-Filer. Tomó un par de intentos abrirlo, así que usé el teclado para abrir el menú. Poco después, creé un demonio de control de voz rudimentario usando pocketsphinx_continuous y aproximadamente 10 líneas de shell.
technosaurus
while :; do ...; sleep $time; donecasi siempre debería serlo while sleep $time; do ...; done, porque cuando el usuario presiona Ctrl-C, el comando que se está ejecutando actualmente seguramente será sleep, y los shells no siempre finalizan el script cuando el usuario lo desea. Esto ocurre más notablemente durante las pruebas en shells interactivos, pero a veces puede ocurrir incluso en scripts. Aún mejor sería while xdotool ... && xdotool ... && sleep ...; do :; done.
16

Su segunda idea (ocultar el cursor) está a medio camino de una que creo que puede funcionar bien para usted:

  • Oculta el cursor del mouse a través de CSS, como sugieres. ( cursor:noneIIRC)
  • En lugar de un GIF con cursor tembloroso, use una imagen + posicionamiento absoluto CSS + JS para emular el puntero del mouse; es decir, siga el mouse alrededor de la página y coloque la imagen del cursor donde estaría el cursor del mouse de forma nativa.

Luego, agrega algunas matemáticas de temblor al código del cursor, para "sacudir" el cursor. Depende de usted determinar cuáles son las curvas correctas para simular correctamente la entrada del temblor.

Finalmente: para cualquier control que esté programando (enlaces, etc.):

  • capturar eventos de clic, empujarlos a la ubicación actual de "temblor" en función del estado de sus curvas de temblor, y verificar los límites para ver si el usuario ha salido del elemento deseado, o posiblemente en un elemento que no fue intencionado .

Una ventaja importante con esta implementación: su 'cursor tembloroso' se mostrará en dispositivos táctiles, que para empezar no tendrían un cursor.


Editar:

Basado en la base JSFiddle de Michael Theriot (¡muy limpio y útil!) De los comentarios, aquí hay uno que tiembla constantemente con un barrido distribuido normalmente alrededor de la ubicación actual del cursor: http://jsfiddle.net/benmosher/0x4mc64v/4/

(La normalmatriz es el resultado de llamar rnorm(100)a mi consola R. De la manera más simple que se me ocurre en JS para muestrear un entero aleatorio normalmente distribuido).

Ben Mosher
fuente
Alguna información estándar del evento del mouse JS: javascript.info/tutorial/…
Ben Mosher
Gracias, esta es realmente una adición muy valiosa a mi idea.
Joshua Muheim
El violín es simplemente hermoso para un proyecto en el que estoy trabajando, aunque esto tiene 4 años ¿te importaría robar esto como la base para la simulación de Parkinson que es parte de mi proyecto?
Graham Ritchie
@GrahamRitchie: bien conmigo, pero Michael Theriot hizo la mayor parte del trabajo, IIRC 😄
Ben Mosher
14

Solo una idea para que el temblor sea "correcto", puede registrar el movimiento del mouse de un paciente real, esto lo hace más auténtico cuando le dice a la gente de dónde provienen los datos.

Hay una secuencia de comandos para permitir que un gato siga el cursor de su mouse, puede ajustar uno para que un segundo cursor siga (salte) su cursor. La página está calculando la posición del segundo cursor, por lo que también puede determinar si un evento de clic es exitoso o no.

Si puede, hágalo en la web, llegará a muchas más personas de esta manera que pidiéndoles que instalen un programa o activen flash o lo que sea que haya.

usuario3934260
fuente
Gracias por esta sugerencia
Joshua Muheim
1
Me gusta esta idea: la posición del mouse se puede grabar en cualquier intervalo de tiempo a través de JavaScript. Luego podría trazar los movimientos (plano XY) e incluso obtener algunas estadísticas básicas para una fórmula más 'válida' de 'tremor_randomness' para la solución API de Pointer Lock o algo similar. Esto requeriría un poco más de trabajo (solo buscar la posición XY cada 100 ms durante 10 segundos, por ejemplo) y análisis, pero le daría un efecto mucho más real que la aleatorización simple. Por su causa, puede valer la pena.
Chris Cirefice
10

En lugar de intentar mover el puntero, puede mover la aplicación (página web) en su lugar. Escribí un formulario html simple que tiene algunos campos de entrada. Cuando mueve el mouse sobre el formulario, el formulario se mueve.

Puedes ver una demostración de la forma en movimiento en jsfiddle . Intente hacer clic en uno de los campos de entrada para ver el efecto.

Utilicé el efecto jquery shake para lograr esto. El javascript para el efecto de sacudida se ve así, y solo hace que el formulario se mueva hacia arriba y hacia abajo cada vez que se mueve el mouse sobre él:

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

Aunque la forma solo se mueve hacia arriba y hacia abajo, creo que tiene el efecto deseado. Puedes jugar con los parámetros (dirección, tiempos, distancia, así como con el "1000" sin nombre anterior) para modificar el movimiento del formulario.

chue x
fuente
3
También pensé en esto, pero aunque es más fácil de implementar, no muestra la experiencia "real" de un temblor.
Joshua Muheim
10

¿Por qué no usar una solución de hardware? Hay ciertos ratones en los que puedes poner pesos, como el Logitech G500. En lugar de poner un peso, coloque un pequeño motor oscilante que haga que el mouse se mueva ligeramente. Esto también simuló más el desorden real: no solo se mueve el cursor, sino toda la mano y el mouse. Y también significa que puede mostrar otro software que no sean sitios web.

En lugar de un mouse con una ranura de peso, también puede simplemente pegar algo al mouse, pero eso es más notable.

Nzall
fuente
Como soy un experto en informática y no mecánico, me quedaré con una solución electrónica. ¡Gracias!
Joshua Muheim
Aunque una posible solución de hardware es fastidiar el mouse (presumiblemente conectado) agregando un generador de ruido aleatorio.
Hot Licks
6

Como estaba pensando en hacerlo con un controlador de mouse personalizado, ¿supongo que un pequeño programa que se ejecuta en la PC funcionaría? Si este es el caso, aquí hay un pequeño fragmento de C #, que mueve infinitamente el cursor al azar dentro de un rango de más menos 5 píxeles alrededor de la posición actual del cursor. Después de cada desplazamiento, el programa espera de 50 ms a 100 ms (¡no es exacto!). La inestabilidad se puede configurar adaptando los valores para el desplazamiento y las pausas. Ejecuté esto en una aplicación de consola y, dependiendo de los valores, me costó bastante detener el programa.

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);
}
Paul Kertscher
fuente
6

Aquí hay una versión de Windows de mi script xdotool que usa AutoIt . Este fue mi primer script de AutoIt, y me tomó solo un par de minutos escribir, así que estoy seguro de que se puede mejorar. Simplemente guarde con la extensión .au3 y ejecútelo con AutoIt (Run 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

Control S

  • Inicio: Iniciar simulación.
  • pausa: pausa de simulación.
  • Esc: simulación de salida.

O use mi versión compilada desde aquí .

technosaurus
fuente
Muy agradable. ¡Gracias!
Joshua Muheim
5

No puede esperar que nadie pueda mantener sus manos perfectamente firmes, por lo que una cosa que puede considerar es,

  1. Explique a los usuarios lo que está haciendo y,
  2. Haga que los elementos en los que se puede hacer clic en la página de demostración sean mucho más pequeños de lo normal.
  3. Aumentar la sensibilidad del mouse en el sistema de ejemplo al máximo.

Mi razonamiento es (advertencia, no soy un experto en ux o medicina) al hacer que los elementos que se pueden hacer clic sean más pequeños, crea un problema similar para la mayoría de las personas que una persona afectada por la enfermedad de Parkinson enfrentaría con un sitio web cotidiano.

jdphenix
fuente
Esta también es una idea interesante. De todos modos, estoy planeando hacer que los elementos en los que se puede hacer clic sean bastante pequeños.
Joshua Muheim
2
Me temo que la mayoría de los usuarios de mouse pueden controlar su dispositivo hasta 1-2 píxeles si se concentran, por ejemplo, el movimiento de la mano es inferior a 1 píxel con la configuración del mouse que uso. Entonces, probablemente no sea una solución universal si sus botones son más grandes que 1-2 píxeles ...
Jonas Heidelberg
Agregaría # 3, aumentando la velocidad del mouse y haciendo clic en la configuración al máximo
Ryan B
Tendría sentido tener una especie de "control de volumen automático" en el mouse, amplificando los movimientos pequeños y haciendo que los más grandes estén más cerca de lo "normal".
Hot Licks
4

Puede usar un traje de simulación para la vejez, como el que se describe en este artículo ... Sospecho que la parte de los temblores de las manos es solo un motor vibratorio atado a la muñeca, además de unos guantes gruesos para hacer que las manos sean generalmente torpes.

usuario3067860
fuente
Gracias. Aunque esto es muy interesante, probablemente no tendremos dinero y tiempo para poner a cada visitante en el traje. ;)
Joshua Muheim
55
¿No sería esto más adecuado como comentario?
Selali Adobor
Bueno, estaba un poco confundido acerca de las etiquetas javascript y html, pero dado que el autor de la pregunta también sugirió usar controladores de mouse especiales (y luego mencionó tabletas) parece que otras soluciones son bienvenidas. Una vez que elimine la limitación tecnológica específica, esta es una respuesta. Esta es realmente la forma en que los investigadores en este campo están resolviendo el problema de simular la discapacidad relacionada con la edad. También creo que podrías hacer bricolaje a un precio relativamente bajo si solo quieres los temblores, uno de esos pesos de muñeca con velcro y un motor vibratorio, no debería ser demasiado duro.
user3067860
4
  • En tu DIV, CSS-oculta el cursor usandocursor:none;
  • Cree una imagen de cursor .png y muévala ( left, top) con jQ enmousemove
  • Aleatorice el .png margin-lefty margin-topuse a setTimeout (para que el reposicionamiento sea suave, use CSS3 transitiono hágalo con jQ .animate()).

Nota: El script no puede saber si la mano todavía está en el 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>

Roko C. Buljan
fuente
2

Las partes de bajo nivel de simulación del temblor ya están bien respondidas. Agregaré algo centrado en el tipo de temblor para simular:

La mayoría de las respuestas implementan un cursor del mouse que se mueve en una ruta aleatoria con un ancho de paso máximo fijo en la dirección X e Y.

Esto debería funcionar lo suficientemente bien para el caso de uso de dificultar golpear un área específica como un botón.

Para la cuestión más general de simular problemas de IU causados ​​por un temblor de la enfermedad de Parkinson, sería al menos interesante simular realmente los movimientos de las manos de este tipo de temblor.
Sospecho que la caminata aleatoria puede no ser una muy buena aproximación .

Puede ser difícil obtener datos de rastreo de mano real supuesto, de del movimiento del temblor, pero ciertamente hay documentos sobre el análisis de este tipo de temblor:

El documento Representación paramétrica del movimiento de la mano en la enfermedad de Parkinson trata sobre cómo trazar mejor los rastros de movimiento de la mano en 3D.
El papel tiene paredes de pago, pero la vista previa en la parte superior derecha, etiquetada "Mirar dentro>" en la imagen del libro, muestra algunas tramas interesantes de diferentes representaciones de datos de rastreo manual .

Volker Siegel
fuente