p5.js | función createSlider()

La función createSlider() en p5.js se usa para crear un elemento deslizante (entrada) en el DOM (Modelo de objetos de documento). Esta función incluye la biblioteca p5.dom. Agregue la siguiente sintaxis en la sección principal.

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js">
</script>

Sintaxis:

createSlider( min, max, value, step )

Parámetros: esta función acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:

• min: Mantiene el valor mínimo del control deslizante.
• max: Mantiene el valor máximo del control deslizante.
• valor: contiene el valor predeterminado del control deslizante.
• paso: Mantiene el tamaño de paso del control deslizante.

Los siguientes programas ilustran la función createSlider() en p5.js:

Ejemplo: Este ejemplo usa la función createSlider() para cambiar el valor r del color de fondo (en formato rgb) usando un control deslizante.

// Create a variable for the slider object
var color_slider;
  
function setup() {
    
    // Create a canvas of given size
    createCanvas(600, 300);
      
    // Create the slider
    color_slider = createSlider(0, 255, 125);
      
    // Set the position of slider on the canvas
    color_slider.position(150, 200);
}
  
function draw() {
    
    // Get the value of the slider
    // using .value() function
    col = color_slider.value();
      
    // Set the value of the background-color
    background(col, 200, 100);
}                    

Producción:

Referencia: https://p5js.org/reference/#/p5/createSlider