p5.j​​s - 实时更新多个滑块的滑块值

问题描述

我有一个项目，它有多个滑块来调整小草图图案。我最初制作了一个按钮来在更改后更新它们的值，但我想让它随着更改实时运行。

这是我最近尝试显示的值； （它非常混乱，因为我已经尝试了近 20 多种不同的方法（我通常使用 let 和 const，但是 p5.js 有一段时间没有更新，所以我认为它可能会影响它），一旦我得到一些我想要的东西返回并包括迭代和循环以减轻它）（这里也是一个新手程序员）

 let a = randomNumber(-3,3),b = randomNumber(-3,c = randomNumber(-3,d = randomNumber(-3,r = randomNumber(0,255),g = randomNumber(0,z = randomNumber(0,o = 50;

function randomNumber(min,max) { 
  return Math.random() * (max - min) + min;
} 


var  aSlider,bSlider,cslider,dSlider,rSlider,gSlider,zSlider,oSlider;
var  sliders = new Array(aSlider,oSlider);
var  aLabel,bLabel,cLabel,dLabel,rLabel,gLabel,zLabel,oLabel;
var labels = new Array(aLabel,oLabel);
var x=1,y=1;
// let each_Slider = aSlider,oSlider;
let slider_Value = new Array(a.toFixed(2),b.toFixed(2),c.toFixed(2),d.toFixed(2),r.toFixed(0),g.toFixed(0),z.toFixed(0),o.toFixed(0));




// UI set up


function setup() {
  const rSlider = createSlider(0,255,r,0.01);
  const rLabel = createElement('h3',"Red = " + slider_Value[4]);
  const gSlider = createSlider(0,g,0.01);  
  const gLabel = createElement('h3',"Green = " + slider_Value[5]);
  const zSlider = createSlider(0,z,0.01); 
  const zLabel = createElement('h3',"Blue = " + slider_Value[6]); 
  const oSlider = createSlider(0,100,o,0.01);  
  const oLabel = createElement('h3',"Opacity = " + slider_Value[7]);
  const aSlider = createSlider(-3,3,a,0.1);  
  const aLabel = createElement('h3',slider_Value[0]);
  const bSlider = createSlider(-3,b,0.1);  
  const bLabel = createElement('h3',slider_Value[1]);
  const cslider = createSlider(-3,c,0.1); 
  const cLabel = createElement('h3',slider_Value[2]); 
  const dSlider = createSlider(-3,d,0.1);
  const dLabel = createElement('h3',slider_Value[3]);
  var myButton = createButton("Redraw")
  myButton.mousepressed(function() {
    a = aSlider.value();
    b = bSlider.value();
    c = cslider.value();
    d = dSlider.value();
    r = rSlider.value();
    g = gSlider.value();
    z = zSlider.value();
    o = oSlider.value();
    background(245);
    stroke(r,o); 
  })
  slider_Value;
  createCanvas(1000,1000);
  stroke(r,o);
  pixelDensity(1); 
}

// Attractor sketching

function draw() {
  for(var i = 0; i < 1000; i++) {
    var oldX = x;
    var oldY = y;
    x = sin(a * oldY) - cos(b * oldX);
    y = sin(c * oldX) - cos(d * oldY);
    var scaledX = map(x,-2,2,width);
    var scaledY = map(y,height);
    point(scaledX,scaledY);
  }

}

最近一段时间我一直在努力使用 p5.js，它是一个帮助我学习 JS 的非常小的项目，但我似乎无法获得实时更新的值以显示在 input() 或 changed() 上。控制台说它不是一个函数，即使它们在相同的范围内运行没有问题。

如果有人有任何想法，我已经坚持了一段时间并观看了许多教程，但似乎没有一个解决如何处理多个滑块元素的问题。

解决方法

您可以创建一个函数来创建更新对象中值的滑块。

function randomNumber(min,max) { 
  return Math.random() * (max - min) + min;
}

let vars = {};

function addSlider(variable,min,max,val,step,text) {
  let slider = createSlider(min,step);
  let label = createSpan(text.replace("#",val.toFixed(2)));
  createElement("br");
  
  let onInput = () => {
    vars[variable] = slider.value();
    label.html(text.replace("#",slider.value().toFixed(2)));
    background(245);
    stroke(vars.r,vars.g,vars.z,vars.o); 
  };
  
  slider.input(onInput);
  
  vars[variable] = val;
}


// UI set up
function setup() {
  addSlider("r",255,randomNumber(0,255),0.01,"Red = #");
  addSlider("g","Green = #");
  addSlider("z","Blue = #");
  addSlider("o",100,50,"Opacity = #")
  addSlider("a",-3,3,randomNumber(-3,3),0.1,"#");
  addSlider("b","#");
  addSlider("c","#");
  addSlider("d","#");

  createCanvas(1000,1000);
  stroke(vars.r,vars.o);
  pixelDensity(1); 
}

// Attractor sketching
let x = 1,y = 1;

function draw() {
  for(let i = 0; i < 1000; i++) {
    let oldX = x;
    let oldY = y;
    x = sin(vars.a * oldY) - cos(vars.b * oldX);
    y = sin(vars.c * oldX) - cos(vars.d * oldY);
    let scaledX = map(x,-2,2,width);
    let scaledY = map(y,height);
    point(scaledX,scaledY);
  }
}