5 ms·

Thanks! I'm not really sure how to make it work with Glicol -- I don't know anything about the livecoding world. But in theory it would be easy to add a new "ma

Thanks! I'm not really sure how to make it work with Glicol -- I don't know anything about the livecoding world. But in theory it would be easy to add a new "magic variable" (shader uniform) for like "mean root squared audio sample amplitude over the last frame..."? You'd just need some way for Glicol to tell Bauble what the value should be. I don't know how they'd communicate or if there's some standard for integrating music and visuals...? Apart from that big question mark I think it would be very suitable for livecoding visuals, as you can write some impressive effects with very little code. Easy CSS change to make the canvas full-screen and like overlay the code on top of it. That's a thing that livecoders do, right?

chaosprint 4y ago
Something like this: https://youtu.be/iKj7IibG0OU https://youtu.be/iKj7IibG0OU I think both Hydra and p5.js render things to a <canvas>, which is probably the same as what your demo does, right? Then we just need to set some CSS for the Canvas to make it full screen and hide behind the code editor.
- ianthehenry 4y ago
  Ohhh I think I misunderstood how this works. You write the visualization ahead of time, and then you livecode the music only? Bauble would work well for that -- you could just grab the compiled shader source and integrate it into your livecoding environment; wouldn't even need to integrate the Bauble runtime. All you'd need to do is set a few uniforms and issue a draw call. I was imagining something where you switch between coding audio and visuals on the fly -- which is still totally possible, but would require a bit of work to get them talking to each other.
  - chaosprint 4y ago
    Well sometimes you change the visual code also in real-time. The video above was just for showing the canvas works so I did not edit the visuals code there. I post the hydra link here. There are lots of demo there: https://hydra.ojack.xyz/ https://hydra.ojack.xyz/ So far I haven't tried to make them talk such as sync the beat etc. But I think with web worker it is doable.
    - ianthehenry 4y ago
      Ohhh I totally missed that you're the author of Glicol. Okay. So you integrated Hydra as like a first-class thing -- I see I see. I thought you were plugging two 3rd party things together. So I'm guessing that the best case scenario for you is to import Bauble as like a normal JavaScript dependency, and then use the editor built into the Glicol UI to write scripts, and then just call like Bauble.compile(canvas, script). Right? Bauble doesn't really know how to be embedded in another page right now -- it's more like an app than a library. But it would be possible to extract the core parts. It's a little tricky because it uses WASM, so it kinda needs to load itself a little specially, but I'm sure there's some way around that. Would be cool to sync something like this to music! https://twitter.com/ianthehenry/status/1567228698373533696 https://twitter.com/ianthehenry/status/1567228698373533696 (ignore the terrible lighting. lights are coming one day)
      - chaosprint 4y ago
        Yeah. Glicol language and audio engine is written in Rust and compiled to WASM. I still manage to export the WASM module to an NPM package (https://glicol.js.org/ https://glicol.js.org/). But Emscripten may be a little bit different, but there will always be some solution I guess. I've watched your repo haha.
ynx 4y ago
> if there's some standard for integrating music and visuals...? In terms of translating audio to variables useful for driving visuals, ColorChord is getting some traction; it's an algorithm that powers a technology called AudioLink, which is growing beyond its origins in VRChat. https://github.com/cnlohr/colorchord https://github.com/cnlohr/colorchord https://www.colorchord.net/ https://www.colorchord.net/ https://github.com/llealloo/vrc-udon-audio-link https://github.com/llealloo/vrc-udon-audio-link https://github.com/llealloo/vrc-udon-audio-link/blob/master/AudioLink/Scripts/AudioLink.cs https://github.com/llealloo/vrc-udon-audio-link/blob/master/...

chaosprint 4y ago

Something like this: https://youtu.be/iKj7IibG0OU https://youtu.be/iKj7IibG0OU I think both Hydra and p5.js render things to a <canvas>, which is probably the same as what your demo does, right? Then we just need to set some CSS for the Canvas to make it full screen and hide behind the code editor.

ianthehenry 4y ago
Ohhh I think I misunderstood how this works. You write the visualization ahead of time, and then you livecode the music only? Bauble would work well for that -- you could just grab the compiled shader source and integrate it into your livecoding environment; wouldn't even need to integrate the Bauble runtime. All you'd need to do is set a few uniforms and issue a draw call. I was imagining something where you switch between coding audio and visuals on the fly -- which is still totally possible, but would require a bit of work to get them talking to each other.
- chaosprint 4y ago
  Well sometimes you change the visual code also in real-time. The video above was just for showing the canvas works so I did not edit the visuals code there. I post the hydra link here. There are lots of demo there: https://hydra.ojack.xyz/ https://hydra.ojack.xyz/ So far I haven't tried to make them talk such as sync the beat etc. But I think with web worker it is doable.
  - ianthehenry 4y ago
    Ohhh I totally missed that you're the author of Glicol. Okay. So you integrated Hydra as like a first-class thing -- I see I see. I thought you were plugging two 3rd party things together. So I'm guessing that the best case scenario for you is to import Bauble as like a normal JavaScript dependency, and then use the editor built into the Glicol UI to write scripts, and then just call like Bauble.compile(canvas, script). Right? Bauble doesn't really know how to be embedded in another page right now -- it's more like an app than a library. But it would be possible to extract the core parts. It's a little tricky because it uses WASM, so it kinda needs to load itself a little specially, but I'm sure there's some way around that. Would be cool to sync something like this to music! https://twitter.com/ianthehenry/status/1567228698373533696 https://twitter.com/ianthehenry/status/1567228698373533696 (ignore the terrible lighting. lights are coming one day)
    - chaosprint 4y ago
      Yeah. Glicol language and audio engine is written in Rust and compiled to WASM. I still manage to export the WASM module to an NPM package (https://glicol.js.org/ https://glicol.js.org/). But Emscripten may be a little bit different, but there will always be some solution I guess. I've watched your repo haha.

ynx 4y ago

> if there's some standard for integrating music and visuals...? In terms of translating audio to variables useful for driving visuals, ColorChord is getting some traction; it's an algorithm that powers a technology called AudioLink, which is growing beyond its origins in VRChat. https://github.com/cnlohr/colorchord https://github.com/cnlohr/colorchord https://www.colorchord.net/ https://www.colorchord.net/ https://github.com/llealloo/vrc-udon-audio-link https://github.com/llealloo/vrc-udon-audio-link https://github.com/llealloo/vrc-udon-audio-link/blob/master/AudioLink/Scripts/AudioLink.cs https://github.com/llealloo/vrc-udon-audio-link/blob/master/...