How to Animate Multiplayer Cursors • Hacker News Board

Re: How to Animate Multiplayer Cursors

#11

Post by acomms » Tue, Jul 05, 2022, 4:02 PM UTC

jewel wrote: post #6

There's another approach that might work better. 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.

I like this solution but would latency create issues? You'd only be sending 100ms worth of motion every ~120ms. Would you just drift 200ms behind with every passing second (20ms behind after each 100ms batch)? I think I may be missing something though.

Re: How to Animate Multiplayer Cursors

#12

Post by stevenfabre » Tue, Jul 05, 2022, 4:10 PM UTC

cousin_it wrote: post #9

jewel wrote: post #6

There's another approach that might work better. 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.

Yeah, wanted to say the same thing. If latency is the only problem, just batch up the updates and replay on the other end. If bandwidth also becomes a problem, only then start compressing the data. But to be honest, if we can stream video over the internet, we surely have enough bandwidth to stream cursor positions.

Good point, it's also important to consider this in the context of the application that will use those multiplayer cursors. It's important that the state of the document matches the cursors, so it makes sense to have both presence (cursors, selection) and storage (document data) be perfectly in sync even if that means having a slight 80-200ms delay.

Re: How to Animate Multiplayer Cursors

#13

Post by javajosh » Tue, Jul 05, 2022, 4:12 PM UTC

jewel wrote: post #6

There's another approach that might work better. 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.

Agreed. This would be only slightly annoying if you're talking to the person. But 100ms or even 200ms is an acceptable latency, especially if it's constant. This solution is not just simpler, but it's also more efficient as you can bundle the data up efficiently, and include state changes as well.

There is a lot of prior art in this space, btw. I remember Meteor.js having a great real-time demo over websockets that actually used predictive techniques to keep things (imperfectly, but still impressively) 0 latency.

Re: How to Animate Multiplayer Cursors

#14

Post by cableshaft » Tue, Jul 05, 2022, 4:20 PM UTC

stevenfabre wrote: post #4

sghosh2 wrote: post #3

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

That would be pretty meta! "how to create how to interactive articles" :)

I'm super interested in this. I have a few interactive articles I'd like to make, but I'm not sure what tech to use for it to make it relatively quickly and without taxing the page too much.

Was thinking maybe the Phaser game framework, but that might be too heavy, especially if there needs to be 7 or 8 of them on the same page.

Re: How to Animate Multiplayer Cursors

#15

Post by schneegansmarie » Tue, Jul 05, 2022, 4:24 PM UTC

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.

Re: How to Animate Multiplayer Cursors

#16

Post by AnotherGoodName » Tue, Jul 05, 2022, 4:47 PM UTC

acomms wrote: post #11

jewel wrote: post #6

There's another approach that might work better. 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.

I like this solution but would latency create issues? You'd only be sending 100ms worth of motion every ~120ms. Would you just drift 200ms behind with every passing second (20ms behind after each 100ms batch)? I think I may be missing something though.

You actually intentionally start with more playback delay with this method and sync playback with the other user intentionally 300ms behind (assuming a 100ms latency)

So the remote user packets up 100ms of mouse movement with timestamps, sends it with ~100ms latency. Your side now has a buffer of ~100ms to start playing the positions back.

This also removes all jitter in the playback from varying latency (up to the point the jitter stays under 100ms).

All of the above numbers are made up for this example. You can adjust the playback delay as much as needed for smooth playback.

Re: How to Animate Multiplayer Cursors

#17

Post by fullstackwife » Tue, Jul 05, 2022, 5:54 PM UTC

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.

Re: How to Animate Multiplayer Cursors

#18

Post by agitator » Tue, Jul 05, 2022, 5:55 PM UTC

I was hoping that this article would go into deeper techniques than just interpolation and splines.

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.

Re: How to Animate Multiplayer Cursors

#19

Post by dwallin » Tue, Jul 05, 2022, 5:58 PM UTC

I think it's a mistake to just drop most of the data and then try to rebuild the lost data afterwards.

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.

For example, each update take your cursor point set and construct a bezier curve that best fits the data.

Re: How to Animate Multiplayer Cursors

#20

Post by somehnacct3757 » Tue, Jul 05, 2022, 6:01 PM UTC

This is analogous to player position in any multiplayer game.

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

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!