There's another approach that might work better.<p>Instead of sampling the mouse position every 100ms, you'd save off all the mouse positions, and then send the latest batch every 100ms. The other side would then replay the exact positions, just delayed by 100ms. It'll end up with the same latency as these motion smoothing approaches, while only using slightly more bandwidth.
Not quite the same thing, but the author (and others) might be interested in some modern techniques used in the game industry to filter inputs:<p><a href="https://twitter.com/evil_arev/status/1128062338156900353" rel="nofollow">https://twitter.com/evil_arev/status/1128062338156900353</a><p><a href="https://www.shadertoy.com/view/NlcXWM" rel="nofollow">https://www.shadertoy.com/view/NlcXWM</a>
The animations on the blog itself are incredible. Would love to read something in the future about how you guys put this together (i.e. what frameworks, components, tooling is used to generate these blogs).
I think it's a mistake to just drop most of the data and then try to rebuild the lost data afterwards.<p>Nothing requires you send just a set of points across. A better approach is to transform and compress the data BEFORE sending it across the wire. This way you get the benefit of using all the available data to create a more accurate simplification.<p>For example, each update take your cursor point set and construct a bezier curve that best fits the data.
This is analogous to player position in any multiplayer game.<p>One additional parameter to keep in mind is how real-time does your simulation of remote players need to be? If you don't need real-time positioning there's a whole other dimension of shortcuts you can take by introducing what amounts to a 'streaming delay'.<p>In a lot of these apps the cursors can't interact with each other so you have no need for real-time positioning and its accompanying smoothing techniques. Cheat cheat cheat! That's how games get their performance, way more often than being smart they're clever opportunistic cheaters!
The spline stuff is super useful to me for another non-cursor idea I've had simmering.<p>But I'm torn by this. The spline approach seems to look the most accurate. But when all three approaches are shown at the same time at the end, I think the spring animation might look more visually pleasing. But then, if the spring approach is only degrees better than CSS transitions, is it really worth all the extra code?
I was hoping that this article would go into deeper techniques than just interpolation and splines.<p>I would be cool to see an example of how a Kalman filter approach would compare in terms of precision and latency. My expectation is that it would be the best of both worlds.
Another potential approach could be using the Web Animations API with an additive/relative animation approach via the `composite: 'add'` option. I say potential as it really only fully works in Chrome atm — Firefox has it but has weird rendering bugs and Safari says it has experimental support but I've never managed to get it working.<p>I like the potential of this approach as it lets you get smoother results than just CSS transitions yet doesn't require you to use a RAF loop-based animation library.
It depends on the app, but in some cases you should also include content identifier to the usual X,Y coordinates, as from the user perspective it is more important to see the cursor hovering on top of something instead of being "very close". The meaning is different in such case.
Would be interested to hear a signal processing perspective on this problem. I feel like splines might be susceptible to creating false information (e.g. ringing/overshoot), but I don't know enough about it.
I always felt like using a CSS ease transition between points would be enough. Love the spline approach with perfect-cursors, cursors really feel like they're being moved by real people.
I love this article! Great analysis and solutions. It's nice when user interface designers care enough to think through, implement, try out, and refine such important details.<p>I developed a multi player version of SimCity for X11 that I released in 1993 and demonstrated at the InterCHI '93 Interactive Experience, which showed you other player's cursors moving around and editing the map, but of course it required a fast network to run on and updated all the clients synchronously, due to the limitations of X-Windows, so there were no interpolation issues. (X-Windows clients aren't even capable of performing local computation and feedback the way NeWS clients could and web browser clients now can, so it was a moot point.)<p><a href="https://www.donhopkins.com/home/catalog/simcity/simcity-announcement.html" rel="nofollow">https://www.donhopkins.com/home/catalog/simcity/simcity-anno...</a><p><a href="https://www.donhopkins.com/home/catalog/simcity/simcitynet.html" rel="nofollow">https://www.donhopkins.com/home/catalog/simcity/simcitynet.h...</a><p>The multi player demo showing different kinds of voting dialogs, multiple cursors, the tool palette and pie menus, and the voting "yes" shortcut of building the same thing in the same place, starts at 5m45s:<p><a href="https://www.youtube.com/watch?v=_fVl4dGwUrA&t=5m45s" rel="nofollow">https://www.youtube.com/watch?v=_fVl4dGwUrA&t=5m45s</a><p>One interesting thing about the SimCity cursor was that it was color and shape coded to show which tool was selected. The tool palette (and also the pie menus which had the same icons and layout as the tool palette) served as a legend for the cursor by showing the same color coded outline around the icons as the cursor used. So you could tell which tool other users had selected. You could hide the tool palette to make the map bigger, and use the pie menus instead, which were much more efficient.<p>Multi Player SimCityNet for X11 on Linux: Demo of the latest optimized Linux version of Multi Player SimCity for X11. Ported to Unix, optimized for Linux and demonstrated by Don Hopkins:<p><a href="https://www.youtube.com/watch?v=_fVl4dGwUrA" rel="nofollow">https://www.youtube.com/watch?v=_fVl4dGwUrA</a><p>Micropolis Online (SimCity) Web Demo: A demo of the open source Micropolis Online game (based on the original SimCity Classic source code from Maxis), running on a web server, written in C++ and Python, and displaying in a web browser, written in OpenLaszlo and JavaScript, running in the Flash player. Developed by Don Hopkins:<p><a href="https://www.youtube.com/watch?v=8snnqQSI0GE" rel="nofollow">https://www.youtube.com/watch?v=8snnqQSI0GE</a><p>Source Code:<p><a href="https://github.com/SimHacker/micropolis" rel="nofollow">https://github.com/SimHacker/micropolis</a><p>HAR 2009 talk: Constructionist Educational Open Source SimCity:<p><a href="https://donhopkins.medium.com/har-2009-lightning-talk-transcript-constructionist-educational-open-source-simcity-by-don-3a9e010bf305" rel="nofollow">https://donhopkins.medium.com/har-2009-lightning-talk-transc...</a>