Question: Import sketch with configurations

[staus]

Hey Ted,

First off, thanks for making P5Live. Just fell over it yesterday, while researching how to get 3D into Hydra with P5 and now I see that you've made it possible to get Hydra into P5 in a much more effective way :) Super impressive! Sorry for creating my question as an issue here. Do you have a discord or some other forum you'd prefer discussions to happen?

My question: Is it possible to import a separate sketch into a main sketch? (without hosting it outside P5Live)

I've been working on a setup for algoraves and one thing I wanted was to use my midi controller (MidiFighter) in an elegant way throughout my performance. I figured out how to use midi inside P5Live. It's super nice, but the setup I'm thinking of would look rather dry and overwhelming for an audience as the first thing they see, so I would like to separate that part of the configuration from my performance code. I would like to create a separate file where I configure all the midi signals into meaningful variables or arrays, that I can then import into all of my projects and easily jam with without having to look at it. Basically so my live code doesn't get polluted by basic configurations.

Hope you're having a great weekend

[ffd8]

Hey @staus – welcome and awesome the hydra examples help (so fun how it can go hydra » p5 or p5 » hydra or crazy combo of both). noo problem making an issue, it gives me the bump i needed to start the 'discussions' feature of github, since i don't use another space for discussing P5LIVE, so this will be it!

As for your questions - most definitely! you would import your custom code the same way one can use additional libraries:

let libs = [
 // 'pathToFile.js'
]

There you can have as many libraries (or just scripts) loaded as you want, which are preloaded before your sketch is. Either locally if running offline, or hosted somewhere with CORS access. You'll see an example of this in the demos » libs » voronoi where I didn't want all the coordinates to take up a HUGE header in the code.

For live-coding performance, I also have the snippets feature, ie. CTRL + SHIFT + A adds audio-reactivity, which also kinda seems like cheating when a big chunk of code plops in.. i plan to make adding custom ones easier within P5LIVE rather than editing a file outside of it.. buuut, also considering if the audio-reactive stuff should always be available and just called via setup + draw when one wants to use it... setupAudio() + updateAudio() a bit like in hydra, how FFT is always available.

Hope that helps!

[staus]

Haha, nice! Glad to be the motivation. It's a good idea to use Github for the discussions :)

Ok, so if I'm using the online version, the only way to point to a config file would be to host it elsewhere? Would be super nice to be able to point to a sketch inside your own P5live folder structure (ofc, I can see how that would be complex to make work in a colab session).

And if I were to edit the snippets document, is that also only in the offline mode? If so, it would be super nice some day to have a "snippets" ui, where you could also create and edit them in the online version :)

I guess the very best would be to be able to create custom macros that live on a higher level, similar to FFT in Hydra as you say. So fx, this code here is something I'd like to universally have access to across my projects. It's simply mapping out all the 4 x 16 midi knobs on my controller into a scheme that's more logical for me to use in a jam

function setup() {
	createCanvas(windowWidth, windowHeight, WEBGL)
	setupMidi(midiDeviceIn, midiDeviceOut)
}
function draw() {
    // Set the size of a sphere to be a number between 30 and 180
    // using a knob on page 2 of the midi controller, row 3, column 3 with a slight ease
    scale = m(2,3,3,0.1,30,180)
    sphere(scale)
}

/////// MACRO 1 CODE: Mapping the Midi signal ///////

let val = 0
function m(page, x, y, easing = 1, min = 0, max = 100){
    target = midi[page - 1][x - 1][y - 1].up * (max - min) + min
    //if no easing, we just return
    if (easing == 1) return target
    // if easing value starts too far away, set it
    //if (abs(target - val) / (max - min) > 0.5) val = target
    val = ease(target, val, easing)
    return val
}

//Prepare an array map for the 4 Midi Fighter pages
const midi = []
for (i = 0; i < 4; i++) {
    page = []
	
    for (o = 0; o < 4; o++) {
        x = []
        for (u = 0; u < 4; u++) {
            x.push({up:0, down:0})
        }
        page.push(x)
    }
    midi.push(page)
}

function controlChange(control) {
    if (control.channel > 2) {
        return
    }
    page = floor((control.number) / 16)
    x = (control.number - page * 16) % 4
    y = floor((control.number - page * 16)/4)
    midi[page][x][y].up = control.value / 127
}

/////// MACRO 2 CODE: Receiving the Midi signal ///////

function setupMidi(idIn, idOut) {
    WebMidi.enable(function(err) {
        if(err) {
            console.log("WebMidi could not be enabled.", err);
        }

        // Print to console available MIDI in/out id/names
        WebMidi.inputs.forEach(function(element, c) {
            print("in  \[" + c + "\] " + element.name)
        });
        WebMidi.outputs.forEach(function(element, c) {
            print("out \[" + c + "\] " + element.name)
        });

        // assign in channel:
        if(typeof idIn === 'number') {
            midiInput = WebMidi.inputs[idIn]
        } else {
            midiInput = WebMidi.getInputByName(idIn)
        }
        midiInput.addListener('controlchange', "all", function(e) {
            let control = {
                type: 'controlchange'
            }
            control.channel = e.channel
            control.number = e.controller.number
            //control.name = e.controller.name
            control.value = e.value

            midiMsg.control = control
            controlChange(midiMsg.control)
        })
    })
}

[ffd8]

Indeed, when using online version, you'll have to use some form of self-hosting for additional assets (I built it to purposefully avoid hosting any info from anyone.. ie, all sketches + settings live in local-storage). I would highly recommend using offline if using it a lot (i use that exclusively) and only online of course for cocoding jams. Can easily host files like a JS on glitch.com as a static page that stays online all the time, or as a github repo (there's services to access those files as a CDN) – or more complicated, would be to host the server instance yourself for custom jams and point a self-hosted client to that websocket server.

Yupyup – having a UI for creating snippets is the plan, with fields for global top, setup top, setup bottom, draw top draw bottom, global bottom – since one usually needs snippets in various spots. it would then be stored within ones settings for easy import/export between browsers and online/offline.... eventually.

As for your snippet above, should work well - and once you put everything below the draw() within a separate JS file, you should be able to just load it dynamically at the top of any sketch and add to your setup/draw as you have it there with just 1-2 lines during a performance. i technically also have a snippet in place for osc (CTRL + SHIFT + O), which is only for offline usage.. but of course, one usually needs to enter lots more for a specific connection of i/o.. so again, preparing those common hookups as an external script that's loaded on demand makes sense if using often. My initial idea was to use CTRL + SHIFT + __ for snippets, but some need to use that within windows due to existing shortcuts and could become too many keys, hard to keep track of.. in the UI version, it will bringup a minimal dialog/menu to select from.

[ffd8]

@staus – FYI, the latest 1.5.0 release now has this snippets GUI that I started quite a long time ago, but got lost behind additional features that kept pushing back the release. check out the docs and hopefully it's explanatory (works both online and offline). Cheers!