• Interactivity

  • Web browser GUI slider to Bela control interface query

Hey everyone! I am trying to make an installation where sounds will be input into the Bela and then affected by different effects, and then output via speakers. The FX will be controlled by sliders in javascript via a phone. I have followed this page https://learn.bela.io/tutorials/pure-data/communication/controlling-bela-from-a-gui/ and got to the point where I was able to output and control the pitch of a sine wave via my phone. However, I am trying to connect more sliders to my phone but it's a bit difficult. I am using the Array method and it works for a single slider but I am not sure how to do it for multiple sliders. Perhaps I should be using the control method? I am still finding it hard to decipher how arrays work but when I try to add more sliders it kind of glitches out and feels like there's too much data flowing in.

This is my Java script code.

let reverbSlider;
let delaySlider;
let flangerSlider;
let resonatorSlider;
let combSlider;
let slider

function setup() {
    createCanvas(windowWidth, windowHeight);
    
   // slider = createSlider(0, 360, 0, 0);
   // slider.position(windowWidth/3, windowHeight/5);
   //slider.style('width', '200px');
    
    reverbSlider = createSlider(0, 360, 0, 0);
    reverbSlider.position(windowWidth/3, windowHeight/5);
    reverbSlider.style('width', '200px');
   
    delaySlider = createSlider(0, 360, 0, 0);
    delaySlider.position(windowWidth/3, windowHeight/4);
    delaySlider.style('width', '200px');
    
    flangerSlider = createSlider(0, 360, 0, 0);
   flangerSlider.position(windowWidth/3, windowHeight/4);
   flangerSlider.style('width', '200px');
    
    resonatorSlider = createSlider(0, 360, 0, 0);
    resonatorSlider.position(windowWidth/3, windowHeight/4);
    resonatorSlider.style('width', '200px');
    
   combSlider = createSlider(0, 360, 0, 0);
    combSlider.position(windowWidth/3, windowHeight/4);
    combSlider.style('width', '200px');
}

function draw() {
    background(220);
	line(mouseX, 0, mouseX, height);
		line(0, mouseY, width, mouseY);
		
		let reverbSliderVal = reverbSlider.value();
		let delaySliderVal = delaySlider.value();
		let flangerSliderVal = flangerSlider.value();		
		let resonatorSliderVal = resonatorSlider.value();
		let combSliderVal = combSlider.value();
		
		Bela.data.sendBuffer(0, 'float', [reverbSliderVal]);
		Bela.data.sendBuffer(0, 'float', [delaySlider]);
		Bela.data.sendBuffer(0, 'float', [flangerSliderVal]);
		Bela.data.sendBuffer(0, 'float', [resonatorSlider]);
		Bela.data.sendBuffer(0, 'float', [combSliderVal]);
				
			// Bela.data.sendBuffer(0, 'float', [0, 1, 2]);
			// Bela.data.sendBuffer(0, 'float', [100, 101, 102]);

}

And this is my pure data patch+how the sliders look like on a web browser. The idea is to have 5 of them (labelled) and the FX will be reverb, flanger etc.
![alt text](https://i.imgur.com/
alt text
sV6oi5c.png)

Any ideas or help would be appreciated.
Thanks <3

    reibang Bela.data.sendBuffer(0, 'float', [reverbSliderVal]);
    Bela.data.sendBuffer(0, 'float', [delaySlider]);
    Bela.data.sendBuffer(0, 'float', [flangerSliderVal]);
    Bela.data.sendBuffer(0, 'float', [resonatorSlider]);
    Bela.data.sendBuffer(0, 'float', [combSliderVal]);

    Here you are sending the values all on the first element of buffer 0.
    Also, you are using delaySlider instead of delaySliderVal and you are using resonatorSlider instead of resonatorSliderVal. (Check your browser's js console for errors)

    You have some options:

    1. send 5 elements on the same array:

      // when any slider changes
Bela.data.sendBuffer(0, 'float', [reverbSliderVal, delaySlider, flangerSliderVal, resonatorSlider, combSliderVal]);

    2. send as a control if you want to be notified when a change happens as opposed to having to continuously read the array:

      // when reverbSlider changes
Bela.control.send({reverb: reverbSliderVal});
// when delaySlider changes
Bela.control.send({delay: delaySliderVal});
// when flangerSlider changes
Bela.control.send({flanger: flangerSliderVal});
// when resonatorSlider changes
Bela.control.send({resonator: resonatorSliderVal});
// when combSlider changes
Bela.control.send({comb: combSliderVal});
      13 days later

      Hi @giuliomoro
      Thank you so much for that clarification!
      So, at the moment, I am being able to print data from 2 of the sliders. But I am trying to print and be able to use + control the data from the other sliders but cannot get them to be printed in the same array.
      alt text
      alt text
      I am trying to attach the array into ~osc objects to make sure they are working. But ultimately I want to just be able to control sound effects with the sliders.
      This is my updated Java script code

      let reverbSlider;
let delaySlider;
let flangerSlider;
let resonatorSlider;
let combSlider;
// let slider;

function setup() {
    createCanvas(windowWidth, windowHeight);

    reverbSlider = createSlider(0, 360, 0, 0);
    reverbSlider.position((windowWidth/2)-90, (windowHeight/2)-300);
    reverbSlider.style('width', '200px');
   
    delaySlider = createSlider(0, 360, 0, 0);
    delaySlider.position((windowWidth/2)-90, (windowHeight/2)-200);
    delaySlider.style('width', '200px');
    
    flangerSlider = createSlider(0, 360, 0, 0);
   flangerSlider.position((windowWidth/2)-90, (windowHeight/2)-100);
   flangerSlider.style('width', '200px');
    
    resonatorSlider = createSlider(0, 360, 0, 0);
    resonatorSlider.position((windowWidth/2)-90, windowHeight/2);
    resonatorSlider.style('width', '200px');
    
   combSlider = createSlider(0, 360, 0, 0);
    combSlider.position((windowWidth/2)-90, (windowHeight/2)+100);
    combSlider.style('width', '200px');
}

function draw() {
    background(220);
    
//     textSize(16);
// textAlign(RIGHT);
// text('ABCD', 50, 30);

// textSize(100);
// text('word', 100, 100);

textAlign(CENTER);
text('Reverb', (windowWidth/2)+10 , (windowHeight/2)-300);
textAlign(CENTER);
text('Delay', (windowWidth/2)+10 , (windowHeight/2)-200);
textAlign(CENTER);
text('Flanger', (windowWidth/2)+10 , (windowHeight/2)-100);
textAlign(CENTER);
text('Resonator', (windowWidth/2)+10 , (windowHeight/2));
textAlign(CENTER);
text('Comb filter', (windowWidth/2)+10 , (windowHeight/2)+100);
    
	line(mouseX, 0, mouseX, height);
		line(0, mouseY, width, mouseY);
		
		let reverbSliderVal = reverbSlider.value();
		let delaySliderVal = delaySlider.value();
		let flangerSliderVal = flangerSlider.value();		
		let resonatorSliderVal = resonatorSlider.value();
		let combSliderVal = combSlider.value();
	
	// when any slider changes
Bela.data.sendBuffer(0, 'float', [reverbSliderVal, delaySliderVal, flangerSliderVal, resonatorSliderVal, combSliderVal]);
				
}

      I am a little bit confused about how I can get the data from the reverb, delay etc.. sliders to be received into Pure data and be able to utilise them seperately. I am moving the first slider and the second slider (reverb and the delay) and getting changes in the console print. However, the other sliders dont make any changes and I dont even see their data being printed so not too sure what is going on. Any help would be appreciated!

      Regards

      You need to associate more arrays with the GUI at loadbang. E.g.:

      [new array delaySliderValue(
|
[s bela_setGui]

      Also note that simply having

      [array get x]
|
[print array x]

      won't print anything: you need to bang the first's first inlet to get something printed.

      alt text

      alt text

      Just applied the changes you suggested. The changes from the first two sliders still only affect the console printing on the reverbarray. "array reverbSliderVal: 343.715 360" However, the other sliders and their arrays arent quite getting printed.

      The Javascript code is still the same.

      I see now in your js code that you are sending everything to a single array. So you need to:

      • pass only one array with [new array arrayName( to [s bela_setGui]
      • resize the arrayName Pd array so that it is large enough to receive all the values you are sending from js (5 in this case)
      • use [array get arrayName] to retrieve all the values.
        6 days later

        Wonderful! I am getting 6 columns of data printed! I have been trying to play around with the sliders though. I was curious if there is a proper way to separate them after I get the array in [array get xy]. I kind of guessed and connected them the way I thought might work. But im wondering is there some sort of step needed to parse or seperate the data sets so I could use them for my effects (shown in the photo below. I copied the effects from Automatonism. At the moment, there doesnt seem to be any noticable differences when I play with the sliders in the Bela P5 GUI.

        alt text

        alt text

        a month later

        alt text
        giuliomoro
        Hey there!

        Sorry for possibly spamming you with too many things. I am still trying to learn a few things regarding arrays. So far, the sounds are being altered by the effects but I am having a difficult time trying to parse the data coming in from the GUI sliders. I am basically trying to alter sound input coming in from the adc~ via a transducer (i can hear sound when I tap the transducer) and output it via dac~/aux out. I have been trying to understand how arrays work in this context. I was assuming if I sent a message of the line of array I needed, in one of the inlets of array get, I'd get the array I was looking after.
        alt text

        Would you be able to point me in the right direction even if it's to do with what I could learn.. I have played around with graphical arrays before but I cant find much regarding array get?

          The [pd get] help patch shows that by default banging the first inlet will return a list of all the elements in the array, so it would be suitable for use with unpack, e.g.:

          alt text

          Alternatively, the first inlet is: onset (first index to output), zero for start of array, but you are sending numbers to the second inlet, which is number of points or -1 for end of array (and won't produce any output). So you should be sending the number to the first inlet instead. However, this will still return all elements to the end of the array, but you only want one element, so you should set a 1 in the second inlet, e.g.:

          alt text

          or, equivalently, taking advantage of Pd's distribution of elements into the first inlet to the others:

          alt text

          But at this point you are better off taking advantage of the creation arguments:

          alt text

          a month later

          Thanks so much! @giuliomoro This helped a lot 🙂 Trying to make an installation for a researcher!