Show HN: Boing

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.

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?

fantasitic

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);

Oh random Flash apps, how I miss you

The original is pretty low, it appears to be sped up. Check the network panel.

Hi

I would love to see an accurately simulated version of this, à la https://www.engine-sim.parts/

so satisfying.

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.

As a phone user, I hate you, I hate how good this is. That counter is just mocking me.

I needed this. Thank you.

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.

Most excellent.

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.

Can we add accelerometer support? :D

Love this! It's highly addictive. (No guilt)

Finally!

Time to recreate the classic: https://www.youtube.com/shorts/pTgJaJYHIAs

I noticed that the sound changes depending on how you interact with it. Neat

There goes my evening.

There seems to be a bug. If I catch it mid boing, the sound doesn't stop.

boingboingboing

take my upvote. That's hilarious

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 :-)

Finally something I actually want to pay for!! Give us a premium tier with exclusive boingers plz

Is this physics based audio?

I love this.

Online unminifier doesn’t work? E.g. https://www.unminify2.com/

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.

This is the natural thing to make with this tool: https://youtube.com/watch?v=5VGLPP70Xtw

I liked it, would love to code it

Recreated a kids version on Codorex:

https://codorex.com/shared/Ko4qJfnIKEjxDwqN2NAGueqWxYJFiz1F

BoingBoingBoingBoingBoing

Looks like a simple exponential drag/sprint-return simulation using requestAnimationFrame.

Here is AI's implementation. https://jsfiddle.net/z0or7d2y/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.