Streaming Tidal with p5.js, in Atom

I've been toying sending OSC from Tidal to p5.js to do some visualization, but I'm not sure how best to go about it, so that I could use it when streaming (I think I'm okay with the OSC side of things).

I'm using Atom and I'm wondering if there is some way to get p5.js sketches running in Atom so that I can can, using OBS, stream code+audio+sketch from the same window. I know Atom has packages like editor-background which, in principle (although I'm unable to get it work myself), can stream video in the editor.

If I'm barking up the wrong tree, what are some reasonably painless workflows for getting p5.js (or other) visualizations presenting in tandem with Tidal code streaming?

I'd prefer to stick with Atom if possible, but I'm open to trying out other editors if that makes things easier.

I know that Hydra can set its visuals as the backgroud of Atom, which is made easy by the fact that Atom plugins are written in js and that, generally, Atom integrates easily this sort of things. There this script from hydra-examples that seems to allow to integrate a p5 frame in Hydra.
I don't know if there readily exists a more direct method, but it's certainly at least feasible.

I developed this plugin for atom

Osc is integrated, there's an example into the codebase:

3 Likes

I don't know how I missed that. . . That's perfect. Thanks for putting that out there!

I needed that so...
I took some inspiration from the atom-hydra plugin :smiley:

I’m so happy about this forum. The plugin is great! Thank you!
Since I’m quite new to p5.js and JavaScript I had a little trouble to get the TidalCycles infos out of the array structure first. But now it’s working and I have a tiny sketch with background colors changing with the samples played.

export default function(p) {

  p.setup = () => {
    this.onOscMessage(message => {
        var tidalArgs = message.args;

        tidal = {};
          for(var i = 0; i < tidalArgs.length; i+=2){
            tidal[tidalArgs[i]] = tidalArgs[i+1]
          };
        console.log(tidal);

        setTimeout(() => {
               if(tidal.s === 'tabla'){
                   p.background(255,0,255);}
               else if (tidal.s === 'sd'){
                   p.background(0,255,255);}
               else if (tidal.s === 'bd'){
                   p.background(255,255,0);}
            })
        }
      )}
}
1 Like