#1

Long time lurker, first time poster. I am currently working on my master’s thesis where I’ve built a browser-based prototype that aims to combine the chemical programming paradigm with computer music. It allows people to program music in JavaScript inspired by how the chemical programming paradigm works, and it is available at https://ionian.mjj.io.

I’ve now entered a stage where I am testing the prototype on different people to gather feedback, and since the community here generally seems interested in unconventional ways to create music, I thought it would be a great place to reach out to people. Overall, I am interested in any feedback you might have whether it is good or bad. Your thoughts on the prototype would be extremely valuable to me. Due to time constraints, I’ve not been able to spend a lot of time on error handling but, hopefully, you’ll not encounter too many errors.

I’d mean a lot to me if you’d take a look at it and provide feedback.

3 Likes
#2

here’s two from me:

  1. i couldn’t make it produce any sound in two browsers - Safari and Chrome. if there was a “click to start audio” button, I missed it.
  2. is it not possible to detect if I’m visiting for the first time and load up an example automatically?
#3

@eesn: Thank you for your feedback.

It works best in Chrome but it is definitely an issue if it does not work on your machine. Are you able to get any sound if go to “Explore examples…”, choose “Play synth example”, click the “Run” button below the editor, and click the “Add synth” and “Add play” buttons a couple of times to get a few circles on the canvas?

Regarding the second point, it should not be too much of an effort to implement. I am not entirely sure whether I’ll be able to code it before handing in the thesis but it is a point that I’ll mention in the discussion section.

For anybody interested, Carin Meier has a great introduction on chemical programming here.

#4

i did click around in the UI, starting from choosing an example from the dropdown, then clicking buttons to add some objects, but nothing made any sound whatsoever. ( i normally have 0 patience for things like this, which i consider fair game from dev perspective :] )

1 Like
#5

yup. Followed your instructions, but I couldn’t figure out how to get any sound.

#6

It’s not immediately obvious how to use this web app, but I was able to get sound in Chrome following the steps you provided. I added 3 synth bubbles and 3 play bubbles. Chords sounded each time a synth bubble bounced off a play bubble. I tried adding a bunch of other bubbles and got some slight variation in the tones produced, but nothing dramatic.

I tried the exact same thing a second time and was unable to get any sounds at all. It seems very finicky.

It looks like a very interesting experiment, and I’m sure it’s capable of some pretty awesome stuff, but it’s not really an instant gratification toy (at least not with the examples provided).

#7

@spunoza: Interesting. Which browser and OS are you running? So no sound is playing once a “Play” molecule and a “Synth” molecule collide?

@morgulbee: Thank you for your feedback. It is definitely useful. Did you check the documentation and experiment on your own as well, or did you mainly look at the examples?

#8

I’m running Catalina on a 16" MBPro and using Chrome for your app.

#9

I just played with a couple of the examples. Didn’t try anything too deep or writing/changing any code. Tried it again this morning and it’s making sound in Firefox, which it wasn’t for me the other day. :thinking:

#10

I tried it on a laptop running Windows 10 and I got sound in both Firefox and Chrome with the “Play synth example” as you described. No sound on iPhone 8 Plus running iOS 13.2.3 in Safari or Firefox. In Brave it didn’t load at all – blank white page. Back on Windows laptop, it also doesn’t load in Microsoft Edge (0: Object doesn't support property or method 'flatMap' main.4612c735.chunk.js (1,61198)) but who cares about Edge ha hm

I did notice two messages The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. in the JavaScript console; those messages stopped appearing in Firefox when I changed the default autoplay setting from “Block Audio and Video” to “Allow Audio and Video” but I guess Chrome doesn’t have that option anymore. I changed some internal flag in Chrome at some point that was supposed to disable autoplay but I don’t remember what it was.

Anyway. Both browsers behaved the same apart from that.

  1. The buttons are slow to respond. I usually have to click longer than I normally would to get a response. In particular, if I don’t hold down the “Clear” button, the circles disappear for a moment and then reappear.

  2. I can’t select code in the documentation (to copy & paste into the editor). I can select normal text, but that’s not nearly as useful.

  3. I think the minimum volume should be lower than -26dB. It seems like this is intended to have a lot of circles bouncing around and it could get very loud and chaotic.

  4. If I get an Oscillator playing, it doesn’t stop. If I click “Clear”, it doesn’t stop. I also tried this rule:

const cleanRule = new ReactionRule ()
cleanRule
  .replace([Oscillator, Clean])
  .by([])
  .if(() => true)

which does visually work as expected (when an Oscillator collides with a Clean, they both disappear), but the sound still doesn’t stop…

  1. My boyfriend (a graphic designer) glanced at this and said the yellow background for “Add mono synth” is too bright, making it hard to read. The cyan in “Add chorus” is also uncomfortably bright.

I do want to poke at the rules some more but it’s lunchtime :fork_and_knife:

  1. Showing or hiding the documentation doesn’t update editor line wrapping. And if you then type a line that exceeds the editor width, the text box and vertical scroll bar start sliding left, like so:

    Capture
    Capture1088×639 45.5 KB

  2. It might be nice if there were a superclass Effect so that I could write one “apply whichever effect to synth” (or to mono synth or to oscillator) reaction rule rather than four.

#11

My apologies for the late reply. This week’s usability tests have taken up a lot of my focus but thank you for your valuable feedback.

@morgulbee: I am glad to hear that you were able to get sound in Firefox. If you have any additional feedback, please let me know.

@nonsmeddy: Thank you so much. This is extremely useful, and a few of your points were mentioned during the in-person usability tests that I conducted last week which I think is positive, as it stresses that these are critical issues that need to be fixed in a future version. Is the issue in point six present in all the browsers that you’ve tested?

I am all ears and would appreciate additional feedback if anybody else has given the feedback a try.

#12

Point 6 is present in both Firefox and Chrome on my Windows laptop, but not on iPhone. I guess the real issue is just when the editor and documentation are open side-by-side, not necessarily the act of showing/hiding the documentation. But there’s another thing. (Isn’t there always?)

  1. The documentation appears superimposed over the controls if the window is narrow enough. This is automatically true on iPhone, and I should have thought to try it on PC too because it happens there too. In this situation, though, line wrapping in the editor works as expected.
Screenshot

Capture
Capture515×504 27.3 KB

However, it switches too early to having the editor & documentation side-by-side again, when the editor is too narrow to be usable. That width threshold should be higher:

Screenshot

Capture
Capture731×442 16.7 KB

  1. There’s a possibility for circles to get stuck in the bottom edge of the animation window. Collisions with other circles can sometimes free them. On iPhone, this frequently happens when I scroll the page up and down, but this doesn’t happen on my laptop.
Screenshot

PNG
PNG1242×2208 245 KB

It can happen on my laptop if I resize the window while the animation is running, and in fact any circles caught outside the new bounds of the animation pane stay offscreen. It appears they continue to bounce vertically up and down but do not interact with one another. For example, here I have a bunch of Play circles and some Synths that are offscreen. The line from the F#G#C# Chord going offscreen keeps moving as if the Synth it’s attached to is still moving, but I don’t hear anything anymore.

Screenshot

Capture
Capture770×379 17.5 KB

But if I resize the window with animations hidden, I do still hear the “offscreen” ones even when I show the animations again! (Example: load & run “Multiple rules example”, add a ton of Synths & Chords & Plays, click “Hide animations”, make window much narrower, click “Show animations” – you’ll hear sounds being triggered even when any on-screen Play circles haven’t collided with anything)

I’m not sure what the best way to handle this situation would be… This stuff about small screens or resizing the window might not be worth your time!

I’m sorry I’m not providing more feedback other than bugs or criticisms, but if #2 and #6 were fixed it would be a lot easier to play with the prototype and try out different combinations of rules and such.

#13

Thank you once again for taking the time to provide me with such in-depth feedback. I really appreciate it. Bug reports and criticism are always useful, though I most likely will not have the time to fix these issues before I hand in the thesis. Hopefully, I can find the time to build this into something a bit more fully featured once I have more time available again. The list of things I’d like to fix and improve is extremely long as you can probably imagine.

#14

I got sound fine (Chrome, macOS) got it to play chords collisions and a couple of times to vary but even with a ton of additional bubbles I couldn’t really seem to get it to modify anything by a significant degree. Seems like a cool concept though.