From one button, one fader, one variable widget... to only one button

Sylvain · January 3, 2022, 5:25pm

Hi !

cohérence

So, when i press the button, fader starts to go up and down (ok, and kinda morphing itself...), and stops after 5 minutes... I've made this tiny little things... you know... breath in for 5sec / breath out for 5s...

A few time ago, i wouldn't have been able to do this, so it's cool for me...

But i need / want to learn more...

I'm actually trying to go from :

one variable widget
one fader
one button

To only one button...

How to re-introduce the variable widget into the button's script ?

I've been trying to use locals variables... but i'm stuck, so any advice, any clue would be highly appreciated !

Well... here's the file :
cohérence.json (10.5 KB)

Here's the button's script :

var fad = 'fader_9'

if (value == 1 && get(fad) != 500)

  {
  set(fad,0)
  locals.Up=setInterval(function(){set(fad, get(fad)+1)},10)
  }

else if (value == 1 &&  get(fad) == 500)

  {
  locals.Down=setInterval(()=>{set(fad, get(fad)-1)},10)
  }


else if (value === 0) 
{
  clearInterval(locals.Up); 
  clearInterval(locals.Down);
}

Here's the fader's one :

// REACTIVE LE BOUTON, Stoppe le process et RTZ, attribue texte.

var bouton = 'button_9'
var compteur = 'variable_compteur_4'
var FADER = get('this')


// RE-TOGGLE BUTTON............................................................................

if((FADER === 0 || FADER == 500) && (get(compteur) !==0 && get(compteur) < 66))   // Relance le script du bouton pour redescendre et remonter ...
{
  set(bouton,0);set(bouton,1)
}


// END PROCESS..................................................................................

if(FADER === 0 && get(compteur) == 66 )  // Remise à 0 de variable_compteur_4 en fin de process
{
  set(compteur,0)
  set(bouton,0);
}


// TEXT HTML.....................................................................................

if(locals.valeurprecedente !== undefined)                              // Si la valeur précédente est connue...
  {
  if(locals.valeurprecedente > value) {setVar(bouton,'text','Expire')}         // ... et qu'elle est supérieure à l'actuelle (donc que le fader redescend), écrit "Expire"
  else if(locals.valeurprecedente < value) {setVar(bouton,'text','Inspire')}   // ... mais si elle est inférieure à l'actuelle (donc que le fader remonte), écrit "Inspire"
  }


locals.valeurprecedente = value                                       // Mise à jour de la valeur. La variable vaut donc la valeur du fader...

And the variable's widget value is set to :

#{@{this}+@{button_9}}

Thanks

Sylvain · January 7, 2022, 6:23am

Well... finally, i found out how to do, step by step, and It seems to work fine... except that i don't know why this frog is shaking so much (must be the gif settings)...

grenouille

I may have some little things to tweak (emergency-stop-frog-button, find out how to have the button centered before it's pressed, and some other things... Send midi notes too, to play beautiful ostinatos... sending midi cc to automate pan... and so on and so on...).

Please let me know if some things are too weird in my code, and would need to be changed... As many of us, i'm learning all this on my own, helped a lot by from jean-emmanuel, so...

@jean-emmanuel : i just have one question about this one...

at the end of the code, just before "closing" the two setInterval functions, i had to set the button to 0, in order to make the loop goes on. If i don't do this, it stops. Why ?

Here's the code, and the json
Zen_Frog.json (6.9 KB)
:

if (locals.fader === undefined) locals.fader = 0;
if (locals.compteur === undefined) locals.compteur = 0;


if(locals.compteur < 30) /* Fixe la limite du compteur à 30... Tant qu'on est en-dessous, on va boucler...*/
{
  locals.monte = setInterval(function()  /* on déclare une locale-boucle "monte" */
  {
    setVar('this','fad',locals.fader);                 /* alimente la variable "fad" utilisée dans les propriétés, DOIT RESTER DANS LA BOUCLE */
    setVar('this','text','Breath in...')
    if( locals.fader >=0 && locals.fader <500 )        /* Pour une valeur de la locale fader strictement inférieure à 500... */
        {
        locals.fader+=1                                /* incrémente de 1 la locale fader */
        } 
    else if(locals.fader==500)                         /* quand elle arrive à 500... */
        {
        clearInterval(locals.monte);                   /* réinitialise la locale "monte" */
        locals.descend = setInterval(function()        /* initialise la locale-boucle "descend" */
            {
            setVar('this','fad',locals.fader);         /* alimente la variable "fad", utilisée dans las propriétés DOIT RESTER DANS LA BOUCLE */
            setVar('this','text','Breath out...')
            if(locals.fader>=1)
              {
              locals.fader-=1                          /* décrémente de 1 la locale fader */
              } 
            else if(locals.fader===0)                  /* quand elle revient à 0... */
              {
              clearInterval(locals.descend);           /* réinitialise la locale "descend" */
              locals.compteur +=1;                     /* incrémente la locale "compteur" */
              set('this',0)                            /* remet le bouton à 0 */
              } 
            },10);                                     /* Timing de la cboucle "descend" */
        } 
  },10);                                                /* Timing de la boucle "monte" */
}

else {set('this',0); locals.compteur = 0;}             /* Si le compteur est à 30, remet celui-ci ainsi que le bouton à 0 */

Froggy yours

jean-emmanuel · January 8, 2022, 4:38pm

Honestly it's not easy to follow the logic here, but I'm glad you find your way through this.

One important thing that you missed is that setInterval doesn't work in o-s-c exactly like in vanilla javascript, it's automatically cleared when called again (to prevent unwanted duplication) and an indentifier can be passed as first argument if one needs to have simultaneous timeouts / intervals.

i don't know why this frog is shaking so much

Animating top/left/width/height usually performs poorly, using css transforms instead should be better.

Here is a much simpler implementation:
frog.json (3.1 KB)

Sylvain · January 8, 2022, 5:27pm

Honestly it's not easy to follow the logic here, but I'm glad you find your way through this

Well, thank you it's just a brain-killer logic ! As i don't know anything about javascript (would it be vanilla or chocolate or whatever you want !), i often feel like Champollion when he first went to Egypt... since i'm working with o-s-c...

an indentifier can be passed as first argument if one needs to have simultaneous timeouts / intervals.

At first i thought "whaaaat ?"... but i believe i understand...

Thank you for the simplified json, i'll have a look at it right now !

Sylvain · January 9, 2022, 10:37am

Well... yesterday i was young, and now... i grew up...
I had a closer look on "animation" in CSS... so cool.
grenouille2

To have my frog animated for 5 minutes, i finaly made this, and it's perfect... :
HTML

<div class="bouge_la_grenouille"> </div>

CSS

JS{
var css=''

if(@{this} === 0) css =
' .bouge_la_grenouille {background: no-repeat center/100% url(Images/grenouille_zen.png); '
+ ' height: 100px; width: 100px; '
+ ' margin: 5px ; } '

if(@{this}==1) css =
' .bouge_la_grenouille {background: no-repeat center/100% url(Images/grenouille_zen.png); '
+ ' height: 100px; width: 100px; '
+ ' margin:5px ; '
+ ' animation: Cinq_minutes 5s 60 alternate;} '
+ ' @keyframes Cinq_minutes '
+ ' { 0% { transform: scale(.2,.2); }  100% { transform: scale(1,1); } } ' 

return css
}

This frog really taught me a lot of things !

jean-emmanuel · January 9, 2022, 10:53am

Haha yes using css animation is perfect ! To write multiline strings in javascript you can use backticks:

var s = `multiline
string`

Sylvain · January 9, 2022, 10:58am

Yeah, good to know, thank you !

Sylvain · January 9, 2022, 2:22pm

I'm back again...

@jean-emmanuel, I've adapted, just a little, your json, to have both cycle and framelength ok with my frog, and added a timeout to reset the button after 5 minutes.

But now, i want her (it ?) to be an artist, not just a frog. I want her (it ?) to play the harp...
Well. For now, she (it ?) plays a note each time we change direction :

if (locals.curseur === undefined){
  locals.curseur = 0 
  locals.direction = 1 
  locals.cycle = 5000 
  locals.framelength = 25 
  setVar('this', 'text', 'Inspire')  

}

if (value) {
   
  
  // RAZ du bouton au bout de 5 minutes
  setTimeout(()=>{set('this',0)},300000) 
  
  
  setInterval(()=>{
   locals.curseur += locals.direction * locals.framelength / locals.cycle
 
  if (locals.direction == 1 && locals.curseur >= 1) { send('/note',1,59,0) ; send('/note',1,60,60) ; locals.direction = -1 ; setVar('this', 'text', 'Expire') }
   
  else if (locals.direction == -1 && locals.curseur <= 0) { send('/note',1,59,0) ; send('/note',1,48,60) ; locals.direction = 1 ; setVar('this', 'text', 'Inspire') }
  
  }, locals.framelength)

But i can't have any note sent beetween those values. I guess all have to be set inside the loop, so i tried ;

  setInterval(()=>{
   locals.curseur += locals.direction * locals.framelength / locals.cycle

  if (locals.direction == 1 && locals.curseur == 0.5) { send('/note',1,52,60)}
 
  else if (locals.direction == 1 && locals.curseur >= 1) {send('/note',1,60,60) ; locals.direction = -1 ; setVar('this', 'text', 'Expire') }

  else if (locals.direction == -1 && locals.curseur <= 0) { send('/note',1,48,60) ; locals.direction = 1 ; setVar('this', 'text', 'Inspire') }
  
  }, locals.framelength)

But i don't have the intermediate note... how can i link note and locals.curseur value, then ?... I need my frog to play a beautiful pentatonic...

Btw, when i start / stop the button, i have this :
debug

What does that mean ?

thank you

Topic		Replies	Views
Preform fade using a button? Usage questions	9	268	January 10, 2022
How to add a value to a fader via a button - single and matrix Usage questions	8	506	December 8, 2021
Changing fader value Usage questions	2	220	January 24, 2023
Quick Press Functionality from Fader Usage questions scripting	1	38	July 28, 2024
Simple Set('variable_1', value) Example Usage questions scripting	2	246	August 29, 2023

From one button, one fader, one variable widget... to only one button

Related topics