4 ms·
I love this, but it suffers from an issue I've observed in my own attempts to make mouse-based drawing tools in the browser with JavaScript. If you move your m
by itsajoke 6y ago
I love this, but it suffers from an issue I've observed in my own attempts to make mouse-based drawing tools in the browser with JavaScript. If you move your mouse too quickly, the low polling rate of events becomes evident because rather than showing a smooth curve, you see straight lines that are drawn between the two points that were captured for each event.
This is my white whale.
I don't currently have the math chops to fix this in my own implementations, but there are others who have succeeded where I have failed. For example, the web client/controller thingy for the game Drawful 2 by Jackbox has addressed this. Since you can't increase the polling rate in the browser and you can't arbitrarily read the mouse position during things like requestAnimationFrame, you're forced to interpolate the movement of the mouse given the past few events. They're using curves in Drawful 2 instead of straight bitmap-style canvas drawing like in the first Drawful.
But beware, this has a downside. It's very easy to incorrectly interpolate the movement and exaggerate the curve, making it curvier than the actual movement of the mouse.
I guess the web browser just wasn't designed with precision input capture in mind. But that doesn't mean we can't still aim for improvement. For a game like Drawful, more options are probably overkill. (They don't allow you to erase by design.) But for an art tool like this, it might be worth adding an option for input smoothing along with knobs to tweak to adjust the smoothing amount. Or not. I certainly can't fault you for not implementing such a feature given that I can't seem to get it to work.
- itsajoke 6y agoI did a little research into this. This website [1] mentions something I'd never heard of before. That some browsers "collapse" real mouse events into fewer "fake" events that tie the event poll rate to your monitor's refresh rate. Even though I'm using Firefox and not Chrome like they mention, I'm seeing that exact phenomenon. The highest number of mouse events I can seem to generate is 60 per second. However, this other website [2] is showing me events on the order of up to 124 Hz. Either that site is doing something special or it's lying. The JavaScript there is decently obfuscated. I'm going to spend a few minutes trying to deobfuscate it and see what I can find out. [1] https://www.vsynctester.com/testing/mouse.html https://www.vsynctester.com/testing/mouse.html [2] https://zowie.benq.com/en/support/mouse-rate-checker.html https://zowie.benq.com/en/support/mouse-rate-checker.html
- itsajoke 6y agoI think I sussed out the secret sauce from that Benq website. They're using the experimental getCoalescedEvents [1] function to uncollapse the mouse events! [1] https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getCoalescedEvents https://developer.mozilla.org/en-US/docs/Web/API/PointerEven...
- codezero 6y agoI’ve seen some systems use a Bézier curve to a make a realistic stroke with limited data points.