Feature request : Coding arena

[geneticmoo]

I'm interested in developing P5Live so that each person codes in their own window. So they each have their own function to work in. drawTim() drawNicola() . Then all the functions are drawn in order to the screen. This way there is more space for everyone to breath. Each user just sees their window and the shared space. Plus icons for the other users to see into each others windows, but to minimize them as needed. Then there would be a shared space where all the drawings go. There would be some conventions about global variables, and built in collision detection.

So P5Live becomes more like a coding arena. This could lead to interesting multiplayer dynamics, coded games, battles, collaborative drawing puzzles etc..

Does this sound doable? How would I start on this? Would it make sense to branch from P5Live, or just pull out the parsing + networking code from P5Live (which I think is the main thing I need) and use it in a new program. I've not used github much - coded lots in Processing and quite a bit in P5JS.

Tim

[ffd8]

Thanks for the ideas. COCODING is really intended to be a sandbox like playground for coding with others, that being said, right now I'm working on implementing a 'classroom' setting for it, where multiple sessions run parallel and at the end one could do a show + tell of those sketches (perhaps overlapped if no background is involved?). However the exchange and ping+pong with others in the same space is an important aspect of it. If it's chaotic, you can 'lockdown' and limit who is editing (useful if having 10+ people in there).

For building your own sort of p5Areana – it's quite easy to share values between users with websockets (P5LIVE is using socket.io – but other libs for websockets or webRTC would work).

Originally it came with a button to preload the following cocodingLayers sketch, which was intended for something similar – let people play on their own layers, which are all combined within the sketch – the big problem is order of layers.. who gets to be drawn last and thus on top?? I attach it for seeing if this accomplishes some of what you're interested in doing:

/* cocodeLayers // cc teddavis.org 2019     */
/* Add layer#() functions below as needed   */

function layer0(c){
    c.clear(); // to clear rendering trace
    c.fill(frameCount%255);
    c.circle(mouseX, mouseY, 100);
}

function layer1(c){
    c.stroke(0, 255, 255, 50);
    c.line(width/2, height/2, mouseX, mouseY);
}

// function layer2(c){
//  c.fill(255);
//  c.text("hi, i'm layer 2", mouseX, mouseY);
// }

/* COLLECTIVE CODE, DON'T EDIT BELOW        */
/* START                                    */

/* SETTINGS                                 */
var layerCount = 5; // number of layers (add as needed)
var layerDensity = 1; // pixelDensity per layer 

var cocodeLayers = [];
function setup() {
    createCanvas(windowWidth, windowHeight);
    prepImgs();
}

function draw() {
    background(0);
    buildImgs();
    renderImgs();
}

function prepImgs(){
    for(var i=0; i< layerCount; i++){
        cocodeLayers.push(createGraphics(width, height));
        cocodeLayers[i].pixelDensity(layerDensity);
    }
}

function buildImgs(){
    for(var i=0; i< layerCount; i++){
        // add logic for turning layers on/off
        try{push();window["layer"+i](cocodeLayers[i]);pop();}catch(e){}
    }   
}

function renderImgs(){
    for(var i=0; i< layerCount; i++){
        image(cocodeLayers[i], 0, 0, width, height);
    }
}

/* END                                      */
/* COLLECTIVE CODE, DON'T EDIT ABOVE        */

Maybe what you're imagining is something else all together – where WebRTC is connecting the canvas's from multiple sketches together and blending them in a clever way? You should check out hydra's pixeljam for another way in which people can code in their own window.

Feel free to keep the dialog going, but I'm going to close this, as I don't intend to split the COCODING into isolated windows just yet...

[geneticmoo]

Yes just like that.

Each person codes their own layer (or layers) is exactly what I had in mind. It means they can code in peace and quiet in their window and then send it to the shared space. The order of layers would be discussed by the participants and yes different systems can be used - round robin, in order of sending, size, speed, color coded etc. There would be no backgrounds, but rather background effects which would be drawn below the top layer of animated creatures (I'm mainly interested in alife coding) . So they might have a weather() function and a creature() function rather than a setup() and draw() in their own area.

In the shared space the animations collide and respond to each other and the background weather.

The benefit of having your own space is that people code at different speeds and the interface as it is, is crowded and a bit confusing and overwhelming for beginners - there's too many buttons. Also a bit fragile in places. I'm not sure there is much benefit of having the code on top of the visuals apart from that is the live-coding aesthetic - and kind of cool looking but soon gets clunky to use when things get in the way of each other - or if there is a lot of code. I mean this in terms of teaching creative coding to groups of beginners which I've done a lot of. P5Live is cool as a live-coding tool.

Thanks for your response - i will try some of your suggestions but I see there is a huge amount of code to get on top of.

I'm also looking at much simpler systems of collaborative coding where the instructions are more like scratch blocks and thus easier to parse and network. But having the full power of P5JS at your fingertips is really impressive.

Good luck with P5live.