Live data from Hacker News

Show HN: Boing

boing.greg.technology

81–90 of 156 posts

Re: Show HN: Boing

#81
post #6

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=endCli…

Almost gave up getting this to work...

(function () { function rateToDistance(rate) { const minR = 0.09; const maxR = 4.65; 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(); })();

Re: Show HN: Boing

#82

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.

Same is true in a lot of old platformer games. Real physics feels horrible.

Yeah, I really like the low gravity during my dreams

Re: Show HN: Boing

#84

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.

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. https://elastomania.com/

I remember playing this game when I was like 12 years old, good times

Re: Show HN: Boing

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

Re: Show HN: Boing

#90
post #77
post #6

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=endCli…

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
Post reply on HN