Streaming Tidal with p5.js, in Atom

crashingbooth · 4 September 2020 14:41

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.

th4 · 4 September 2020 16:10

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.

ndr_brt · 4 September 2020 19:06

I developed this plugin for atom

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

github.com

ndr-brt/atom-p5js/blob/master/examples/simple-example.js

'use babel'

export default function(p) {

  let y = 100;

  p.setup = () => {
    this.onOscMessage(message => {
      console.log(`osc message received`)
      console.log(message)
    })
    p.frameRate(30)
  }

  p.draw = () => {
    p.background(0, 0, 255-y);

    p.noStroke();

    p.fill(255);

This file has been truncated. show original

crashingbooth · 4 September 2020 21:30

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

ndr_brt · 4 September 2020 22:11

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

nervousdata · 26 February 2021 16:54

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);}
            })
        }
      )}
}

roundsquare · 30 January 2024 15:46

Hi!

Now that Tidal changed from Atom to Pulsar, is there a way to achieve the same result with Pulsar?

Basically I am using Hydra inside P5LIVE and I would like to display my tidal code on top of the visuals

Robin_Hase · 7 February 2024 11:08

atom-p5js (pulsar-edit.dev)

iirc all atom plugins should still work with pulsar, but it's generally likely that authors have stopped maintaining them when atom was abandoned by github. i'd say it's worth a try at least!