Love this. Had to cheat, naturally.
setInterval(()=>{const canvas=document.getElementById('canvas');const startX=266;const startY=198;const rect=canvas.getBoundingClientRect();const startClientX=rect.left+startX;const startClientY=rect.top+startY;let endClientX,endClientY,distance;do{endClientX=Math.random()*window.innerWidth;endClientY=Math.random()*window.innerHeight;const dx=endClientX-startClientX;const dy=endClientY-startClientY;distance=Math.sqrt(dx*dx+dy*dy)}while(distance<25);const dispatchMouseEvent=(type,target,clientX,clientY)=>{const event=new MouseEvent(type,{view:window,bubbles:true,cancelable:true,clientX:clientX,clientY:clientY,screenX:clientX+window.screenX,screenY:clientY+window.screenY,buttons:type==='mouseup'?0:1,button:0});target.dispatchEvent(event)};dispatchMouseEvent('mousedown',canvas,startClientX,startClientY);setTimeout(()=>{dispatchMouseEvent('mousemove',window,endClientX,endClientY);setTimeout(()=>{dispatchMouseEvent('mouseup',window,endClientX,endClientY)},1);},1);},1);Funny 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?
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.
I remember playing this game when I was like 12 years old, good times
Also worth checking out, the FOSS clone X-Moto
I spent thousands of hours on that game.. just too good :)
Same is true in a lot of old platformer games. Real physics feels horrible.
Yeah, I really like the low gravity during my dreams
If you manage to push it all the way down directly in the middle it boings forever
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.
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
I'm slightly ashamed of how many times I boinged this. Great work!
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.
Of course! https://github.com/gregsadetsky/boing
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/
Looks like a simple exponential drag/sprint-return simulation using requestAnimationFrame.
Here is AI's implementation. https://jsfiddle.net/z0or7d2y/1/
If they wanted an AI answer, surely they would have asked AI
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.
Oh it needs a total boings by everyone counter!
alright, I implemented a world boing counter :-) thanks for the great idea
Nice, could you share how you implemented it?
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
Total boing heatmap!
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
ha :-)
It doesnt boing rotationally, only in a straight line. Like the spring isn't really there.
If I bend it right round to one side so the spring is curved I expect it to bounce round to the other side.
you are right - just improved this and I think it looks a lot better (deploying now)
thanks!
Anyone want to commission an AI to make a sequel called Boing or Krill where you have to choose between boinging the spring or playing a game of snake (drawn as a line of krill)?
I would love to see an accurately simulated version of this, à la https://www.engine-sim.parts/
TIL I don't know how to “unmute” my device anymore. My new-ish iPhone doesn't have a physical switch on the side and I can’t find it in the settings in the pulldown menu.
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 just got an iPhone 17, and presumably because it inherited its Control Centre configuration from the 13 it replaces (which had a physical switch) the silent mode toggle was not present. Tap and hold in an empty space to edit the controls and add it in.
Amazing to see software like this without sign-in requirements or paid subscriptions!
Oh random Flash apps, how I miss you
Recreated a kids version on Codorex:
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.
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?
The original is pretty low, it appears to be sped up. Check the network panel.
I had to stop at 100 or I would have been there all day.
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.
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.
Is this physics based audio?
I don't think so
Finally something I actually want to pay for!! Give us a premium tier with exclusive boingers plz
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.
This is the natural thing to make with this tool: https://youtube.com/watch?v=5VGLPP70Xtw
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.
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 :-)
I have no sound on ff ios, volume 100%
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)
Love this! It's highly addictive. (No guilt)
There seems to be a bug. If I catch it mid boing, the sound doesn't stop.
very good observation! just fixed and pushed
How many before you stopped? I am at 37.
103. Was curious if there’s any prize for hitting 100 :)
>prize for hitting 100 :)
https://www.decisionproblem.com/paperclips/
You can hate me and/or close the window at any point, friend...
Same, I thought it might be like cookie clicker
230
I liked it, would love to code it
There goes my evening.
I needed this. Thank you.
AI?
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.
boingboingboing
I noticed that the sound changes depending on how you interact with it. Neat
Most excellent.
when haptics
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.
Can we add accelerometer support? :D
so satisfying.
fantasitic
[dead]
[dead]
Waiting for somebody to write the code to recreate the Star Wars Imperial March: https://www.youtube.com/watch?v=-NDLlWtudpE
I don't think you need to move the mouse, you just need to click slightly offcenter while still bein inside the ball.
I was looking at the source and it appeared there was special handling on the mousemove event. I also had to introduce timeouts, otherwise it wouldn't work (not entirely sure why). So was being safer since I didn't want this to become a time sink :D
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(); })();
take my upvote. That's hilarious
BoingBoingBoingBoingBoing
I love this.