HN Explorer

Show HN: Billard – Generate music from ball collisions in 2D space (billard.medusis.com)

306 points by bambax ↗ HN
Hello HN! Here's Billard. It combines music and physics into a unique creative tool, as I explore various unconventional methods for generating music.

Most traditional music composition tools revolve around the idea of a repeatable pattern. Billard is a webapp that never repeats itself. It generates music automatically based on the collisions of balls in a 2D space. Collisions trigger notes (or chords) in a given key. One can add balls or move them (y-position is pitch); the app remembers its state between reloads; or it can be reset with the 'init' button on the top left. Gravity can be adjusted in real time to change the behavior of the balls.

It owes a lot of inspiration to Brian Eno and Erik Satie (inventor of musique d'ameublement, or "furniture music"). Some may think the lack of pattern makes it not musical enough -- but this lets it be listened to —and watched— for a while without boredom.

The webapp is made using plain JavaScript. (All SVG icons were made 'by hand'.) It uses Tone.js only for triggering piano samples. Beyond piano, it's MIDI-enabled and works well at slow speed with haunting, dark synth sounds.

Hope you like it!

75 comments

[ 4.1 ms ] story [ 132 ms ] thread
block_dagger
Cool! I will try this out as a layer in my live ambient set later today.
bogwog
Cool, but it really does just sound like a bunch of random noises. I think it'd be more interesting if the balls were regular polygons instead of actual circles, since the reflections would be more predictable.
CamperBob2
It gets interesting when you click to add more balls in the path of one that's already moving.
[deleted]
(comment deleted)
mock-possum
Have you ever looked at vcvrack.com? It’s free modular synth software, and I’ll bet the community would love to see something like this developed into a module.
bambax
Oh yes I love vcvrack (and Cardinal); but this is JavaScript, and for all I know vcvrack modules are C++? But sure it would make for a cool module.
ameesdotme
Had a lot of fun with this. Also a good laugh when trapping some balls and hearing the midi-engine go apeshit and eventually crashing.
groovity
Doesn’t make any sound on Safari iOS. Yea I clicked the loudspeaker
ErneX
unmute your device
bozhark
And turn the volume up a lot
groovity
Gee, I didn't try anything obvious.
corobo
If anyone else still can't hear anything even after cranking the volume - the grandparent comment means take your phone out of silent mode in addition to raising the volume above 0
ErneX
It’s not intuitive at all when other apps like video playback do reproduce audio when you are in silent mode, so yeah.
dt23
Wow, this is super cool. The whole experience of interacting/watching/listening to it is very relaxing and harmonious-feeling. Thanks for sharing! :)
teleforce
Fun fact, it's reported that the new Rolls-Royce Spectre 2024 turn signal's sound was created by combining the sound of finger nail tapping the car's aircond vent metal and the sound of a couple wine glasses touching. The resulting turn sound signal remarkably turned out to be exactly the same as normal turn signal in any other car, pardon the multiple puns.
[deleted]
(comment deleted)
bozhark
Could you add accelerometer as input method for phones?
bambax
I would need to test it more. The accelerometer generates lots of events that would end up changing gravity constantly (when held up); maybe with a low-pass filter so that gravity changes more slowly it would work.
jcims
This is a lot of fun!

Reminds me of the 'polyrhythm' genre of videos on youtube (eg. LucidRhythms)

One fun thing to do is load the canvas up with a bunch of balls really close to each other then click the yin and yang icon which causes them to change state when struck.

Adding some kind of gravity might be fun.

qwertox
Ends up looking like a constellation.
chaosprint
This is awesome. A great interactive piece that is simple and fun. Love the idea of the random ball spawning.

I seem to have triggered "infinite sample playback" when I stuck the ball in a corner and the audio crashed. One experience I've had with this kind of large sample playback (in SuperCollider) is that by dynamically reducing the volume, it creates an interesting textured sound [1].

Of course for every project using Tone.js I would like to mention one of my project glicol.js which is in active development [2]. It has better performance but needs more use case to find what's needed in the API.

[1] https://github.com/chaosprint/Packing

[2] https://github.com/chaosprint/glicol

bambax
Glicol is absolutely amazing!!
SushiHippie
Seconded, what "sold it for me was this demo of Kraftwerk - Das Model:

https://glicol.org/demo#themodel (remember to play with line 14)

Since then, I've been playing around with it a bit and found out that it even has a cli/tui [0], although that one seems to have a few more bugs than the web version It's going to be my main way of using it as I don't want to miss my $EDITOR instead of editing on the web.

[0] https://github.com/glicol/glicol-cli

breck
Love it.

Any chance you are going to share the source code?

bambax
Thanks!

The code is not obfuscated or minified in any way, so it's easy enough to read. But I'm not sure it deserves to be actually published... ;-)

breck
Thanks, but in addition to checking out the source I'm more interested in following your work and what you do next on github (or gitlab, etc)
dekhn
I happened to be writing a desktop app that does something similar to this; I saw https://www.youtube.com/shorts/lF8fEn20OaU and many related videos, so I wrote up a simple QGraphicsView/pymunk app that implements these. The code is a dog's breakfast and will be under development for some time.

I see some videos which suggest that the developer actually set up the map and the physics such that specific songs get played, although I think there is some trickery to simplify it.

At the moment I'm working on a subproject which is generating the audio sounds for various bumping events, having found musicpy/sf2_loader a quick way to generate samples.

Ylpertnodi
Fantastic. On mobile atm, so midi ill investigate later. Have you considered making a .vst3 plugin?
bambax
I'm looking at nih-plug which is an audio plugin framework in Rust. I'm a Rust complete and utter noob, but this looks fun and a great way to learn (I'd rather not dive into the likes of Juce). So I guess we'll see!
pierrec
This genre of musical sandbox is a really satisfying and fun rabbit hole. You can even take it to production (mainly ambient music production, that is). My favorite for usage inside DAWs is Droplets, which works as a plugin but also has a web version: https://fynthesizer.github.io/Drip/

There are other plugins for this, each with its own personality. For example Bitwig's Ricochet is a totally different take on the same idea, where they managed to make it usable for more rhythmic purposes: https://www.youtube.com/watch?v=WFvIYkTGRzA

bambax
Yeah, I knew about Droplets -- it's is really well executed, but maybe a little too predictable for my taste.

Didn't know about Ricochet (not a Bitwig user), but it's very impressive!

Also, you're the creator of protoplug? What a fantastic idea!

zeristor
'Crockery drifts across the surface of "clinamen", and when gentle currents get these white porcelain bowls clinking, French artist Celeste Boursier-Mougenot creates a changing, chiming soundscape.'

https://www.youtube.com/watch?v=RdCutpuUrX4

bambax
Wow. Really close concept indeed. Thanks for sharing.
Biganon
On Firefox mobile, the note resonates 0.5 second after the collision, making the experience very frustrating
bambax
Sorry to hear that. I use Firefox on a fairly old Android device from 2017, and it's acceptable? Maybe the device you're using is very busy?

It'd be hard to trigger the sound before the collision (although possible, in theory)...

otherayden
This is awesome lol, very fun to trap the ball in a corner
riiii
I like this. I'd love to be able to move the red balls too.
sneak
Boop them while dragging the note balls.
bambax
You sort of can, if you select a non-red ball, move it around, and then and change its state to moving ('ball state' in the config panel).
cantSpellSober
Awesome! Next step is mash it up with Pong and Guitar Hero so you have to use a paddle to hit the balls in the right direction to play a song.
parpfish
“Music” or just “pleasant background noise”
Ylpertnodi
Both. But I've passed on the site to musicians and non-musicians alike - everybody loves is. The midi capability is stunning and ability to choose tonalities can be 'just left to play', or used as an inspirations for the basis for repetetive or repeating motives: repetition, and an element of predictability - both based in a predictable tonality is what most people seek in what they call 'music'.

Trapping the balls may give you something more approaching 'music'. Changing the root note, also. And the 'mode', too.

dr_kiszonka
Fun! What do the yin yang button and the one to the right of it do?
bambax
Yin mode lets ball change state when they collide (from moving to playing and vice versa); and the chords button (not the most obvious design, true ;-) let bigger balls trigger triads instead of single notes.