p5.js

Question

我有一个项目有多个滑块来调整小草图图案。我最初制作了一个按钮，以便在进行更改后更新它们的值，但我想让它运行与更改一起使用。

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

 let a = randomNumber(-3, 3), b = randomNumber(-3, 3), c = randomNumber(-3, 3), d = randomNumber(-3, 3), r = randomNumber(0, 255), g = randomNumber(0, 255), z = randomNumber(0, 255), 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, bSlider, cSlider, dSlider, rSlider, gSlider, zSlider, oSlider);
var  aLabel, bLabel, cLabel, dLabel, rLabel, gLabel, zLabel, oLabel;
var labels = new Array(aLabel, bLabel, cLabel, dLabel, rLabel, gLabel, zLabel, oLabel);
var x=1, y=1;
// let each_Slider = aSlider, bSlider, cSlider, dSlider, rSlider, gSlider, zSlider, 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,255,g, 0.01);  
  const gLabel = createElement('h3', "Green = " + slider_Value[5]);
  const zSlider = createSlider(0,255,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,3,b,0.1);  
  const bLabel = createElement('h3', slider_Value[1]);
  const cSlider = createSlider(-3,3,c,0.1); 
  const cLabel = createElement('h3', slider_Value[2]); 
  const dSlider = createSlider(-3,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, g, z, o); 
  })
  slider_Value;
  createCanvas(1000, 1000);
  stroke(r, g, z, 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, 0, width);
    var scaledY = map(y, -2, 2, 0, height);
    point(scaledX, scaledY);
  }

}

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

如果有人有任何想法，我已经被困了一段时间并看了很多教程，但 none 似乎解决了如何处理多个滑块元素。

Answer 1

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

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

let vars = {};

function addSlider(variable, min, max, val, step, text) {
  let slider = createSlider(min, max, val, 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", 0, 255, randomNumber(0, 255), 0.01, "Red = #");
  addSlider("g", 0, 255, randomNumber(0, 255), 0.01, "Green = #");
  addSlider("z", 0, 255, randomNumber(0, 255), 0.01, "Blue = #");
  addSlider("o", 0, 100, 50, 0.01, "Opacity = #")
  addSlider("a", -3, 3, randomNumber(-3, 3), 0.1, "#");
  addSlider("b", -3, 3, randomNumber(-3, 3), 0.1, "#");
  addSlider("c", -3, 3, randomNumber(-3, 3), 0.1, "#");
  addSlider("d", -3, 3, randomNumber(-3, 3), 0.1, "#");

  createCanvas(1000, 1000);
  stroke(vars.r, vars.g, vars.z, 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, 0, width);
    let scaledY = map(y, -2, 2, 0, height);
    point(scaledX, scaledY);
  }
}

p5.js - 实时更新多个滑块的滑块值

p5.js - updating slider value's in real time for multiple sliders

javascript

slider