butt-sim

I've wanted a visual simulation of how scuttlebutt replication works for a while...so here's a start to it! I'm building it vanilla JS and canvas (for the moment). Here's where I've got to with a little tinkering today

a chonky gif of messages being replicated from a Blue peer, to a Red peer. This peer then gossips those messages onto a Green peer.

cc @Murilo Polese

Repo: https://gitlab.com/mixmix/butt-sim

Gitlab-pages: https://mixmix.gitlab.io/butt-sim/

This weekend I worked on Vector + Peer Classes.
I implemented crappy in-memory logs (no cryptography, it's totally insecure scuttlebutt!), and createHistoryStream!
I've been building things with ES modules because it means I can develop without a build step. But I hit a trip-step when I wanted pull-stream which is a CommonJS module ... so I hacked a new ESM version into existence!

pull-esm

npm i pull-esm --save-dev
cp node_modules/pull-esm/dist/index.js lib/pull-stream.js

Then you can import it in your js like so:

import pull from './lib/pull-stream.js'

I have no idea what I'm doing with ESM ... but it's working so I'll keep going?

Added the ability to click and drag peers around. canvas is fun!

Today I took the day to just potter around. Significant feeling progress on butt-sim:

• completed a Peer model (complete with log, indexes, streaming methods)
• added a Packet model
• refactored the app to use new models
  • have peers publish "follow" messages
  • make peers intermittently publish messages
  • simulate intermittent connections between peers
• added a color pallette made by a designed :D
• added a visualisations for:
  • active peer connections
  • the messages each peer has in their log (color-coded)

design gets messier with 2 "pubs" and 5 peers

messed around with visualising the "missing messages" for each peer (as in the messages for each peer that you don't have yet). did this because I wanted to make it easier at a glance to answer "do I have it all?
code + look got messy

Ideas:

• different log views:
  • display the literal log ordering (a scramble of colours)
  • don't show logs by default.. then when you hover a node show how many messages each log has of the hovered peer
• add a collection of "transforms"
  • each transform gets (state, item) where item is something you want to be moving, the transform returns a tick() function
  • on each animation tick, execute each transform tick
  • these transforms could be user to do force based calculations for moving the item
  • could have a "destroy", which destroys the transform
  • could be non-linear movement

TODO:

• change the packets just track their distance from fromPeer to toPeer, and then always increment the distance
  • this would ensure packets always arrive in the order they're sent

If you'd ever like to meet up and talk about possible ideas (feedback on what I've got, different places it could be taken, how to handle having even more node without it being a total mess..., also if you've got things you'd like to explore I'm keen to support that too)
cc @Murilo Polese @Mix Android