Replace/toggle slider1.value() by slider2.value() within a variable in the code and within the canvas position

Asked

Viewed 38 times

0

I would like to replace/switch the slider that gives value to a variable within an object. The slider2 must replace and occupy within the code and also on the canvas the place that previously occupied the slider1, and vice versa. Let’s assume:

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());
}

I would like to, when triggering something like a keyPressed function or something, replace "slider1.value()" with "slider2.value()", there in Ellipse.

Another problem is positioning the slider within the canvas.

While I would like to replace slider.value(), I also need to replace "slider1.position" with "slider2.position", since one will take the place of the other on the canvas.

I tried to do something like create a keyPressed function after Function draw, as follows:

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);
}
}

but it did not work very well, because if the slider is not already created in the setup, initially appears located outside the canvas, which does not interest me, because in reality the composition is more complex, with several elements and buttons.

And another problem derived from this is that in the end, the two sliders overlap. I’d like one to go away so the other can appear and vice versa.

An interim solution for not overwriting the sliders was, within condition, to throw either one or the other out of the screen:

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);
}
}

Anyway, you’re not responding as expected.

I hope I was clear enough. Thank you for your attention. Abs and happy new year!

javascript slider

  • It would be interesting to ask the question the code so that the problem can be reproduced. Only then in theory it becomes complicated.

  • Hi, Sam. No code in the above problem description? I put 3 attempts of solution, showing the processes that I experienced but were not successful.

  • Dude, I didn’t test it. Can I play only with these codes? There’s no HTML/CSS?

  • Ah, I get it. I’m sorry, I use P5.js. So html calls the P5.js library, the javascript file (in this case, the code above), and runs. I’m going to climb him up onto a viewing platform and put it here for you to see. abs.

  • Sam, I’ve uploaded the sketch in this P5.js. editor. In this sketch I tried to use a button to make the switch. Still, the idea is the same: when to switch (in this case, press the button), switch from slider1.value to slider2.value and vice versa. Here is the link -> https://editor.p5js.org/ifafa/sketches/S1e8IJsWN abs

1 answer

0

I found an answer: put a Boolean condition next to the button, like true/false, and when the button is triggered, toggle between these two values.

var slider1;
var slider2;
var valuechange;

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

slider1 = createSlider(0, 500, 100);
slider1.position(100, 100);
slider2 = createSlider(0, 30, 30);
slider1.position(100, 100);

button = createButton("change");
button.position(100, 50);
button.mousePressed(change);

valuechange = slider1.value();
}


function draw() {
background(150);
translate(width/2, height/2);

stroke(255);
noFill();
strokeWeight(2);
ellipse(0, 0, valuechange, valuechange); 

if (button == true){ 
valuechange = slider2.value(); 
slider2.position(100,100);
slider1.position(-300, 100);

} else {
valuechange = slider1.value ();
slider1.position(100, 100);
slider2.position(-300, 100);
}
}

function change(){

if (button == true){
button = !true;
} else {
button = true; 
}
}

__

if you want to check the operation, here is the link -> editor.p5js.org/ifafa/sketches/S1e8ijswn

thank you!

Browser other questions tagged javascript slider

You are not signed in. Login or sign up in order to post.