"bulk-sliders" : { 

 "colour-sliders": {

   "amount": 8, 

   "keyfmt" : "color-slider[i]",

   "base" : [0, 255, 100, 1],

  },

 "scaler-sliders": {

   "amount": 1000,

   "as-list": true,

   "base" : [-200, 200, 1, 0.1],

   "offsets" : [100, 100, 0, 0]

  }

 },

"general-sliders": {

  "amount" : [1, 100, 1, 1],

  "line-thickness": [0.1, 10, 1, 0.01]

 }

​

};

​

function setup() {

  // gives acces to some p5 functions

  let sliderMap = createCustomSlidersFromJson(json);

  print(sliderMap["color-slider0"])

  print(sliderMap["amount"])

}

​

function createCustomSlidersFromJson(json) {

    let sliderMap = {};

    let masterContainer = document.createElement('div');

    masterContainer.style.display = "flex";

    masterContainer.style.flexDirection = "column";

    document.body.appendChild(masterContainer);

​

    let generalContainer = createCollapsibleContainer("general-sliders");

    masterContainer.appendChild(generalContainer);

    for (let general in json["general-sliders"]) {

        let [min, max, start, step] = json["general-sliders"][general];

        createCustomSlider(generalContainer, general, min, max, start, step);

        sliderMap[general] = document.getElementById(general);

    }

    createMasterSlider(generalContainer, Object.values(sliderMap));

    for (let bulk in json["bulk-sliders"]) {

        let container = createCollapsibleContainer(bulk);

        masterContainer.appendChild(container);

​

        let amount = json["bulk-sliders"][bulk]["amount"];

        let base = json["bulk-sliders"][bulk]["base"];

        let offsets = json["bulk-sliders"][bulk]["offsets"] || [0, 0, 0, 0];

        let sliderList = [];

        for (let i = 0; i < amount; i++) {

            let keyfmt = json["bulk-sliders"][bulk]["keyfmt"] || (bulk + "_" + i);

            let sliderId = keyfmt.replace("[i]", i);

            let [baseMin, baseMax, baseStart, baseStep] = base;

            let [offsetMin, offsetMax, offsetStart, offsetStep] = offsets;

            createCustomSlider(container, sliderId, baseMin + offsetMin * i, baseMax + offsetMax * i, baseStart + offsetStart * i, baseStep + offsetStep * i);

          if (!json["bulk-sliders"][bulk]["as-list"]) {

                 sliderMap[sliderId] = document.getElementById(sliderId);

            } 

          // also used for the master slider 

            sliderList.push(document.getElementById(sliderId));

        }

        if (json["bulk-sliders"][bulk]["as-list"]) {

            sliderMap[bulk] = sliderList;

        }

​

        createMasterSlider(container, sliderList);

    }

​

​

​

    return sliderMap;

}

​

function createCustomSlider(container, sliderId, mini, maxi, start, step) {

    let sliderDiv = document.createElement('div');

    let label = document.createElement('label');

    label.htmlFor = sliderId;

    label.innerText = sliderId;

    sliderDiv.appendChild(label);

​

    let slider = document.createElement('input');

    slider.setAttribute("type", "range");

    slider.setAttribute("min", mini);

    slider.setAttribute("max", maxi);

    slider.setAttribute("value", start);

    slider.setAttribute("step", step);

    slider.setAttribute("id", sliderId);

​

    sliderDiv.appendChild(slider);

​

    let valueBox = document.createElement('span');

    valueBox.innerText = start.toFixed(2);

    sliderDiv.appendChild(valueBox);

    slider.addEventListener('input', function() {

      valueBox.innerText = Number(this.value).toFixed(2);

    });

​

    container.appendChild(sliderDiv);

}

​

​

function createCollapsibleContainer(labelText) {

    let container = document.createElement('div');

    container.style.maxHeight = '250px';

    container.style.overflow = 'auto';

    container.style.border = '1px solid #000';

    container.style.marginBottom = '10px';

    container.style.resize = 'both';

​

    let label = document.createElement('div');

    label.innerText = labelText;

    label.style.backgroundColor = '#DBFA7B96';

    label.style.cursor = 'pointer';

    label.onclick = () => {

      // collapse

        if (container.style.maxHeight !== '20px') {

            container.style.maxHeight = '20px';

        } else {

            container.style.maxHeight = '250px';

        }

    };

​

    container.appendChild(label);

    return container;

}

​

function createMasterSlider(container, sliders) {

    let masterId = container.children[0].innerText + "_master";

    createCustomSlider(container, masterId, 0, 100, 0, 1);

    let masterSlider = document.getElementById(masterId);

    masterSlider.addEventListener('input', function() {

        let masterVal  = Number(this.value);

        let masterMini =  Number(masterSlider.getAttribute("min"));

        let masterMaxi =  Number(masterSlider.getAttribute("max"));

​

        sliders.forEach(slider => {

            let mini =  Number(slider.getAttribute("min"));

            let maxi =  Number(slider.getAttribute("max"));

​

            let mappedValue = map(masterVal, masterMini, masterMaxi, mini, maxi);

            slider.value = mappedValue;

            slider.setAttribute("value", mappedValue);

​

            let valueBox = slider.parentElement.querySelector('span');

            valueBox.innerText = Number(mappedValue).toFixed(2);

        });

    });

​

    // move master slider to top

    container.insertBefore(masterSlider.parentElement, container.children[1]);

}

​

​

​

​

​

​