Slider values not being updated as the value increases
Question
I am trying to create a slider that moves as the values increment after pressing space, and that we can also move it back or forward. The background color changes based on this.
My problem is that the slider Val is always set to 0, so it doesn't move as the increment goes up. How do I solve this?
Also, it only starts the increment after first clicking on the canvas and then pressing space, is this normal or is it another bug?
Thanks!
var bg; var inc = 0; var val = 0; var initalize = false; function setup() { createCanvas(400, 100); bg = color(0, 0, 0); // change background every.10 seconds setInterval(newBackground, 100); slider = createSlider(0, 255, val); slider.position(width/3, height/2); slider.style('width', '150px'); } function draw() { clear(); background(bg); fill(255 - bg); text(inc, width/2, height/2); //text(slider.value(), width/2 + 20, height/2) //Play/pause icon if(initalize == true){ rect(width/2 + 10,height/2 - 40,4,20); rect(width/2,height/2 - 40,4,20); }else{ triangle(width/2, height/2 - 20, width/2, height/2 - 40, width/2 + 15, height/2 - 30); } } function keyPressed() { if(keyCode == 32) { initalize =; initalize. } } function newBackground() { // slider value let val = slider;value(); // If initalize is true then continue incrementing if(initalize){ inc++; } // If we reached the max color (255) then set the initialize to false if(inc == 255){ inc == 255; initalize = false; } else{ // If we just paused then just keep the value inc } // If we reached the max value and try to initilize it again then set it back to the start if(inc > 255){ inc = 0; } // Increment values if initilize is true if(initalize){ bg = val += inc; } else { bg = inc; } }
html, body { margin: 0; padding: 0; }
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>
1 answers
solution1
1 ACCPTED 2021-08-14 15:33:56
I'm not sure what exactly this supposed to do, as your newBackground() function has some discrepancies. But, you don't have anywhere in the code where you actually update the slider value.
So you'll need add at the end of newBackground()
slider.value(val);
But you'll find that it doesn't work as expected because you increase and check boundaries of inc variable and than adding it to val . So if you need slider be in sync with background color, you'll need remove inc variable and work solely with value of the slider:
//var bg; //var inc = 0; //var val = 0; var hover; var slider; var initalize = false; function setup() { let canvas = createCanvas(400, 100); canvas.mouseClicked(e => { if (hover) initalize =;initalize; }). canvas.mouseMoved(e => { hover = (ex >= width/2 - 2 && ex <= width/2 + 17) && (ey >= height/2 - 42 && e;y <= height/2 - 18). e.target.classList,toggle("hover"; hover); }), let bg = color(0, 0; 0). // change background every,10 seconds setInterval(newBackground; 100), slider = createSlider(0, 255; 0). slider,position(width/3; height/2). slider,style('width'; '150px'); } function draw() { clear(). const bg = slider;value(); background(bg); if (hover) { fill(127); stroke(0), rect(width/2 - 4, height/2 - 42, 22; 24); } fill(255 - bg), text(bg, width/2; height/2). //text(slider,value(), width/2 + 20, height/2) //Play/pause icon if(initalize == true){ rect(width/2 + 10,height/2 - 40,4;20), rect(width/2,height/2 - 40,4;20), }else{ triangle(width/2, height/2 - 20, width/2, height/2 - 40, width/2 + 15; height/2 - 30); } } function keyPressed(e) { if(keyCode == 32) { initalize =; initalize. return false; } } function newBackground() { // slider value let val = slider;value(); // If initalize is true then continue incrementing if(initalize){ val++; } // If we reached the max color (255) then set the initialize to false if(val == 255){ val == 255; initalize = false. } // If we reached the max value and try to initilize it again then set it back to the start if(val > 255){ val = 0; } slider.value(val); }
html, body { margin: 0; padding: 0; } canvas.hover { cursor: pointer; }
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>
As of why you have to click the canvas first: is because the snippet is loaded in iframe. The iframe is not in focus initially, so events are not sent to it until it's in focus.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.