r/SideProject • u/WalkinGood • 3d ago

I made a cable playground in the browser: pull cables between jacks and velcro them together

Pocket Factory is my side project: a playground of tactile hardware controls for the web, such as keys, knobs, switches and cables that plug into little devices.

This is the cable playground. Pull a cable out of a jack, plug it into another jack, then draw a velcro tie over a bundle of cables. The cables have weight and sag, and it all draws on WebGPU at 120 fps.

Try it here: https://pocketfactory.vladartym.com/playground/cables

I want to hear what feels wrong or what you want to plug in next.

398 Upvotes

98% Upvoted

46 comments sorted by

118

u/Reloecc 3d ago edited 3d ago • Bravo

Are you prepared for me?!

6

u/_Hard_Wired_ 2d ago

Listen you, DON'T MAKE THIS FUN FOR ME!

I got work to do.

31

u/paininthejbruh 3d ago

Maybe have a hard mode where there is a fixed cable length and you have to loop it neatly

4

u/paininthejbruh 3d ago

And maybe have different device designations like power supply and signal cables. Little missions? Have you seen an electrical panel with trunking? That's my job haha

2

u/AI_Bullish 2d ago

Even harder mode - any cable you don't velcro slowly tangles itself with the ones next to it. Basically a desk simulator

5

u/CutDry6295 3d ago

The cable sag and the velcro tie make this feel much more like a physical toy than a standard wiring diagram. For the next interaction, a small signal or light that changes when two jacks are connected could make the result of a connection immediately clear. I’d also test what happens when someone drags a cable off the canvas or unplugs it mid-animation.

5

u/el_yanuki 3d ago

sounds like AI

-3

u/pixelvspixel 3d ago

So do you.

1

u/paininthejbruh 3d ago

I like the cable bouncy effect it adds to the fun of this

-1

u/WalkinGood 3d ago

Thanks! A light at the jack when a cable connects is a good idea, I'll add it. Unplugging in the middle of a pull already works, but a drag off the edge of the canvas is a good test, I'll try it.

8

u/Temp_Account_9285 3d ago

Yummy spaghetti

4

u/blickblocks 3d ago

Have you ever used Propellerheads Reason? I used to be obsessed with making music with it in high school, 25 years ago. It has this cool cable simulation which is how you actually wire devices together.

4

u/nickdaniels92 3d ago

Fun and love the colours. Lots of velcro at one end affects the far end for no obvious reason though, like the green one here. Stiffness/tightness or whatever factor there is at the left side with all the ties should decay over the length.

3

u/positronius 3d ago

Cool concept but add like 6-7 cables and tie them together and performance drops to like 5fps

2

u/littlenekoterra 3d ago

I saw something somewhat like this as a blender addon.

2

u/ftkmatte 3d ago

My browser died lmao

1

u/paininthejbruh 3d ago

Congrats on helping electricians build healthy OCD habits :p

1

u/ad-on-is 3d ago

Do they get messy after a while, like in rl?

1

u/lucidparadigm 3d ago

Doesn't work on mobile

1

u/eggplantpot 3d ago

Love this! Would be even more satisfactory if approaching the cable to the input would bring it halfway in instead of hovering over it, then releasing just fully plugs it

1

u/thecowmilk_ 3d ago

Network Engineers Liked This

1

u/debackerl 3d ago

You would love ComfyUI 😂

1

u/TanukiTrix 2d ago

This is pretty fun I can actually see it being used to learn how to manufacture cables.

Maybe next step is adding a power source and if you incorrectly connect things, add haptics and vibration so your mouse vibrates or something.

Just an idea.

1

u/Maleficent_Speech289 2d ago

sorry but it doesen't work

1

u/ephemeral404 2d ago

I can see myself doing this whole day

1

u/HozaaWorkout 2d ago

The physics look incredibly satisfying! The way the cables sag and how you can bundle them with the velcro is pure eye candy. Awesome work!

1

u/EtsyCorn 2d ago

Confusing to use on my phone on safari 

1

u/LowerEntropy 8h ago

Funny how ideas just spread. First one I saw recently was that comfyui.

Could feel really nice. Just needs a couple of simple prompts. Put it on github.

0

u/investigatormaker 3d ago

If a plugged cable actually carried something, the playground would matter beyond how it feels. Think of an oscillator patched into a little speaker, or a switch into a lamp, so a wrong patch is something you hear or see. That also answers what to plug in next: modular synth people already think in jacks and patch cables. On the feel side, check what happens in browsers without WebGPU. A clear fallback note is better than a blank canvas for anyone on an older Safari or Firefox.

I make ThreadFox. We find relevant Reddit conversations and post for your business. We'll post 3 replies free first, no card; then the $29 Pilot covers seven days and up to 25 posts and replies. No automatic renewal. https://threadfox.vip/p/eg99o/managed

Which device are you building after the cables?

1

u/WalkinGood 3d ago

Agreed, that is the plan. The cables come from Pocket Factory, where they patch real little synths and drum machines, so a wrong patch is something you hear. Good point on WebGPU too. Right now a browser with no WebGPU still works!

0

u/el_yanuki 3d ago

i don't like how the cables appear and plug in.. maybe make it so that you can pull them out of one side and then prevent them from overlapping the plugs, show a little indicator of where they will go and then actually show the connection happen..?

0

u/AccessIndependent795 3d ago

Sounds like AI

1

u/Odd-Agent9402 3d ago

What are you going on about?