p5.js | createSlider()函数

createSlider() 函数是 p5.js 中的一个可视化组件，它允许我们创建一个滑块来调整数值。在本文中，我们将介绍 createSlider() 函数的用法以及一些常见的参数。

语法

createSlider(min, max, [defaultValue], [step])

参数

• min：滑块的最小值。
• max：滑块的最大值。
• defaultValue：滑块的默认值。默认为最小值和最大值的中间值。
• step：每次更改值时的步长。默认步长为 1。

示例

下面是一个简单的示例，演示了如何使用 createSlider() 函数创建一个滑块，并将其值作为背景颜色。

let slider;

function setup() {
  createCanvas(400, 400);
  slider = createSlider(0, 255, 100);
  slider.position(10, 10);
  slider.style("width", "80px");
}

function draw() {
  background(slider.value());
}

在 setup() 函数中，我们创建了一个宽度为 80px 的滑块，并将其位置设置为画布的左上角。在 draw() 函数中，我们使用滑块的值来设置画布的背景颜色。

属性

createSlider() 函数返回一个 p5.js 对象，它包含以下属性：

• value()：获取或设置滑块的值。
• position(x, y)：设置滑块的位置。
• style(name, value)：设置滑块的样式。

let slider;

function setup() {
  createCanvas(400, 400);
  slider = createSlider(0, 255, 100);
  slider.position(10, 10);
  slider.style("width", "80px");
  console.log(slider.value());
}

function draw() {
  background(slider.value());
}

在本例中，我们使用 console.log() 打印出滑块的值。

总结

createSlider() 函数是 p5.js 中的一个可视化组件，它允许我们创建一个滑块来调整数值。我们可以使用它的属性来获取或设置滑块的值，以及设置滑块的位置和样式。