TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Synchronizing Pong to music with constrained optimization

321 pointsby platers9 months ago

21 comments

cesaref9 months ago
This reminds a bit of a project I coded the audio for an art exhibition around 20 years ago, which was for multiple simultaneous players. As the game got more intense it became apparent that the ball&#x2F;wall sounds were playing music, and that the three players were all actually playing one musical piece.<p>It was based around 3 arcade cabinets pointing together, so the players couldn&#x27;t see what was on each others screens.<p>This was achieved by modifying the ball speed&#x2F;direction slightly so that it arrived at the bat&#x2F;wall at a musically relevant point and triggered the correct sound.<p>Ah, here you go, Josh as a reference to it on his site: <a href="https:&#x2F;&#x2F;www.autogena.org&#x2F;work&#x2F;ping" rel="nofollow">https:&#x2F;&#x2F;www.autogena.org&#x2F;work&#x2F;ping</a>
评论 #41448679 未加载
montebicyclelo9 months ago
Very cool! As a further variation on this idea, I&#x27;m imagining training a reinforcement learning agent on atari games &#x2F; super mario, but with an additional music-based reward&#x2F;input, to try to get a &quot;musical&quot; looking playthrough... (Not sure how good it would look &#x2F; whether it would be worth it though...)
评论 #41438839 未加载
评论 #41437222 未加载
评论 #41441776 未加载
评论 #41445094 未加载
jcims9 months ago
This reminds me of those polyrhythm visualizations on YouTube (check out LucidRhythms for some great examples).<p><a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;@LucidRhythms" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;@LucidRhythms</a><p>Probably almost impossible to adapt written works &#x27;backwards&#x27; into a visualization but it might be fun to have different bars represent different notes and have the balls split for chords.
评论 #41441286 未加载
adroitboss9 months ago
This is so freaking cool! I was mesmerized watching the paddles move as the beat progressed. There are certain things that just look right which makes it beautiful.This project is one of them!
jfmc9 months ago
Prior art: Eisenfunk - Pong (<a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=cNAdtkSjSps" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=cNAdtkSjSps</a>)
评论 #41435748 未加载
评论 #41439948 未加载
评论 #41451832 未加载
entropie9 months ago
Really nice stuff. I cannot send a heart without subscribing which doesnt feel right for me.
lifthrasiir9 months ago
While technically okay, there are multiple cases where a paddle and the ball move at the almost identical speed and it looks like the paddle is pushing the ball all the time. (By the way, p[i] = 0 should be disallowed for this reason.) This is inevitable when a large d[i] is immediately followed by a very small d[i+1], but it might be able to avoid them whenever feasible.
评论 #41442340 未加载
grimgrin9 months ago
Imagining an `installation` in my space, using both my MT-80S and a display. Can I even reason about this, the timing? I&#x27;m not smart here, just interested<p><a href="https:&#x2F;&#x2F;www.matrixsynth.com&#x2F;2014&#x2F;07&#x2F;roland-mt-80s-midi-player-synthesizer.html?m=1" rel="nofollow">https:&#x2F;&#x2F;www.matrixsynth.com&#x2F;2014&#x2F;07&#x2F;roland-mt-80s-midi-playe...</a>
Angostura9 months ago
Really interesting. For some reason my brain really really hates this. I think it screws with my internal model of causality or something and I find it difficult to watch. Odd
评论 #41437100 未加载
评论 #41436818 未加载
SoftTalker9 months ago
Atari had a video music &quot;visualizer&quot; device back in the late 1970s. Designed by one of the developers of the Pong game. One of if not the first consumer product of its kind.<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Atari_Video_Music" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Atari_Video_Music</a><p>If you&#x27;ve seen the movie <i>Over the Edge</i>, Claude and Johnny have one at their house.
KolmogorovComp9 months ago
Awesome work!<p>How is the beat used to sync the pong chosen? Like for Bad Apple!, especially around 1m55 <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=bvxc6m-Yr0E" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=bvxc6m-Yr0E</a> it seems off<p>Good suggestion from a YouTube commenter, pasting it here<p>&gt; This is pretty cool.. it would be cooler if there were multiple pongs and paddles for each type of beat (like high beats and low beats)
bgoated019 months ago
This is really cool. I took an optimization class a few years back, but haven&#x27;t made the time to do anything fun with it since. This inspires me to do it.<p>I do kind of wish that the last note corresponded to a game over, though, and I wonder if a smaller screen or faster ball would widen the playing field a little. Maybe I&#x27;ll fork the code and try some of those out myself.
MeteorMarc9 months ago
Delightful. Part of the fun is that the game is a background to the music rather than the other way around that we are used to.
SamineDylah9 months ago
Absolutely wonderful!<p>&gt; &quot;We obtain these times from MIDI files, though in the future I’d like to explore more automated ways of extracting them from audio.&quot;<p>Same here. In case it helps: I suspect a suitable option is (python libs) Spleeter (<a href="https:&#x2F;&#x2F;github.com&#x2F;deezer&#x2F;spleeter">https:&#x2F;&#x2F;github.com&#x2F;deezer&#x2F;spleeter</a>) to split stems and Librosa (<a href="https:&#x2F;&#x2F;github.com&#x2F;librosa&#x2F;librosa">https:&#x2F;&#x2F;github.com&#x2F;librosa&#x2F;librosa</a>) for beat times. I haven&#x27;t ventured into this yet though so I may be off. My ultimate goal is to be able to do it &#x27;on the fly&#x27;, i.e. in a live music setting being able to generate visualisations a couple of seconds ahead being played along with the track.<p>Not sure if this is unsavory self promotion (it&#x27;s not for commercial purposes, just experimenting), but I am in the middle of documenting something similar at the moment.<p>Experiments #1 - A Mutating Maurer Rose | Syncing Scripted Geometric Patterns to Music: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=bfU58rBInpw" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=bfU58rBInpw</a><p>It generates a mutating Maurer Rose using react-native-svg on my RN stack, synced to a music track I created in Suno AI *. Manually scripted to sync up at the moment (not automatic until I investigate the above python libs).<p>Not yet optimised, proof of concept. The Geometric pattern (left) is the only component intended to be &#x27;user facing&#x27; in the live version - But the manual controls (middle) and the svg+path html tags (right) are included in this demo in order to show some of the &#x27;behind the scenes&#x27;.<p>Code not yet available, app not yet available to play with. Other geometric patterns in the app that I have implemented:<p>- Modified Maurer<p>- Cosine Rose Curve<p>- Modified Rose Curve<p>- Cochleoid Spiral<p>- Lissajous Curve<p>- Hypotrochoid Spirograph<p>- Epitrochoid Spirograph<p>- Lorenz Attractor<p>- Dragon Curve<p>- Two Pendulum Harmonograph<p>- Three Pendulum Harmonograph<p>- Four Pendulum Harmonograph<p>This is the Typescript Maurer Rose function (that is used with setInterval + an object array of beat times which determine when to advance the &#x27;n&#x27; variable):<p><pre><code> export const generateGeometricsSimplemaurer = (n: number, d: number, scale: number = 1) =&gt; { const pathArray: TypeSvgPathArray = []; for (let i = 0; i &lt;= 360; i += 1) { const k = i \* d; const r = Math.sin(n \* k \* (Math.PI &#x2F; 180)); const x = r \* Math.cos(k \* (Math.PI &#x2F; 180)) \* 40 \* &#x2F;&#x2F; base scale scale + 50; &#x2F;&#x2F; to center the image const y = r \* Math.sin(k \* (Math.PI &#x2F; 180)) \* 40 \* &#x2F;&#x2F; base scale scale + 50; &#x2F;&#x2F; to center the image pathArray.push(\${i === 0 ? &quot;M&quot; : &quot;L&quot;} ${x} ${y}`);` } const pathString: string = pathArray.join(&quot; &quot;); return pathString; }; </code></pre> setInterval isn&#x27;t an appropriate solution for the long term.<p>The geometric patterns (with their controls) will have a playground app that you can use to adjust variables... As for the music sync side, it will probably take me a long time.<p>*Edit: I just noticed that the author (Victor Tao) actually works at Suno
randall9 months ago
pretty neat! it feels like if you spaced out “important” beats instead of most of them and shrunk the play area so the paddles are larger, it would have an even more interesting effect.
rmnclmnt9 months ago
If only operational research courses could have been so fun many years ago… excellent write-up!
xipix9 months ago
Neat, love it.<p>Now try synchronising the music to the game.<p>You could use our Bungee library for the audio processing.
mlinksva9 months ago
Would be cool if someone did this for Lichess.
Hamming279 months ago
very cool project! love your idea
tmnvix9 months ago
&gt; Synchronizing pong to music with constrained optimization<p>Nothing new. Apparently there are references to people doing this in ancient and medieval times.<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Flatulist" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Flatulist</a>
tongbaojia9 months ago
Awesome work bro! Your company is hiring? I&#x27;d be super thrilled to work with you.