Looks like a cleaned up version of Josh Nimoy’s classic Ball Droppings piece. https://experiments.withgoogle.com/balldroppings
Just some quick notes: Lines should be customizable for what sound is played: ie being able to make drum beats would be neat. And a silent-line should be an option too.
A line that toggles on/off when a ball passes through it or collides with it would also be fantastic.
Also a trampoline line/shock absorber line(s).
The default/starting line should be a diagonal too, since it makes it more clear what is happening and you don't get that decaying bouncing thing.
very cool idea
Update: added a few more linetypes, all in all now
Draw: Standard black lines. Dots bounce off these and play a sound. The note is based on the line's length and angle.
Erase: Red lines used to delete other lines (including predrawn ones). Intersecting lines disappear.
Toggle: Black lines that switch between active (solid) and inactive (dashed). When inactive, dots pass through without interaction.
Silent: Dark gray lines that let dots bounce off but don’t produce any sound.
Burner: Dark red lines that destroy any dot that touches them, no sound.
Splitter: Magenta lines that split dots into two upon collision. The original dot is removed, and two new dots continue with altered trajectories.
Red: C major
Blue: G major
Green: E minor
Black: A minorFunny enough, can I add it to my collection of little web gems?: https://sharkle.com
Pretty cool! It reminds me of Droplets [1].
I'm working from time to time on a similar concept. Except you can have multiple ball sources and each platform/line can play any combination of notes. [2] It's using phaser and tone.js under the hood and it's not very mobile friendly yet.
I loved this.
It would be very cool if there was a visible buffer of the balls that have yet to drop could see and control what will fall. The spacing could be controlled by clear no-op balls in the buffer that just pop like bubbles when they release. That way the composer could program the pitch and spacing of the notes.
Also having a infinite canvas would be really nice so one could pan around.
And different size lines should cause the bounce back to happen at different speeds.
Super awesome, thanks for sharing!
I accidentally got it do to to a three note sequence that sounds like it's from Ocarina of Time!
Seems like it would be cool if there was some nonlinear elements, like walls that only reflect every Nth ball.
https://franzelio.franzai.com/?share=AQMKAAAHi2u2223VupMAAAF...
It's like the musical version of Line Rider! https://www.linerider.com
Excellent! Eventually the balls go through the lines, but it's unclear what the rules are?
A couple of months ago I did a ShowHN for Billard, which also uses physics and collisions in 2D space to make music: https://billard.medusis.com/
Those are fun experiments.
Update: When you put the slider to 0 dots per second (or choose manual in the dropdown on mobile) you can now play the Franzelio manually, every click on a color button will spwan a dot in that color immediately.
thx for all the feedback
Mini Metro (a minimalist sim game) sounded like this. Every time you built a train line or a passenger got on or off the train, a new pitch would sound, and that was for the most part the soundtrack for the game.
For anyone interested in Godot, I made a mobile first (Sailfish Os only) version https://github.com/poetaster/balldrop which is based on https://github.com/Bauxitedev/balldrop It was great simple problem set for solving touch screen problems in Godot and makes lovely melodies :)
Wonderful idea. Proof, if proof was needed that digital music (and much more in the digital domain) is still a vast unexplored universe. The equivalent physical "instrument" would be nigh impossible to build, let alone operate by a random anybody.
Nb: the sound creation seems buggy on android mobile browsers (both firefox and chrome).
This is amazing. One issue I ran into though, is after just a minute or two with about five lines on the screen, I get a growing hum that makes me have to close out the tab. Is anyone else running into that?
awesome! I tried once to make something very similar in p5 but never got past the sketch phase https://editor.p5js.org/ejarzo/sketches/dsNdGZt0n
cool, needs some slight noise/randomization in the trajectories/physics
UPD: okay, toggle lines is game-changer here, very nice!
What a wonderful idea. Congrats!
love this -- would be cool if could mod line thickness, ball size / density to vary pitch?
also hard not to picture building a mini transformer in here where can visual backprop and stuff-
some templates to load or get started - play X etc or let the computer just play semi-random
anyway love it well done clean simple
I love how determinist it is!
cool stuff. would like to see statsitics about the patterns that get generated.
A cool website. So many idea's on how to make something similar!
also super cool that it's microtonal, love it!
crashes when I try to open in firefox on linux
Getting a URI too long error unfortunately - I guess you didn't want to store state in a db but storing a few points shouldn't take much space? The URI is 13k characters long unfortunately for 8 lines (guess you are storing all the state including balls?). Could you perhaps leave out balls to make urls shorter?
For example this quickly grows the url:
https://franzelio.franzai.com/?share=eyJsaW5lcyI6W3sieDEiOjA...
can’t hear the music
Is it just me or the balls aren't quite on tempo? Even the default 1/s feels off, wobbly and not steady. Chrome Android.
Nice. Although, it bothers me that the shorter lines are lower pitched than the longer lines. Don’t know why, but intuitively I feel like the pitch should go down as the line gets longer.