Looping an entire p5js script

Question

I was wondering if it is possible to run the following code on the p5js web editor or within VS code multiple times and change the parameters a, b, A, B, H from an array of predefined values every time it runs and save the PNG image locally. My aim is to let the script run and generate a wide range of plots with these parameters varying. This is a simplified version of my problem so running the loop within the draw loop is not possible. Is there a way to loop the entire script? Many thanks in advance.

//fixed
Sb = 0.3;
Vb = 1;
// noprotect

t = 0;
dt = 0.1 / 2;
t2=0

//want to vary
a = 0.03;
b = 0.04;
A = 20;
B = 20;
H = 0.15;

function setup() {
  createCanvas(1000, 1000, WEBGL);
  colorMode(HSB, 1);

  console.log(width);
  background(H, Sb, Vb);
}

function draw() {
  
  for (i = 0; t < 200 * TAU; i++) {
    W = A * sin(a * t) * B * sin(b * t );
   
  
    strokeWeight(2);
    point(t-width/2,W)

    

    t += dt;
  }
 saveCanvas(join(['Im', 1], '_'), 'png')
  noLoop()
  
}

Answer 1

You don't need to loop the whole script, do something like this:

function setup(){

  createCanvas(1000, 1000, WEBGL);
  colorMode(HSB, 1);

  background("white");
  
  iteration(0.03,0.04,20,20,0.15);
  
}

function iteration(a, b, A, B, H){

  const Sb = 0.3;
  const Vb = 1;
  let t = 0;
  const dt = 0.1 / 2;
  const t2 = 0

  background(H, Sb, Vb);

  for (let i = 0; t < 200 * TAU; i++) {
    W = A * sin(a * t) * B * sin(b * t );

    strokeWeight(2);
    point(t-width/2,W)

    t += dt;
  }
  saveCanvas(join(['Im', 1], '_'), 'png');
}