[Csnd] example video showing Csound using OSC to a p5js sketch in the browser

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

[Csnd] example video showing Csound using OSC to a p5js sketch in the browser

zappfinger
Sliders and VU meters using p5js-OSC with Csound

Richard

https://www.youtube.com/watch?v=9_i4Oy_OEAM&feature=youtu.be

Csound mailing list
[hidden email]
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Reply | Threaded
Open this post in threaded view
|

Re: [Csnd] example video showing Csound using OSC to a p5js sketch in the browser

gsenna
Very nice, Richard. I recently started working with Open Stage Control
(https://osc.ammd.net/). Do you know it? It does the ws-osc conversion
automatically and it has a built-in web server. One can easily build
cool interfaces for Csound even from a smartphone then.

Cheers.


On 24/06/18 13:00, Richard wrote:

> Sliders and VU meters using p5js-OSC with Csound
>
> Richard
>
> https://www.youtube.com/watch?v=9_i4Oy_OEAM&feature=youtu.be
>
> Csound mailing list
> [hidden email]
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> Send bugs reports to
>        https://github.com/csound/csound/issues
> Discussions of bugs and features can be posted here

Csound mailing list
[hidden email]
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Reply | Threaded
Open this post in threaded view
|

Re: [Csnd] example video showing Csound using OSC to a p5js sketch in the browser

zappfinger
Thanks, sounds very interesting, I will have a look!

Richard


On 24/06/18 18:41, Guillermo Senna wrote:

> Very nice, Richard. I recently started working with Open Stage Control
> (https://osc.ammd.net/). Do you know it? It does the ws-osc conversion
> automatically and it has a built-in web server. One can easily build
> cool interfaces for Csound even from a smartphone then.
>
> Cheers.
>
>
> On 24/06/18 13:00, Richard wrote:
>> Sliders and VU meters using p5js-OSC with Csound
>>
>> Richard
>>
>> https://www.youtube.com/watch?v=9_i4Oy_OEAM&feature=youtu.be
>>
>> Csound mailing list
>> [hidden email]
>> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
>> Send bugs reports to
>>         https://github.com/csound/csound/issues
>> Discussions of bugs and features can be posted here
> Csound mailing list
> [hidden email]
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> Send bugs reports to
>          https://github.com/csound/csound/issues
> Discussions of bugs and features can be posted here

Csound mailing list
[hidden email]
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Reply | Threaded
Open this post in threaded view
|

Re: [Csnd] example video showing Csound using OSC to a p5js sketch in the browser

Tarmo Johannes-3
In reply to this post by zappfinger
Hi,

very nice demo, thanks!
Would you care to share the html and csd file -  I am interested would it be
possible to do similar thing withing CsoundQt (-html) or Csound-wasm so that
you actually don't need web protocol but just Csound channels for
communication?

greetings,
tarmo

On Sunday, June 24, 2018 7:00:21 PM EEST you wrote:

> Sliders and VU meters using p5js-OSC with Csound
>
> Richard
>
> https://www.youtube.com/watch?v=9_i4Oy_OEAM&feature=youtu.be
>
> Csound mailing list
> [hidden email]
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> Send bugs reports to
>         https://github.com/csound/csound/issues
> Discussions of bugs and features can be posted here

Csound mailing list
[hidden email]
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Reply | Threaded
Open this post in threaded view
|

Re: [Csnd] example video showing Csound using OSC to a p5js sketch in the browser

zappfinger
Of course Tarmo. Good questions, btw.
Here are the files.


Richard


On 24/06/18 19:04, Tarmo Johannes wrote:

> Hi,
>
> very nice demo, thanks!
> Would you care to share the html and csd file -  I am interested would it be
> possible to do similar thing withing CsoundQt (-html) or Csound-wasm so that
> you actually don't need web protocol but just Csound channels for
> communication?
>
> greetings,
> tarmo
>
> On Sunday, June 24, 2018 7:00:21 PM EEST you wrote:
>> Sliders and VU meters using p5js-OSC with Csound
>>
>> Richard
>>
>> https://www.youtube.com/watch?v=9_i4Oy_OEAM&feature=youtu.be
>>
>> Csound mailing list
>> [hidden email]
>> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
>> Send bugs reports to
>>          https://github.com/csound/csound/issues
>> Discussions of bugs and features can be posted here
> Csound mailing list
> [hidden email]
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> Send bugs reports to
>          https://github.com/csound/csound/issues
> Discussions of bugs and features can be posted here

Csound mailing list
[hidden email]
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here

index.html (1K) Download Attachment
webOSC.csd (1K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: [Csnd] example video showing Csound using OSC to a p5js sketch in the browser

Tarmo Johannes-3
Thanks,

Looking at the html, seems sketch.js is where the main code is? Can you send
also that one?

tarmo

On Sunday, June 24, 2018 8:26:02 PM EEST you wrote:

> Of course Tarmo. Good questions, btw.
> Here are the files.
>
>
> Richard
>
> On 24/06/18 19:04, Tarmo Johannes wrote:
> > Hi,
> >
> > very nice demo, thanks!
> > Would you care to share the html and csd file -  I am interested would it
> > be possible to do similar thing withing CsoundQt (-html) or Csound-wasm
> > so that you actually don't need web protocol but just Csound channels for
> > communication?
> >
> > greetings,
> > tarmo
> >
> > On Sunday, June 24, 2018 7:00:21 PM EEST you wrote:
> >> Sliders and VU meters using p5js-OSC with Csound
> >>
> >> Richard
> >>
> >> https://www.youtube.com/watch?v=9_i4Oy_OEAM&feature=youtu.be
> >>
> >> Csound mailing list
> >> [hidden email]
> >> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> >> Send bugs reports to
> >>
> >>          https://github.com/csound/csound/issues
> >>
> >> Discussions of bugs and features can be posted here
> >
> > Csound mailing list
> > [hidden email]
> > https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> > Send bugs reports to
> >
> >          https://github.com/csound/csound/issues
> >
> > Discussions of bugs and features can be posted here
>
> Csound mailing list
> [hidden email]
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> Send bugs reports to
>         https://github.com/csound/csound/issues
> Discussions of bugs and features can be posted here

Csound mailing list
[hidden email]
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Reply | Threaded
Open this post in threaded view
|

Re: [Csnd] example video showing Csound using OSC to a p5js sketch in the browser

zappfinger
That's a tricky one, since the mail won't accept it, I also tried
zipping it, to no avail.
So here is the code of sketch.js, followed by the code for objectlib.js

//  sketch.js

var x, y;
var rSlider, gSlider, bSlider, vs1, vs2, vslids = [];
var socketready = false;
var oldval = 0;
var socket = null;
var volL = 0;
var volR = 0;

function setup() {
     createCanvas(720, 500);
     setupOsc(7771, 7770);
     textSize(15);
       noStroke();
       // create sliders
       vslids[0] = new Vslider(20,10, "att", 0, 100, 10);
       vslids[1] = new Vslider(60,10, "dec", 0, 255, 100);
       vslids[2] = new Vslider(140,10, "sens", 0, 100, 44);
}

function draw() {
     var r = vslids[0].value();
     var g = vslids[1].value();
     var sens = vslids[2].value();
     sendOsc("/input/sensit", sens);
     VUmeters(200, 60, volL, volR);
}

function receiveOsc(address, value) {
     //console.log("received OSC: " + address + ", " + value);
     if (address == '/input/volume') {
         volL = min(abs(value[0]), 100);
         volR = min(abs(value[1]), 100);
         //console.log(volL);
     }
}

function sendOsc(address, value) {
     if (socketready) {
         if (oldval != value) {
             //console.log("Send " + address + ", " + value);
             socket.emit('message', [address].concat(value));
             oldval = value;
         }
     }
}

function setupOsc(oscPortIn, oscPortOut) {
     socket = io.connect('<a href="http://127.0.0.1:8081'">http://127.0.0.1:8081', { port: 8081,
rememberTransport: false });
     socket.on('connect', function() {
         socket.emit('config', {
             server: { port: oscPortIn,  host: '127.0.0.1'},
             client: { port: oscPortOut, host: '127.0.0.1'}
         });
         socketready = true;
     });
     socket.on('message', function(msg) {
         if (msg[0] == '#bundle') {
             for (var i=2; i<msg.length; i++) {
                 receiveOsc(msg[i][0], msg[i].splice(1));
             }
         } else {
             receiveOsc(msg[0], msg.splice(1));
         }
     });
}
// end of sketch.js

// code for objectlib.js
//
// p5 GUI object library
//

var Y_AXIS = 1;
var X_AXIS = 2;
var b1, b2, c1, c2;

function Vslider(x,y, txt, min,max,deft){
   this.slid = createSlider(min, max, deft);
   this.slid.position(x, y);
   this.slid.style('rotate', -90);
   this.slid.style('translate', -40, 80);
   //
   text(txt, x+15, y+170);
   fill(50);

   this.value = function() {
     fill(50);
     rect(x+10, y, 40, 20);
     fill(150);
     text(this.slid.value(), x+15, y+15);
     return this.slid.value();
   };
   Vslider.prototype.setval = function (x) {
       this.slid.value(x);
   };
}

function settext(x,y, txt) {
     fill(50);
     rect(x+10, y, 400, 20);
     fill(150);
     text(txt, x+15, y+15);
}

function VUmeter(x, y, val) {
   c1 = color(17, 158, 40);
   c2 = color(229, 122, 40);
   setGradient(x, y, 20, 100, c2, c1, Y_AXIS);
   fill(0);
   rect(x+1, y, 18, 100-val);
}

function VUmeters(x, y, val1, val2) {
   VUmeter(x, y, val1);
   VUmeter(x+30, y, val2);
}

function setGradient(x, y, w, h, c1, c2, axis) {
   noFill();
   if (axis == Y_AXIS) {  // Top to bottom gradient
     for (var i = y; i <= y+h; i++) {
       var inter = map(i, y, y+h, 0, 1);
       var c = lerpColor(c1, c2, inter);
       stroke(c);
       line(x, i, x+w, i);
     }
   }
   else if (axis == X_AXIS) {  // Left to right gradient
     for (var i = x; i <= x+w; i++) {
       var inter = map(i, x, x+w, 0, 1);
       var c = lerpColor(c1, c2, inter);
       stroke(c);
       line(i, y, i, y+h);
     }
   }
}
// end of code for objectlib.js


On 24/06/18 20:08, Tarmo Johannes wrote:

> Thanks,
>
> Looking at the html, seems sketch.js is where the main code is? Can you send
> also that one?
>
> tarmo
>
> On Sunday, June 24, 2018 8:26:02 PM EEST you wrote:
>> Of course Tarmo. Good questions, btw.
>> Here are the files.
>>
>>
>> Richard
>>
>> On 24/06/18 19:04, Tarmo Johannes wrote:
>>> Hi,
>>>
>>> very nice demo, thanks!
>>> Would you care to share the html and csd file -  I am interested would it
>>> be possible to do similar thing withing CsoundQt (-html) or Csound-wasm
>>> so that you actually don't need web protocol but just Csound channels for
>>> communication?
>>>
>>> greetings,
>>> tarmo
>>>
>>> On Sunday, June 24, 2018 7:00:21 PM EEST you wrote:
>>>> Sliders and VU meters using p5js-OSC with Csound
>>>>
>>>> Richard
>>>>
>>>> https://www.youtube.com/watch?v=9_i4Oy_OEAM&feature=youtu.be
>>>>
>>>> Csound mailing list
>>>> [hidden email]
>>>> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
>>>> Send bugs reports to
>>>>
>>>>           https://github.com/csound/csound/issues
>>>>
>>>> Discussions of bugs and features can be posted here
>>> Csound mailing list
>>> [hidden email]
>>> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
>>> Send bugs reports to
>>>
>>>           https://github.com/csound/csound/issues
>>>
>>> Discussions of bugs and features can be posted here
>> Csound mailing list
>> [hidden email]
>> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
>> Send bugs reports to
>>          https://github.com/csound/csound/issues
>> Discussions of bugs and features can be posted here
> Csound mailing list
> [hidden email]
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> Send bugs reports to
>          https://github.com/csound/csound/issues
> Discussions of bugs and features can be posted here

Csound mailing list
[hidden email]
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here