Send Value to slider in the index.html from p5sketch?

p5.js Coding Questions
1

Hi All-

I have a slightly complex index.html page with additional js that allows the user to switch between different sketches. In each sketch I have coded 2 sliders that live in the index outside of the canvas. The idea is that in each sketch there are 2 variables assigned to those sliders so that no matter what the user can adjust 2 parameters of the sketch.

My issue is that i dont always want to start the sliders at value 0. the range is 0-100 and i map another variable from whatever i want the range to be to 0-100. Lets say in the example below my range is 10-200 that is mapped to 0-100 as you can see. When the sketch is launched i want to set the value to lets say 70. I have looked at value(); and it doesnt seem right. I am able to get the value no problem as you can see in my code, what am i missing to set the value? Something I should do in setup. Let me know! Thanks!

function p5Sketch01() {

    let t = 0;
    var sketchSlider01 = 0, sketchSlider01map;
    var sketchSlider02 = 0, sketchSlider02map;

    p5Master = new p5(function (p) {
        p.setup = function () {
            var p5Cnv = p.createCanvas(WIDTH, HEIGHT, p.P2D);
            p5Cnv.parent("p5-canvas-container");
            p5Cnv.id("p5-canvas");
            var canvasElement = document.getElementById("p5-canvas");
            canvasElement.style.width = "426px";
            canvasElement.style.height = "240px";
            audioContext = p.getAudioContext();
        };
        p.draw = function () {
            //sliders
            sketchSlider01 = document.getElementById("sketchSlider1").value;
            sketchSlider01map = p.map(sketchSlider01, 0, 100, 10, 200);
            sketchSlider02 = document.getElementById("sketchSlider2").value;
            sketchSlider02map = p.map(sketchSlider02, 0, 100, .05, .6);
            //console.log(sketchSlider02map);
            var bgColor = document.getElementById("p5-bg-color").value;
            var strokeColor = document.getElementById("p5-stroke-color").value;
            p.background("#" + bgColor);
            p.translate(p.width/3,p.height/2);
            p.stroke("#" + strokeColor);
            p.strokeWeight(2);
            //loop for adding 70 lines
            for(let i = 0;i<sketchSlider01map;i++){
                p.line(x1(t+i),y1(t+i),x2(t+i)+20,y2(t+i)+20);
            }
            t+=sketchSlider02map;

            // function to change initial x co-ordinate of the line
            function x1(t){
                return p.sin(t/10)*125+p.sin(t/20)*125+p.sin(t/30)*125;
            }
        
            // function to change initial y co-ordinate of the line
            function y1(t){
                return p.cos(t/10)*125+p.cos(t/20)*125+p.cos(t/30)*125;
            }
        
            // function to change final x co-ordinate of the line
            function x2(t){
                return p.sin(t/15)*125+p.sin(t/25)*125+p.sin(t/35)*125;
            }
        
            // function to change final y co-ordinate of the line
            function y2(t){
                return p.cos(t/15)*125+p.cos(t/25)*125+p.cos(t/35)*125;
            }
        };
    });
}


<!-- Tips:
Format your code with </>
Homework policy: https://discourse.processing.org/t/faq-guidelines/5#homework
Asking Questions: https://discourse.processing.org/t/guidelines-asking-questions/2147
-->

HTML snippet:

<div>
            <label>Sketch Slider 1</label>
            <input id="sketchSlider1" type="range" min=0 max=100 value=0 />
            <br>
            <label>Sketch Slider 2</label>
            <input id="sketchSlider2" type="range" min=0 max=100 value=0 />
        </div>
2

You can set the value in setup() …

document.getElementById("sketchSlider1").value = "70";

1 Like
3

Lol well that was easy! I had a feeling it was something like that, will try that now thanks so much!

1 Like