Show HN: Boing
(boing.greg.technology)769 points by gregsadetsky 3 days ago
769 points by gregsadetsky 3 days ago
Waiting for somebody to write the code to recreate the Star Wars Imperial March: https://www.youtube.com/watch?v=-NDLlWtudpE
Only the first few notes
(function () { function rateToDistance(rate) { const minR = 0.09; const maxR = 4.65; if (rate < minR) rate = minR; if (rate > maxR) rate = maxR; const t = (rate - minR) / (maxR - minR); return 400 * t; } function dispatchMouseEvent(type, target, clientX, clientY) { const event = new MouseEvent(type, { view: window, bubbles: true, cancelable: true, clientX, clientY, screenX: clientX + window.screenX, screenY: clientY + window.screenY, buttons: type === "mouseup" ? 0 : 1, button: 0, }); target.dispatchEvent(event); } const canvas = document.getElementById("canvas"); function triggerPull(distance) { const rect = canvas.getBoundingClientRect(); const startX = 266; const startY = 198; const startClientX = rect.left + startX; const startClientY = rect.top + startY; const endClientX = startClientX + distance; const endClientY = startClientY; return new Promise(resolve => { dispatchMouseEvent("mousedown", canvas, startClientX, startClientY); setTimeout(() => { dispatchMouseEvent("mousemove", canvas, endClientX, endClientY); setTimeout(() => { dispatchMouseEvent("mouseup", canvas, endClientX, endClientY); resolve(); }, 50); }, 50); }); } const semitones = 12; const notes = { G: Math.pow(4, -9 / semitones), A: Math.pow(4, -7 / semitones), B: Math.pow(4, -5 / semitones), C2: Math.pow(4, -4 / semitones), D2: Math.pow(4, -2 / semitones), E2: Math.pow(4, -0 / semitones), F2: Math.pow(4, 2 / semitones), G2: Math.pow(4, 4 / semitones), }; async function playWithPitch(rate) { const r = rateToDistance(rate); await triggerPull(r); } async function playScale() { const qrt = 200; const hlf = 400; const fll = 800; const pause = 15; const playNote = async (note, dur) => { await playWithPitch(note); await new Promise(res => setTimeout(res, dur)); }; const loop = async () => { await playNote(notes.E2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.E2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.E2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.C2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.G2, qrt); await playNote(notes.E2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.C2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.G2, qrt); await playNote(notes.E2, fll); await new Promise(res => setTimeout(res, pause)); await new Promise(res => setTimeout(res, pause)); await new Promise(res => setTimeout(res, pause)); }; await loop(); await loop(); await loop(); } playScale(); })();
DAMN. can you try to bring in my physics code (err it'd have to be 3d-ified, but still)? was this oneshotted-ish?
cheers, 3d is glorious.
Almost gave up getting this to work...
(function () { function rateToDistance(rate) { const minR = 0.09; const maxR = 4.65; if (rate < minR) rate = minR; if (rate > maxR) rate = maxR; const t = (rate - minR) / (maxR - minR); return 400 * t; } function dispatchMouseEvent(type, target, clientX, clientY) { const event = new MouseEvent(type, { view: window, bubbles: true, cancelable: true, clientX, clientY, screenX: clientX + window.screenX, screenY: clientY + window.screenY, buttons: type === "mouseup" ? 0 : 1, button: 0, }); target.dispatchEvent(event); } const canvas = document.getElementById("canvas"); function triggerPull(distance) { const rect = canvas.getBoundingClientRect(); const startX = 266; const startY = 198; const startClientX = rect.left + startX; const startClientY = rect.top + startY; const endClientX = startClientX + distance; const endClientY = startClientY; return new Promise(resolve => { dispatchMouseEvent("mousedown", canvas, startClientX, startClientY); setTimeout(() => { dispatchMouseEvent("mousemove", window, endClientX, endClientY); setTimeout(() => { dispatchMouseEvent("mouseup", window, endClientX, endClientY); resolve(); }, 50); }, 50); }); } const semitones = 12; const notes = { G: Math.pow(4, -9 / semitones), A: Math.pow(4, -7 / semitones), B: Math.pow(4, -5 / semitones), C2: Math.pow(4, -4 / semitones), D2: Math.pow(4, -2 / semitones), E2: Math.pow(4, -0 / semitones), F2: Math.pow(4, 2 / semitones), G2: Math.pow(4, 4 / semitones), }; async function playWithPitch(rate) { const r = rateToDistance(rate); await triggerPull(r); } async function playScale() { const qrt = 200; const hlf = 400; const fll = 800; const pause = 15; const playNote = async (note, dur) => { await playWithPitch(note); await new Promise(res => setTimeout(res, dur)); }; const loop = async () => { await playNote(notes.C2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.D2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.G, hlf); await new Promise(res => setTimeout(res, pause)); await playNote(notes.D2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.E2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.G2, qrt); await playNote(notes.F2, qrt); await playNote(notes.E2, qrt); await new Promise(res => setTimeout(res, pause)); await playNote(notes.C2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.D2, fll); await new Promise(res => setTimeout(res, pause)); await playNote(notes.G, fll); await new Promise(res => setTimeout(res, pause)); await new Promise(res => setTimeout(res, pause)); await playNote(notes.G, qrt); await playNote(notes.G, qrt); await playNote(notes.A, qrt); await playNote(notes.C2, qrt); await new Promise(res => setTimeout(res, pause)); await playNote(notes.C2, qrt); await new Promise(res => setTimeout(res, pause)); }; await loop(); await loop(); await loop(); } playScale(); })();
while true; do curl -X POST -Ss https://respected-accordion-31461.ondis.co/boing &; sleep 0.1; doneFunny thing: this feels "realistic" because it’s not perfect physics. A perfectly simulated Hooke's law spring actually looks fake and too stiff. But if you let the animation wobble a bit more and slow down the damping, our brain reads it as weight and squishiness.
It’s basically controlled sloppiness.
> this feels "realistic" because it’s not perfect physics. A perfectly simulated Hooke's law spring
Confused. Perfect physics means perfectly simulating reality, not perfectly simulating an unreal idealized formula. Are you saying Hooke's law doesn't feel realistic or are you saying a simulator for a realistic spring doesn't feel realistic?
In reality, nothing is perfect. Materials are never 100% one material. Rustness is imperfection, the weight and material of the ball, and the place it's attached are also consideration points, how firmly it is attached, and with which material. A "perfect" simulation of the spring itself would have to consider all these variables, and they almost never do.
And even if you somehow included "everything" with the "perfect" equations, you'll end up with a lot of stuff which does not have a good closed form solution anyways and good luck getting that running (e.g. the dynamics around the air resistance/sound generation) via approximations both accurate enough that it looks better than "faking it" and fast enough that it's actually usable interactively.
This leads to what GP was saying: many just cut things off at "Hooke's law simulates a spring, so I'll use that, but the rest is a bit too much to fit so I won't do it" but "Hooke's law simulates a spring but adding a bit of not-physics based fluff approximates all the rest" actually gives far superior results even though it doesn't only use perfect physics equations as the former did.
Elasto Mania is a great game from decades ago (but still for sale!) that exploits this fact to a hilarious extent. You control a motor bike with excessively wobbly physics making all kinds of stunts possible (and necessary, to complete the levels) that are spectacular and surprising.
Hooke's law is what's not not perfect physics, but an idealized version of a spring. No real spring (that we'd recognize as a spring) actually obeys it perfectly, because there is damping and friction and a bunch of things that Hooke's law does not factor in.
To get somewhat more realistic model of a spring, you a damping term, which turns it into an ODE[1].
Same is true in a lot of old platformer games. Real physics feels horrible.
Hooke's law only accounts for the force the spring applies, not the mass of the spring itself. Once you have to account for the mass of the spring, how that mass distribution changes as the string stretches & compresses, and how that alters the momentum it quickly loses its simplicity. That's far too difficult to do by hand, but it's what the real world does so I'd rather say that Hooke's law is a first-order approximation of spring force, not a perfect law for describing linear spring behavior.
This takes me back a few years when the first of my Uni friends had a baby, they spoiled him with so many toys that their lounge room was like an obstacle field where you had to be careful where to step, but despite all his toys the baby spent all his time while I was there playing with the door spring.
There's something therapeutic about door springs, that you just have to stop and play with it.
* I recall when the first of my primary school friends had a baby ... some years after we all left primary school.
* I recall when Cheryl had her first baby while at University. I also recall when she had her second.
~ https://en.wikipedia.org/wiki/Cheryl_Praeger
Maybe work on making more insightful and considered comments: https://news.ycombinator.com/threads?id=brcmthrowaway
This reminds me why simple single-purpose web toys used to be so satisfying. No account, no onboarding, no "upgrade to pro" - just a thing that does one thing well. The world counter is a nice touch without being gamified into oblivion..
This is brilliant and wonderfully whimsical! The canvas manipulation approach is creative. I'm curious about the technical implementation - are you using requestAnimationFrame for smooth animation, or setInterval? Also, how do you handle performance optimization for the particle/bubble physics when there are many active elements on screen?
The Star Wars Imperial March recreation idea in the comments is fantastic - it would be interesting to see if you could extend this to support multi-track compositions or even MIDI input for more complex musical pieces!
Finally!
Time to recreate the classic: https://www.youtube.com/shorts/pTgJaJYHIAs
Heh. I expected it to be this one https://youtube.com/shorts/ocvBI_vtJwA
how would that work haha. "send last boing"? and it's a permalink.... and it repeats the boing??? I'm... considering it! :-)
That’s got to be one of the most satisfying things ever. The real device was a darling invention and this is a faithful recreation of the experience of being in time out in the 80s.
Any consideration on sharing the unminified code? I was a bit curious to read through the code and it seems like such a shame to keep it obfuscated. From a quick perusal, it seems like the bulk of the code comes from howler.js (a sound library), and the core functionality is conveniently implemented below the mobile template.
Turns out I was curious too, so I tried to de-minify it myself. Now I get to see how close I was.
Online unminifier doesn’t work? E.g. https://www.unminify2.com/
I would love to see an accurately simulated version of this, à la https://www.engine-sim.parts/
If you were Elon you would claim it's an early alpha of a world simulator that in a year will be able to perfectly predict weather and stock market.
alright, I implemented a world boing counter :-) thanks for the great idea
Flask + SQLite in WAL mode.
In-memory ip address rate limiting.
Hosted and deployed on a ~$20 EC2 server using the open source tool I've been working on, https://disco.cloud/
We were at ~120 requests/second earlier and it took it on, no sweat.
Amazing! The numbers are insane already! What is the average boing per user?
maybe also de-boing the boining now that it's calling the server. i think the js script pasted here will show you it's needed
there's rate limiting so the script posted in this thread actually mostly hits 429s :-) but yeah, great pointer
I considered it for a minute, but then I remembered https://xkcd.com/1138/ .. ha. but let me know if you have other thoughts about this
The sound is not physics based, the boing sound keeps going if you grab the head, likewise sometimes the sound ends before the vibration finishes.
Well spotted! I'd love a synthesized version - if anyone has pointers.
Having done a fair amount of audio physical modeling, I'll just say a synthesized version that's both fast and realistic would be possible but difficult. The difficulty is at least "it would make an impressive presentation at DAFx [1]", though I might be underestimating it, and it's more "you could make it your master's thesis at CCRMA [2]"
Ideal springs are a common, simple element in this field, but this kind of spring is very much not that.
You're probably better off improving the sample-based version by fading out the audio when necessary and using different samples based on the way it's triggered. If you have "ultra-dry" samples (maybe taken with a contact mic), you can add a convolution effect with a well-chosen impulse response, this will allow you to sharply cut off or adjust the audio and still have a natural-sounding tail.
I'm extremely grateful for this. My most deeply held secret is that I wish I could do this for a living - digitally modeling weird/beautiful objects/instruments and work on that forever haha. (And maybe make pedals out of them, I don't know)
If you don't mind humoring me (I'm quite the novice in this field), if I automated the recording of "all" possible positions for a spring (say I had a motor positioned in a way that would let me pull the spring in any polar direction), would that make modeling potentially easier?
There might be a "train an AI, here's 1000 recordings" angle, but I'm not necessarily interested in/asking about that.
Just strictly for modeling, would it help the R&D phase to have a lot of high sample rate recordings? Thanks a lot!
P.S. Also, if you have a good intro to DSP class/book, I'd love to hear it. I know about a few, but a recc is always appreciated
i love this. it reminds me of simpler times when we’d have iphone apps/games that would explore a single mechanic and implement it really well.
I noticed that the boing sound gets deeper and lower with smaller-magnitude boings. Is the boing audio generated procedurally/realistically in response to the physics of the boing, or is just playing a premade boing sound effect that's dynamically pitch shifted?
Recreated a kids version on Codorex:
It's not, unfortunately. I'd love to find a synthesized version of a boing sound. Perhaps some folks with modular experience could chime in?
My best offering is the engine sim which may or may not have a lib. https://github.com/ange-yaghi/engine-sim If nothing else, it’s a brilliant, novel oddity.
Oh good point sorry. If you open the Control Center (drag down from the top left, typically), there should be a bell icon..?
That, or Settings -> Sounds & Haptics -> Silent Mode ?
I was hypnotized for 10 minutes. This is amazing. The .technology tld is hilarious. Reminds me of technologia memes
Very fun and nostalgic. The head of the boinger doesn't seem to exactly follow the cursor/finger however, at least on mobile, it always arcs.
Are you seeing the small dotted lines when pulling very far? It's meant to show the applied tension
I see it now, I was using the Dark Reader extension which covered it up, looks good now.
There seems to be a minor bug. When I switch tabs and come back, sometimes the spring is moving. Some times a small amount, and other times it appears to be streched to the max, and extending off the top and bottom of the screen, until it calms down.
Safari, Mac.
I just wanted to write about a similar observation when using it in FireFox on Linux:
When wiggle the spring, keep the mouse inside the white area until it is at rest, press CTRL+u to see the source code, move the mouse to close the source code tab and close it - for some magical reason the spring is moving again for a little bit.
Yes, good sleuthing, that was one of the last remaining things I wanted to fix before launching.
Just fixed, should be live soon.
As a phone user, I hate you, I hate how good this is. That counter is just mocking me.
Going to give this to a cat to play with, see if he enjoys it
This is the natural thing to make with this tool: https://youtube.com/watch?v=5VGLPP70Xtw
I wasn't hearing the sound initially so I thought it wasn't working in Firefox. Put the sound all the way up and boinged again. Made me jump out of my seat. Hilarious :-)
Make sure to unmute your device - either using the physical mute rocker on older iPhones, or by disabling Silent Mode (tap the bell in the Control Center)
Challenge accepted: https://boing.playcode.io.
three.js, audio generating.
It's broken! Now when I boing it, it goes totally wild instead of behaving as expected. Did somebody hack it?
there are very specific starting points that do go wild - but it should mostly not show you those (and I should add some protection for it)
try reloading again?
There seems to be a bug. If I catch it mid boing, the sound doesn't stop.
I noticed that the sound changes depending on how you interact with it. Neat
>prize for hitting 100 :)
https://www.decisionproblem.com/paperclips/
You can hate me and/or close the window at any point, friend...
Yes! I've been toying with this project idea for a few ~months, trying out most of the models out there. The physics and the look of the spring would come out quite crazy looking, so I put it on the back burner.
This is not an ad, there's no affiliate link... but the physics & drawing code were one shot by the recently released Gemini 3 Pro. It was pretty incredible to see. Additional tweaks & boing counter server by Claude Code.
on iOS at least, that requires an additional permission, and it would take some work to get the feeling right on both iOS and Android
but I agree - I have some other mono-site-ideas like these in mind, and I think that the accelerator could be very fun. thanks for the suggestion!
I would love to, but iOS support doesn't seem possible - there's a trick [0] to make a hacky haptic vibration in javascript, but it doesn't work with the kinds of events here of drag&release. And (lame excuse, but) I don't have an Android phone to test the haptics to make sure they're semi realistic.
This might have to wait for the native app versions ha.
Love this. Had to cheat, naturally.