javascript - 用鼠标在网页上模拟震颤（例如帕金森病）？(Simulating tremor (from e.g. Parkinson's Disease) with the mouse on a webpage?)

Question

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, eg 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.

(因为JavaScript不允许直接移动鼠标光标，所以我正在寻找其他方法来实现这一点。)

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.

  (通过CSS隐藏鼠标光标，将摇动鼠标光标的GIF动画放在原始光标的位置（使用JavaScript），然后使目标链接每隔几秒钟只能点击一次左右。)

  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.

(虽然第一个想法很酷，但我无法找到像这样的工具，无论是Mac还是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?

(有人有另一个想法吗？)

  ask by Joshua Muheim translate from so

Answer 1

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

(我使用指针锁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

(这是我的GitHub页面的链接： https ： //aristocrates.github.io/pointer-lock-demo)

And here is the link to my repo: https://github.com/aristocrates/pointer-lock-demo

(以下是我的回购链接： https ： //github.com/aristocrates/pointer-lock-demo)

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

(重要的javascript代码包含在canvasLoop(e)方法的app.js中。)

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.

(还有很多东西你可以改进，但希望这可以帮助你开始。)