0
332
VistasP5.JS y HTML: cómo usar los controles deslizantes p5 en HTML para diseñarlos
para mostrar mi idea, aquí hay una imagen de mi programa.
A la derecha puede ver dos columnas con varias filas de controles deslizantes. Como soy nuevo en p5, lamentablemente los he creado en p5 a través de (createSlider, createCheckbox,...). Mi objetivo es simplemente escribirlos en varias líneas de código html para un posicionamiento más fácil. Al final, quiero tener un contenedor que pueda escalar de acuerdo con screenHeight.
Me preguntaba si hay una opción para hacer referencia a mis variables js en html.
Aquí hay una pequeña descripción general de mi código incorrecto:
checkStroke = createCheckbox('Enable Stroke', true) checkStroke.position(sliderSecondCol,sliderFirstRow+120) sliderStrokeAmount = createSlider(0,0.5,0.04,0.0001) sliderStrokeAmount.position(sliderFirstCol,sliderFirstRow+140) sliderStrokeHue = createSlider(0,360,200); sliderStrokeHue.position(sliderFirstCol,sliderFirstRow+160); sliderStrokeSat = createSlider(0,100,30); sliderStrokeSat.position(sliderFirstCol,sliderFirstRow+180); sliderStrokeBri = createSlider(0,100,100); sliderStrokeBri.position(sliderFirstCol,sliderFirstRow+200); sliderStrokeAlpha = createSlider(0,1,1,0.0001); sliderStrokeAlpha.position(sliderFirstCol,sliderFirstRow+220);Espero haber dejado mi punto lo suficientemente claro, y realmente espero alguna ayuda. Es para un proyecto universitario, y es la primera vez que hago una programación tan "grande".
gracias max
2 Respuestas
Responde la pregunta0
La respuesta a su pregunta "hay [hay] una opción para referirse a mis variables js en html" es, en resumen, no. Para que los elementos HTML se actualicen automáticamente con los valores de las variables de JavaScript, debe usar un marco frontal como ReactJS o Angular que facilitaría eso a través de plantillas y enlace de datos, o necesita JavaScript personalizado que actualice los elementos HMTL.
Dada su descripción de lo que desea: declarar sus elementos HTML como HTML en lugar de crearlos a través de funciones p5.js; y el requisito implícito de que necesita acceder y actualizar estos desde JavaScript; Le sugiero que mire la función select() en p5.js. Esto le permitirá obtener una referencia p5.Element para cada uno de sus elementos HTML en función de su atributo de id (a través select('#your-slider-id') ), en cuyo punto el resto de su código, que usa los valores de estas entradas o se suscribe a eventos de cambio, pueden permanecer igual.
Ejemplo:
let slider1; let slider2; function setup() { createCanvas(windowWidth, windowHeight); slider1 = select('#slider1'); slider2 = select('#slider2'); } function draw() { background(220); translate(width / 4, height / 2); ellipse(0, 0, slider1.value(), slider2.value()); } html, body { margin: 0; padding: 0; overflow: hidden; } #controls { position: absolute; top: 10px; right: 10px; padding: 20px; border: 2px solid gray; border-radius: 4px; display: grid; grid-template-columns: [sliders] auto 20px [labels] auto; } #controls input { grid-column: sliders; } #controls label { grid-column: labels; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <div id="controls"> <input id="slider1" type="range" min="1" max="100" value="50" /> <label for="slider1">Slider #1</label> <input id="slider2" type="range" min="1" max="100" value="50" /> <label for="slider2">Slider Two</label> </div>0
La solución es usar controles deslizantes HTML y luego conectarlos a JavaScript.
Control deslizante HTML con entrada mínima 1, entrada máxima 100 y valor inicial 50 en un contenedor:
<div id="sliderContainer" > <input type="range" min="1" max="100" value="50" id="slider"> </div>Y luego agregue JavaScript en las etiquetas de script:
<script> let slider = document.getElementById("slider"); let header = document.getElementById("demo"); slider.oninput = function() { header.innerHTML = slider.value; } </script>Ponlo todo junto:
<!DOCTYPE html> <html> <body> <h1 id="demo">50</h1> <div id="sliderContainer" > <input type="range" min="1" max="100" value="50" id="slider"> </div> <script> let slider = document.getElementById("slider"); let header = document.getElementById("demo"); slider.oninput = function() { header.innerHTML = slider.value; } </script> </body> </html>Si tiene alguna pregunta sobre cómo agregar p5.js a esto, hágamelo saber y crearé un proyecto de ejemplo para que lo descargue y juegue con él. ¡No tengas miedo de preguntar! :)