Simulating tremor (from e.g. Parkinson's Disease) with the mouse on a webpage?

I'm working for a foundation that raises awareness for accessibility in the internet. For a presentation, we want to offer a small workshop that simulates different disabilities/impairments to people. This is done via a website created especially for this presentation.

One of the demonstrated impairments is having a tremor, which means experiencing shaky, difficult-to-control hand movements. With this impairment, it's very difficult to move the mouse cursor exactly and to press the mouse button while the mouse is over a link. Both some old people and people with disease, e.g. Parkinson's, can suffer from tremor.

Now I'd like to somehow move the mouse cursor in an unpredictable way, so that it's very hard for people to click on a small button. Because JavaScript doesn't allow moving the mouse cursor directly, I'm looking for other ways to achieve this. I came up with the following ideas:

• Using a mouse driver / utility that simulates the mouse shaking.
• Hide the mouse cursor via CSS, place a GIF animation of a shaking mouse cursor at the place of the original cursor (with JavaScript), and then make the target link clickable only every few seconds for a second or so. This would at least give the feeling as if one always clicks at the wrong moment.

While the first idea would be pretty cool, I couldn't find a tool like this, whether for Mac nor for Windows. And I don't have any skills in programming such a thing myself.

The second idea seems a bit clumsy, but it would achieve the desired effect, I think.

Does anybody have another idea?

I made a quick demo of something that you hopefully should be able to base your code on, using the Pointer Lock API.

I forked this pointer-lock-demo repo and modified it to add a random movement element.

Here is the link to my GitHub page: https://aristocrates.github.io/pointer-lock-demo<br> And here is the link to my repo: https://github.com/aristocrates/pointer-lock-demo

The javascript code of importance is contained in app.js, in the canvasLoop(e) method.

The only thing I changed from the original demo was after the lines

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

I added two lines to represent random movement:

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

There are still plenty of things you could improve, but hopefully this can help you get started.

Non-javascript way

Actually, I like solutions, which may be based on javascript, since they are more likely web-related, and good chances are — OS-independent. However, I was thinking about — how to resolve your issue for all browsers, since javascript solutions, in this case, will be difficult to adjust for all possible browsers (I'm not sure if it's possible at all).

So, as you've mentioned, there is another way — i.e. to emulate the behavior on OS level. This has another advantage too — you may be sure that for browser it looks 100% as it was human (because, well, it's driver which is sending the signal). So you may use driver/device-based solutions with any browsers (or even in situation, when javascript is disabled).

Linux

Unfortunately, involving driver/device immediately causes OS dependency. So for each OS you'll need own solution. In this post I'm focused on Linux-based solution (so, will work with Linux) — and Mac OS a little. With Linux, it's possible to write events to device explicitly, so below is sample of function with main loop:

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

My full code for the issue be found here. The program will ask for amplitude of "tremor" and it's frequency (thus, how many time in micro-seconds are between "tremors"). To emulate situation, it will force mouse to move randomly for 0..X points in random direction (up-down-left-bottom) and wait randomly 0..Y micro-seconds till next "tremor", there X is amplitude of "tremor" and Y is frequency of "tremor"

Another thing may be to adapt the program for your system. The program is "dummy" and can't detect mouse by itself, so "/dev/input/event4" is hard-coded. To realize what may be identifier for your system you may try:

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

And so possibilities are "event3" and "event4" — but for your system that may have other values. So, if that is different from currently used in C code, just change the corresponding line (so, line with int fd = open("/dev/input/event4", O_RDWR); and place your device instead of event4)

A gif demo for this program (low frame rate, unfortunately, so keep image not too large) here.

A little side note (if you don't know what to do with C code) — to compile program above, just use:

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

where file.c is the name of your C source code file, then you'll get executable, called m in your directory. Most likely you'll need permissions to write into mouse device directly, so you may use sudo:

user@host:/path$ sudo ./m

Other OS

The logic will remain same:

• Find a way to access your mouse device
• Write event of moving mouse
• Apply randomization to your event

That's it. For instance, Mac OS has its own way to work with mouse (not like Linux, Mac hasn't procfs as well), it's well-described here.

As a conclusion

What is better — javascript or device-oriented solutions — is up to you, because certain condition (like cross-browser or cross-OS) may decide everything in this case. Therefore, I've provided guidelines together with certain working example of how to implement that on OS level. The benefit here is that solution is cross-browser, but as a cost we have OS-binded program.

I did this as a joke once, on the Puppy Linux Forum and got the comment that:

> People with Parkinson's won't think it's funny !!! > > Cure here is simply cntrl-C, luckily.

Here is the shell script which requires 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

Name as parkinson_sim and run with optional argument for the time between tremors which can be 0.001 to 999.0.

> parkinson_sim [time_between_tremors_in_seconds] #default is 0.1

I made the mistake of clicking on it myself instead of running it from the command line and quickly discovered how frustrating it must be. It took me several tries to get a terminal window open to kill it.

Your second idea (hide the cursor) is halfway to one that I think may work well for you:

• Hide the mouse cursor via CSS, as you suggest. (cursor:none IIRC)
• Instead of a shaky-cursor GIF, use some image + CSS absolute positioning + JS to emulate the mouse pointer; i.e., follow the mouse around the page and plant the cursor image where the mouse cursor natively would be.

Then, you add some tremor math to your cursor code, to "shake" the cursor. Up to you to determine what the right curves are to properly simulate tremor input.

Finally: for whatever controls you are programming (links, etc.):

• capture click events, nudge them to the current "tremor" location based on the state of your tremor curves, and bounds-check your elements to see if the user has shaken out of the element intended, or possibly into an element that was not intended.

One major bonus with this implementation: your 'shaky cursor' will be displayed on touch devices, which would not have a cursor to begin with.

---

Edit:

Based on Michael Theriot's (very clean and helpful!) base JSFiddle from the comments, here's one that tremors constantly with a normally-distributed sweep around the current cursor location: http://jsfiddle.net/benmosher/0x4mc64v/4/

(The normal array is the result of calling rnorm(100) in my R console. Simplest way I could think of in JS to sample a normally-distributed random integer.)

Just an idea for getting the tremor "right", you can record the mouse movement of a real patient, this makes it more authentic when you tell people where the data comes from.

There a scripts for letting a cat follow your mouse cursor, you could adjust one to let a second cursor follow (jump around) your cursor. The page is calculating the position of the the second cursor, so it can also determine if an click event is successful or not.

If you can, please make it web based, you will reach a lot more people this way than asking them to install a program or activate flash or whatever there is.

Instead of trying to move the pointer, you could move the application (web page) instead. I wrote a simple html form that has some entry fields in it. When you move the mouse onto the form, the form moves.

You can see a demo of the moving form at jsfiddle. Try to click on one of the input fields to see the effect.

I used the jquery shake effect to achieve this. The javascript for the shake effect looks like this, and just causes the form to move up and down whenever the mouse is moved over it:

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

Although the form only moves up and down, I think it has the desired effect. You can play with the parameters (direction, times, distance, as well as the un-named "1000" above) to tweak the form movement.

Why not use a hardware solution? There are certain mice out there that you can put weights in, like the Logitech G500. Instead of putting in a weight, put in a small oscillating motor that makes the mouse shake slightly. This also simulated the actual disorder more: it's not just the cursor that shakes, but the entire hand and mouse. And it also means you can show other software than websites.

Instead of a mouse with a weight slot, you can also just tape something to the mouse, but that's more noticeable.

As you were thinking about doing it with a custom mouse driver I suppose a small program running on the PC would do either? If this is the case, here is a small snippet for C#, which infinitely moves the cursor randomly withing a range of plus minus 5px around the current cursor position. After each displacement the program waits 50 ms to 100 ms (not accurate!). The shakiness can be configured by adapting the values for the displacement and the pauses. I ran this in a console application and - depending on the values - it gave me quite a hard time stopping the program.

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

Here is a windows version of my xdotool script that uses AutoIt. This was my first ever AutoIt script, and it took only a couple of minutes to write, so I'm sure it can be improved. Just save with the extension .au3 and run it with 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

Controls

• Home : Start simulation.
• pause : Pause simulation.
• Esc : Exit simulation.

Or use my compiled version from here.

You can't expect anyone to be able to hold their hands perfectly steady, so one thing you can consider is,

1. Explain to users what you're doing and,
2. Make the clickable elements on the demo page much smaller than normal.
3. Increasing the mouse sensitivity on the example system to the maximum.

My reasoning is (caveat, I am not an expert in ux or medicine) by making the click-able elements smaller, you creates a similar problem for most people that a person afflicted with Parkinson's disease would face with an everyday web site.

You can use an old-age simulation suit, such as the one described in http://www.dailymail.co.uk/health/article-2573779/Deafness-shaking-hands-shuffling-The-old-age-suit-used-teach-hospital-staff-feels-elderly.html">this</a> article... I suspect the hand-tremors part is just a vibrating motor strapped around the wrist, plus some thick gloves to make the hands generally clumsy.

• In your DIV, CSS-hide the cursor using cursor:none;
• Create a .png Cursor image and move it (left, top) with jQ on mousemove
• Randomize the .png margin-left and margin-top using a setTimeout (to make the re-positioning smooth use CSS3 transition or do it with jQ .animate()).

Note: The script cannot know if the hand is still on the 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>

The low-level parts of simulating the tremor are well answered by now. I will add something focusing on the kind of tremor to simulate:

Most answers implement a mouse cursor that is moving on a random path with some fixed maximal step width in X and Y direction.

This should work well enough for the use case of making it hard to hit a specific area like a button.

For the more general issue of simulating UI problems caused by a tremor from Parkinson's disease, it would be at least interesting to actually simulate the hand movements of this kind of tremor.
I suspect the random walk may not be a very good approximation.

It may be hard to get hold of real hand trace data of tremor movement of course, but there are certainly papers about analyzing this kind of tremor:

The paper Parametric Representation of Hand Movement in Parkinson’s Disease is about how to best plot 3D hand movement traces.
The paper is paywalled, but the preview on the top right, labeled "Look Inside >" on the book image, shows some interesting plots of different representations of hand trace data.