How to Animate Multiplayer Cursors • Hacker News Board

Re: How to Animate Multiplayer Cursors

#61

Post by Etherlord87 » Thu, Jul 07, 2022, 11:36 AM UTC

Sohcahtoa82 wrote: post #39

gernb wrote: post #37

Earlier quoted context omitted.

Am I missing how that would work? That's an exponential increase in bandwidth needed to send all the mouse positions. 1 position per 100ms per player vs 10-30 per 100 ms per player. Those positions all have to be propagated to other players. so in the first case, 10 players = 10 positions per 100ms. In the 2nd case is 100-300 positions per 100ms.

Yeah but stop and think about how little bandwidth it still is. X and Y can easily be 2 bytes each, 4 bytes total. 100 samples per second is a mere 400 bytes per second. You could do it from a dialup modem from the early 90s!

Well spotted, and in reality it would more likely be 4096x4096 plane, encoded as 12 bits + 12 bits = 3 bytes. And probably 30 FPS giving 90 B/s. So the only problem is how often you want to send those packets, but the bandwidth of the cursor data becomes completely irrelevant.

Re: How to Animate Multiplayer Cursors

#62

Post by Etherlord87 » Thu, Jul 07, 2022, 11:37 AM UTC

Aeolun wrote: post #46

Sohcahtoa82 wrote: post #39

Earlier quoted context omitted.

Yeah but stop and think about how little bandwidth it still is. X and Y can easily be 2 bytes each, 4 bytes total. 100 samples per second is a mere 400 bytes per second. You could do it from a dialup modem from the early 90s!

You could, but I think for most web applications the authors wouldn’t think about binary encoding. So you’d end up with something like: {“x”:50,”y”:56} Encoded as a UTF8 string, which is 15 bytes, x100 is 1.5kb/second/participant. Ok, I guess that’s still not that much.

So you implement spline logic rather than a byte stream? Doesn't make sense to me.

Re: How to Animate Multiplayer Cursors

#63

Post by Etherlord87 » Thu, Jul 07, 2022, 12:46 PM UTC

Stampo00 wrote: post #8

The spline stuff is super useful to me for another non-cursor idea I've had simmering. 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?

You're comparing the end-path, but the CSS with easing just isn't smooth, because the easing abruptly stops when the target changes. Without easing you still have abrupt changes in cursor speed. In the end, as calculated above, you only need 90 bytes per second for 30 FPS cursor movement, so why bother... Maybe in your case there's more objects and then it makes sense to approximate, but then if you can deal with some CPU usage for that, you can build a detailed bezier curve, and then unsubdivide it where it wouldn't change the overall shape much (probably detectable with segment length). This way the approximation is done on the sender that has the entire data, rather than on the receiver.

Re: How to Animate Multiplayer Cursors

#64

Post by philsnow » Sat, Jul 09, 2022, 4:20 PM UTC

dwallin wrote: post #19

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…

Nobody will ever see this response since the article was posted 3 days ago but:

Another advantage of doing it this way is that the sender can downsample on large/gross movements that would render faithfully as splines with fewer points, and send more samples on tight movements.

If you're not sending uniformly-spaced (in time) samples, though, you'll want some kind of timing information encoded as well.