滑块值不会随着值的增加而更新

Question

我正在尝试创建一个滑块，它在按下 space 后随着值的增加而移动，我们也可以将其向后或向前移动。背景颜色以此为基础变化。

我的问题是滑块 Val 始终设置为 0，因此它不会随着增量的增加而移动。我该如何解决？

另外，只有先点击canvas再按space才开始递增，这是正常的还是其他bug？

谢谢！

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>

Answer 1

我不确定这究竟应该做什么，因为您的 newBackground() 函数存在一些差异。但是，您在实际更新滑块值的代码中没有任何位置。

因此您需要在 newBackground()

的末尾添加

slider.value(val);

但是您会发现它没有按预期工作，因为您增加并检查了 inc 变量的边界，而不是将其添加到 val。因此，如果您需要滑块与背景颜色同步，则需要删除 inc 变量并仅使用滑块的值：

//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 = (e.x >= width/2 - 2 && e.x <= width/2 + 17) &&
            (e.y >= 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>

至于为什么您必须先单击 canvas：是因为该代码段已加载到 iframe 中。 iframe 最初未处于焦点状态，因此在它处于焦点状态之前不会向其发送事件。

滑块值不会随着值的增加而更新

Slider values not being updated as the value increases

javascript

slider

p5.js