P5.JS: Saving generative art (using noise()) as images on device and reuploading them on HTML

I'm working on generative art using p5.js and the noise() function. I have followed Daniel Shiffman's tutorials, but his final product always ends up being in constant generation, like an everlasting animation.

On my end, I'd like to save these auto-generated canvases as images on my device. I guess there'll be problems in my idea because these shapes are generated in time, and wanting them as still images would deny them their generation process?

To be more precise: without counting the database side of this project on which I'll eventually work (My guess is that the program should first create these 6 shapes and save them as images and then upload them again on the html page), I'd like an html page to have 6 different images of auto-generated shapes.

My code:

var inc;



function setup() {
  createCanvas(800, 800);
  background(0);
  noFill();
  t = 0;
}

function draw() {
  var r = 255 * noise(t+10);
  var g = 255 * noise(t+15);
  var b = 255 * noise(t+20);
  stroke(r,g,b, 18);
  strokeWeight(2);
  fill(r,g,b,5);
  var x1 = width * noise(t);
  var x2 = width * noise(t+1);
  var x3 = width * noise(t+2);
  var x4 = width * noise(t+3);
  var y1 = height * noise(t+4);
  var y2 = height * noise(t+5);
  var y3 = height * noise(t+6);
  var y4 = height * noise(t+7);

  quad(x1,y1,x2,y2,x3,y3,x4,y4);
  t += 0.01;


  //noLoop();
}

You could simply right-click the canvas and save what's currently displayed as an image.

Or you could use one of the save*() functions in the reference. The save() function or the saveCanvas() functions would be a good place to start. The saveFrames() function can save short animations.

Or you could look into using a library like ccapture.js or a tool like ScreenToGif if you want to store an animated file.

You might also consider simply drawing an unanimated canvas. Hard-code the values you want, and then use instance mode to show multiple static sketches.

Which approach you take depends entirely on how you want your program to behave. I'd recommend trying a few different approaches out and seeing which one you like the best.