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 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.

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

@gregasadetsky: you should make it social… you know, like, just because. Like I want to be able to send my sister my latest “Boing,” and see what she thinks of my technique.

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.

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.

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.

Oh it needs a total boings by everyone counter!

This is so comforting I love it!!!

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.

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?

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

Oh random Flash apps, how I miss you

Is this physics based audio?

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.

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.

If you manage to push it all the way down directly in the middle it boings forever

Amazing to see software like this without sign-in requirements or paid subscriptions!

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.

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

Challenge accepted: https://boing.playcode.io.

three.js, audio generating.

Man, slow MO + plot the vibration freq on the axis.

I had to stop at 100 or I would have been there all day.

It's broken! Now when I boing it, it goes totally wild instead of behaving as expected. Did somebody hack it?

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

I'm slightly ashamed of how many times I boinged this. Great work!

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

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

Could you include a dark mode? Great fun.

How many before you stopped? I am at 37.

I liked it, would love to code it

AI?

I needed this. Thank you.

There goes my evening.

Can we add accelerometer support? :D

boingboingboing

Most excellent.

when haptics

absolute peak, love it

so satisfying.

fantasitic

[dead]

[dead]