0
337
ViewsP5.JS & HTML - How to use p5 sliders in HTML to layout them
to showcase my idea, here is an image of my program.
On the right you can see two columns with multiple rows of sliders. Since I'm new to p5 I've unfortunately created them in p5 through (createSlider, createCheckbox,...). My goal is to just simply writing them in multiple lines of html code for easier positioning. In the end, I wanna have a container which I can scale according to the screenHeight.
I was wondering if there is an option to refer to my js variables in html.
Here's a small overview of my bad code:
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);
I hope I made my point clear enough, and really hope for some help. It's for a university project, and it's my first time doing such a "big" programming.
Thanks Max
2 answers
Answer question0
The answer to your question "is [there] an option to refer to my js variables in html" is, in short, no. In order to have HTML elements automatically updated with values from JavaScript variables you either need to use a front end framework like ReactJS or Angular that would facilitate that via templating and data binding, or you need custom JavaScript that updates the HMTL elements.
Given your description of what you want: to declare your HTML elements as HTML rather than create them via p5.js functions; and the implicit requirement that you need to access and update these from JavaScript; I would suggest you look at the select() function in p5.js. This will allow you to get a p5.Element reference to each of your HTML elements based on their id attribute (via select('#your-slider-id')) at which point the rest of your code, that uses the values of these inputs or subscribes to change events, can remain the same.
Example:
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
The solution is to use HTML sliders and then connect them to JavaScript.
HTML slider with minimum input 1, maximum input 100, and start value 50 in a container:
<div id="sliderContainer" >
<input type="range" min="1" max="100" value="50" id="slider">
</div>
And then add JavaScript in script tags:
<script>
let slider = document.getElementById("slider");
let header = document.getElementById("demo");
slider.oninput = function() {
header.innerHTML = slider.value;
}
</script>
Put it all together:
<!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>
If you have any questions on how to add p5.js to this, let me know and I will create an example project for you to download and toy around with. Don't be afraid to ask! :)
Sources: W3Schools HTML Sliders