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.
//const lengthFactor = clamp(lineLength / 200, 0.5, 2); // outdated // Adjust between 0.5x and 2x
const lengthFactor = clamp(200 / lineLength, 0.5, 2); //Reason: This aligns the instrument with the physical properties of real-world instruments, making it more intuitive and educational.
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.
Wow, thanks for making this! I’m having lots of fun playing with it.
A quibble: Choosing between Draw|Erase|Toggle is awkward on mobile (Safari on iPhone). The old toggle between Draw|Erase was quick but the new pulldown list widget is in the upper left while the choices always pop open at the bottom of the screen.
Perhaps move the pulldown list to the bottom on mobile or make it two toggle buttons (Mode: Draw|Erase, Line type: Bounce|Toggle)?
Some enhancement ideas:
Add a mark where the dots drop from and perhaps a faint line to show the drop path.
Add an edit mode so existing lines could be selected then either erased, moved, lengthened, shortened, or have their type changed between Bounce|Toggle. Going further allow a point to be selected and move it or rotate a line around it.
yeah, i remembered this one, that one was the original inspiration for https://lsd.franzai.com (previously http://lalo.li/lsd/ ) - after i added musik to lsd i realized that the music part is even more fun on its own
thats cool, the UI has a nice feel to it. i asked myself if i should make the starting positon and direction of the dots on Franzelio configurable. that UX might work.
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.
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).
The Physical Rhythm Machine Boem Boem [1] is a performance/sound installation that actually comes quite close to being a physical equivalent of this idea. Not self adjustable of course, but the sound of the balls banging around is highly visceral.
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.
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.
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?
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.
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?
49 comments
[ 3.1 ms ] story [ 94.0 ms ] threadso well, kicking on bug out, inviting another one in
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
the other ones are good ideas, the hard part is to push it all in to an already pretty space limited mobile UX
hmmm.... maybe if i push the colored dots at the bottom to the side and then add a dropdown for line there ... or next to the erased / draw button
i could make the erase draw button a dropdown for line types, though ...
A quibble: Choosing between Draw|Erase|Toggle is awkward on mobile (Safari on iPhone). The old toggle between Draw|Erase was quick but the new pulldown list widget is in the upper left while the choices always pop open at the bottom of the screen.
Perhaps move the pulldown list to the bottom on mobile or make it two toggle buttons (Mode: Draw|Erase, Line type: Bounce|Toggle)?
Some enhancement ideas:
Add a mark where the dots drop from and perhaps a faint line to show the drop path.
Add an edit mode so existing lines could be selected then either erased, moved, lengthened, shortened, or have their type changed between Bounce|Toggle. Going further allow a point to be selected and move it or rotate a line around it.
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
Nb: the sound creation seems buggy on android mobile browsers (both firefox and chrome).
[1]: https://instrumentinventors.org/project/physical-rhythm-mach...
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.
[1] - https://finneganeganegan.xyz/works/droplets
[2] - https://sounds.tuzemec.com/
UPD: okay, toggle lines is game-changer here, very nice!
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.
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!
For example this quickly grows the url:
https://franzelio.franzai.com/?share=eyJsaW5lcyI6W3sieDEiOjA...
but now i shared a 20 lines, about 40 dots state and it worked
thx for all the feedback