Hacker News

franze
Show HN: Franzelio – Draw lines, make music, share your instrument franzelio.franzai.com

svennidal4 months ago

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.

franzeop4 months ago

Fixed

  //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.

svennidal4 months ago

Wow, much better! Good job!

em3rgent0rdr4 months ago

It probably bothers anyone that has a physics or music background.

istjohn4 months ago

I mean, that's how a tuning fork, bell, string, or chime works in the real world. Frequency is inversely proportional to wave length.

semiquaver4 months ago

Right, which is why longer strings play lower notes.

chasing4 months ago

Looks like a cleaned up version of Josh Nimoy’s classic Ball Droppings piece. https://experiments.withgoogle.com/balldroppings

franzeop4 months ago

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

kaibee4 months ago

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

franzeop4 months ago

I just changed the default starting line to diagonal

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 ...

franzeop4 months ago

Toggle line added, please reload. Thx for the feedback. will think about other lines as well.

bofh234 months ago

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.

tacass4 months ago

Probably hard but would be cool to tune the lengths (and angles and positions). Maybe an Adjust mode in the menu.

lovegrenoble4 months ago

Funny enough, can I add it to my collection of little web gems?: https://sharkle.com

RobKohr4 months ago

Nice, you should make it also be able to be browsed like a catalog that organized with animated screenshots.

tuzemec4 months ago

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.

[1] - https://finneganeganegan.xyz/works/droplets

[2] - https://sounds.tuzemec.com/

asimpletune4 months ago

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!

jawns4 months ago

It's like the musical version of Line Rider! https://www.linerider.com

franzeop4 months ago

never heard of it, will check it out. i want to do a Franzelio verison with curved lines. but well, curved lines are harder then straight lines

franzeop4 months ago

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.
also after some back and forth with somebody from the vienna philharmonics orchestra i now use this tonal scales

  Red: C major

  Blue: G major

  Green: E minor

  Black: A minor

kaibee4 months ago

I love it. Thanks for adding some of my suggestions :). I think the last thing it needs is being able to place ball-cannons of whichever note (ie, click and drag defines the position and velocity of the projectile), instead of having them always come from the top.

bambax4 months ago

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.

eternityforest4 months ago

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...

franzeop4 months ago

in the dropdown there is the toggle line

but every n-th line sounds cool, too

franzeop4 months ago

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

em3rgent0rdr4 months ago

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.

poetaster4 months ago

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 :)

poetaster4 months ago

And a youtube video of the original https://www.youtube.com/watch?v=yhKnGPcZmE4

openrisk4 months ago

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).

ThisNameIsTaken4 months ago

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.

[1]: https://instrumentinventors.org/project/physical-rhythm-mach...

ejarzo4 months ago

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

franzeop4 months ago

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.

japhyr4 months ago

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?

gexaha4 months ago

cool, needs some slight noise/randomization in the trajectories/physics

UPD: okay, toggle lines is game-changer here, very nice!

aghilmort4 months ago

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

jahnu4 months ago

What a wonderful idea. Congrats!

G4BB3R4 months ago

I love how determinist it is!

transformi4 months ago

cool stuff. would like to see statsitics about the patterns that get generated.

tony-allan4 months ago

A cool website. So many idea's on how to make something similar!

gexaha4 months ago

also super cool that it's microtonal, love it!

gloosx4 months ago

franzeop4 months ago

ok, old share URLs now really do strange stuff to the new share encoding logic

dsp_person4 months ago

crashes when I try to open in firefox on linux

grey-area4 months ago

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...

franzeop4 months ago

should be fixed, old share URLs sadly will not work anymore, had to develope a much shorter URL encoding for the state

but now i shared a 20 lines, about 40 dots state and it worked

[deleted]4 months agocollapsed

dalmo34 months ago

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.

franzeop4 months ago

tried to fix it, now there are sadly 2 dots coming at the start in the wrong spacing, but after this it should be fixed

so well, kicking on bug out, inviting another one in

kwantaz4 months ago

can’t hear the music

hn-front (c) 2024 voximity
source