Substituir/alternar slider1.value() por slider2.value() dentro de uma variável no código e dentro da posição no canvas

Gostaria de substituir/alternar o slider que dá valor a uma variável dentro de um objeto. O slider2 deve subsituir e ocupar dentro do código e também no canvas o lugar que antes ocupava o slider1, e vice-versa. Vamos supor:

var slider1; var slider2;  function setup() { createCanvas (windowWidth, windowHeight);  slider1 = createSlider(0, 255, 125); slider1.position(100, 100);  slider2 = createSlider(0, 500, 125); slider2.position(100, 100); }  function draw(){ background(0);   translate(width/2, height/2);  stroke(255); strokeWeight(5); noFill(); ellipse(50, 50, slider1.value(), slider1.value()); } 

Eu gostaria de, ao acionar algo como uma função keyPressed ou algo assim, substituir o “slider1.value()” pelo “slider2.value()”, ali na ellipse.

Um outro problema é posicionar o slider dentro do canvas.

Ao mesmo tempo que gostaria de substituir slider.value(), preciso substituir também o “slider1.position” pelo “slider2.position”, já que um vai ocupar o lugar do outro no canvas.

Tentei fazer algo como criar uma função keyPressed depois do function draw, da seguinte forma:

var slider1; var slider2; var value;  function setup() { createCanvas (windowWidth, windowHeight);  slider1 = createSlider(0, 500, 100); slider2 = createSlider(0, 300, 100);  }  function draw() {  background(150); translate(width/2, height/2);  value = slider1.value(); stroke(255); noFill(); strokeWeight(2); ellipse(0, 0, value, value);  }     function keyPressed(){  if (keyCode == DOWN_ARROW) { value = slider2.value(); slider2.position(100, 100);  } else {  value = slider1.value(); slider1.position(100, 100); } } 

mas não deu muito certo, porque se o slider não for criado já no setup, inicialmente aparece situado fora do canvas, o que não me interessa, porque na real a composição é mais complexa, com vários elementos e botões.

E um outro problema derivado disso é que por final, os dois sliders ficam sobrepostos. Eu gostaria que um sumisse para que o outro aparecesse e vice-versa.

Uma solução provisória para não sobrepor os sliders foi, dentro da condição, jogar um ou outro para fora da tela:

var slider1; var slider2;   var value = 50;  function setup() { createCanvas (windowWidth, windowHeight);  slider1 = createSlider(0, 500, 100); slider1.position(100, 100);  slider2 = createSlider(0, 50, 50); slider2.position(-300, 100);  }  function draw() { background(150); translate(width/2, height/2);  stroke(255); noFill(); strokeWeight(2); ellipse(0, 0, value, value); }  function keyPressed(){  if (keyCode == 'DOWN_ARROW') {  value = slider2.value(); slider2.position(100, 100); slider1.position(-300, 100);  } else {  value = slider1.value(); slider2.position(-300, 100); slider1.position(100, 100); } } 

De toda forma, não está respondendo como o esperado.

Espero ter sido claro o suficiente. Agradeço a atenção. Abs e feliz ano-novo!