I have to make a program integrated into html (i chose javascript/p5.js but i'm still new to it) that creates a 4x4 grid and draws like Armin Hoffman

So far, I've done research into the design by Armin Hoffman (rubber band design). The objective is to create a grid of circles which can be selected to change from white to black and connect these circles in a natural fluid shape that avoids white circles but never traps them. I've been using Codecademy to learn the basics while copying and studying examples on the p5.js website and additionally following The Coding Train on Youtube (specifically: 7.4 mouse interaction and 7.6 clicking on objects).

[Armin Hofmann's Design][1] [1]: https://ift.tt/UcDvVlk

Check @MauriceMeilleur on Twitter between Feb 2021 and Aug 2021

Also: https://discourse.processing.org/t/shape-generator-help-armin-hofmanns-rubber-band-shape-generator/33190

...

Anyway every time i try to make a matrix or array of x and y values stored and to be used in the for loop within the function draw/ function setup, it becomes invalid and it doesn't show the shapes i would like.

I know I'm missing info and I look like a total beginner, I apologize for any migraines i cause.

This is my latest trial:

class boundingBox {

  createBox() {
    stroke(0);
    strokeWeight(3);
    fill(255, 255, 255, 255);
    rect(100, 100, 700, 700);
  }
}

//___________________________________________________________
function Bubble(x, y, x1, y1, x2, y2, x3, y3) {
  // creating a distinction from x/y private and x/y public
  this.x = x;
  this.y = y;

  this.x1 = x1;
  this.y1 = y1;

  this.x2 = x2;
  this.y2 = y2;

  this.x3 = x3;
  this.y3 = y3;

  //this.x = x = [225,350,475,600];
  //this.y = y = [225,350,475,600];
  // creating color public for later use
  this.col = color(255);

  // this expression works to make a public function within a private function
  this.display = function() {
    stroke(0);
    fill(this.col);
    // creating the ability to display the circles within the parameters set
    //ellipse(this.x, this.y, 48,48);

    // in theory this should loop through the x array position values against all the y values in it's array creating multiple circles
    for (i=0; i<4; i++) {
      ellipse(this.x/*[i]*/, this.y, 100, 100);

      ellipse(this.x1, this.y1, 100, 100);

      ellipse(this.x2, this.y2, 100, 100);

      ellipse(this.x3, this.y3, 100, 100);
    }
  }

  //this.move = function() {
  //  //making the circles change position and act like they are moving within air
  //  this.x = this.x + random(-0.5, 0.5);
  //  this.y = this.y + random(-0.5, 0.5);

  //  this.x1 = this.x1 + random(-0.5, 0.5);
  //  this.y1 = this.y1 + random(-0.5, 0.5);

  //  //this.x = this.x + random(1, 0.5);
  //  //this.y = this.y + random(1, 0.5);
  //}

  // again expression to make function but this time implementing a clicking function
  this.clicked = function() {
    // calculating the distance from the circle center to help fill it with color and nothing else
    var d = dist(mouseX, mouseY, this.x, this.y)
      // diameter of the circle
      if (d < 50) {
      this.col = color(0, 0, 0)
    }
  }

  

  //joinBubbles(bubbles); {
  //  bubbles.forEach(element => {
  //    let dis = dist(this.x, this.y, element.x, element.y);
  //      stroke(200, 200, 200, 127);
  //      line(this.x, this.y, element.x, element.y);
  //  });
  //}
  
  
//}

//class lines {
//  constructor(){
//  this.x4 = x4;
//  this.y4 = y4;
//  this.x5 = x5;
//  this.y5 = y5;
//  }
  
//  this.displayLine = function(){
//    stroke(0)
//  }
  
}

let bubbles = [];
let boxii = [];

function setup() {
    
  createCanvas(1536,1250);
  
    for(let i = 0; i<1; i++){
    boxii.push(new boundingBox());
    }
  
    for (let i = 200; i < 860; i+=165) {
    //var x = random (width);
    var x = 200;
    var y = i;
    bubbles.push(new Bubble(x,y/*x1,y1*/));
    }
    
    for (let i = 200; i < 860; i+=165) {
    //var x = random (width);
    var x1 = 375;
    var y1 = i;
    bubbles.push(new Bubble(x1,y1/*x1,y1*/));
    }
    
        for (let i = 200; i < 860; i+=165) {
    //var x = random (width);
    var x2 = 550;
    var y2 = i;
    bubbles.push(new Bubble(x2,y2/*x1,y1*/));
    }
    
        for (let i = 200; i < 860; i+=165) {
    //var x = random (width);
    var x3 = 700;
    var y3 = i;
    bubbles.push(new Bubble(x3,y3/*x1,y1*/));
    }
    
    //for (let i = 0; i < 1; i++) {
    //var x1 = 400;
    //var y1 = 200;
    //bubbles.push(new Bubble(x1,y1));
    //}
    
    //for (let i = 200; i < 1000; i+=200){
    //var x2 = 200;
    //var y2 = i;
    //bubbles.push(new Bubble(x2,y2));
    //}
    
}

    function mousePressed(){
  // checking where the mouse presses so that clicking outside the circle does nothing
  for (let i = 0; i < bubbles.length; i++) {
    
  //for (let i = 0; i < 4; i++) {
  // using this function on all the circles and again using .this to bring properties from /bubble
  bubbles[i].clicked();
  }
  }

function draw() {    background(140);

  for(let i = 0; i<1; i++) {
    boxii[i].createBox();
  }

      for (let i = 0; i < bubbles.length; i++) {
    //bubbles[i].move();
    bubbles[i].display();
  }
  
  if (mousePressed) {
    for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].display(fill(0))
  }}

}