p5.js - updating slider value's in real time for multiple sliders

I have a project that has multiple sliders to adjust the little sketch pattern. I made a button initially to update their values after changes have been made but I want to get it to run live with the changes.

Here is my latest attempt at displaying the values; (its SUPER messy as i've tried nearly 20+ different ways (i use let and const normally but p5.js hasnt been updated in a while so i thought it may effect it), once i can get something that works I want to go back and include iteration's and looping to lighten it up)(also kind of a newb programmer here)

 let a = randomNumber(-3, 3), b = randomNumber(-3, 3), c = randomNumber(-3, 3), d = randomNumber(-3, 3), r = randomNumber(0, 255), g = randomNumber(0, 255), z = randomNumber(0, 255), o = 50;

function randomNumber(min, max) { 
  return Math.random() * (max - min) + min;
} 


var  aSlider, bSlider, cSlider, dSlider, rSlider, gSlider, zSlider, oSlider;
var  sliders = new Array(aSlider, bSlider, cSlider, dSlider, rSlider, gSlider, zSlider, oSlider);
var  aLabel, bLabel, cLabel, dLabel, rLabel, gLabel, zLabel, oLabel;
var labels = new Array(aLabel, bLabel, cLabel, dLabel, rLabel, gLabel, zLabel, oLabel);
var x=1, y=1;
// let each_Slider = aSlider, bSlider, cSlider, dSlider, rSlider, gSlider, zSlider, oSlider;
let slider_Value = new Array(a.toFixed(2), b.toFixed(2), c.toFixed(2), d.toFixed(2), r.toFixed(0), g.toFixed(0), z.toFixed(0), o.toFixed(0));




// UI set up


function setup() {
  const rSlider = createSlider(0,255,r, 0.01);
  const rLabel = createElement('h3', "Red = " + slider_Value[4]);
  const gSlider = createSlider(0,255,g, 0.01);  
  const gLabel = createElement('h3', "Green = " + slider_Value[5]);
  const zSlider = createSlider(0,255,z, 0.01); 
  const zLabel = createElement('h3', "Blue = " + slider_Value[6]); 
  const oSlider = createSlider(0,100,o, 0.01);  
  const oLabel = createElement('h3', "Opacity = " + slider_Value[7]);
  const aSlider = createSlider(-3,3,a, 0.1);  
  const aLabel = createElement('h3', slider_Value[0]);
  const bSlider = createSlider(-3,3,b,0.1);  
  const bLabel = createElement('h3', slider_Value[1]);
  const cSlider = createSlider(-3,3,c,0.1); 
  const cLabel = createElement('h3', slider_Value[2]); 
  const dSlider = createSlider(-3,3,d,0.1);
  const dLabel = createElement('h3', slider_Value[3]);
  var myButton = createButton("Redraw")
  myButton.mousePressed(function() {
    a = aSlider.value();
    b = bSlider.value();
    c = cSlider.value();
    d = dSlider.value();
    r = rSlider.value();
    g = gSlider.value();
    z = zSlider.value();
    o = oSlider.value();
    background(245);
    stroke(r, g, z, o); 
  })
  slider_Value;
  createCanvas(1000, 1000);
  stroke(r, g, z, o);
  pixelDensity(1); 
}

// Attractor sketching

function draw() {
  for(var i = 0; i < 1000; i++) {
    var oldX = x;
    var oldY = y;
    x = sin(a * oldY) - cos(b * oldX);
    y = sin(c * oldX) - cos(d * oldY);
    var scaledX = map(x, -2, 2, 0, width);
    var scaledY = map(y, -2, 2, 0, height);
    point(scaledX, scaledY);
  }

}

I've been struggling with p5.js for the last little while, its a really small project to help me learn JS but I cant seem to get a live updated value to appear on input() or changed(). Console says that it's not a function even though they have run in the same scope without issue.

If anyone has any ideas I've been stuck for a while and watched many tutorials but none seem to address what to do for multiple slider elements.

from Recent Questions - Stack Overflow https://ift.tt/3A0pMdG
https://ift.tt/eA8V8J