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

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
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.)