Plan

Trial #1

int[] x = {50, 150, 250}; // x points 
int[] y = {50, 150, 250, 350, 450, 550}; // y points 

//3 by 6 100 by 100 px grid
//random 7 points from the middle of each grid
//connect those 7 points to each other

void setup() { 
  
    //frameRate set in setup
    frameRate(10);
  
    size(300, 600); 
    background(255, 255, 245); 
    
    // grid 
    strokeWeight(1);
    for (int i = 0; i <= 600; i += 100) { 
      line(i, 0, i, 600);
      line(0, i, 300, i); 
    }

} 

void draw() {}

void mousePressed() {
 
    //reset drawing the background + grid
    background(255, 255, 245); 

    strokeWeight(1);
    for (int i = 0; i <= 600; i += 100) { 
      line(i, 0, i, 600);
      line(0, i, 300, i); 
    }

  //sets the stroke styling
    strokeWeight(27);
    strokeCap(SQUARE);
    strokeJoin(BEVEL);

  //for loop that repeats 7 times (so it can choose 7 random points) 
  //picks a random point from the array of x+y points set up above 
  
   beginShape();
   noFill();
    
   for (int i = 0; i < 4 ; i++){
      
   vertex(x[int(random(3))], y[int(random(6))]);
   vertex(x[int(random(3))], y[int(random(6))]);
        
    }
    
   endShape();

	// How to connect these point in a sequential manner?

}

Hind's demo

//3 by 6 100 by 100 px grid
//random 7 points from the middle of each grid
//connect those 7 points to each other

//main x + y positions (middle points of the grid)
float[] x = {50, 150, 250}; // x points 
float[] y = {50, 150, 250, 350, 450, 550}; // y points 

void setup() { 
  
    size(300, 600); 
    
    drawGrid();
   
    //sets up comp Array + fills it with all the postion information
    comp1();
    comp2();
  
} 

boolean random = false;
boolean compos1 = false;
boolean compos2 = false;

int randomSeedVal = 0;

void draw() {
  
  drawGrid();
  
  if (keyPressed) {
    
    //when r is pressed, random mode draws, other modes become false
    if(key == 'r'){
     random = true;
     compos1 = false;
     compos2 = false;
     
     //everytime you set the mode to random by clicking r, a new RandomSeed is chosen
     randomSeedVal = int(random(1000));
     
    }
    
    //when 1 is pressed, comp1 mode draws, other modes become false
    if(key == '1'){
     compos1 = true;
     compos2 = false;
     random = false;
    }
    
    //when 2 is pressed, comp2 mode draws, other modes become false
    if(key == '2'){
     compos2 = true;
     compos1 = false;
     random = false;
    }
    
    
  }
  
  //assign the randomSeedValue
  randomSeed(randomSeedVal);
  
  //sets the stroke styling
  strokeWeight(27);
  strokeCap(SQUARE);
  
  //if Random mode is true, draw random 7 points  
   if (random) {
 //for loop that repeats 7 times (so it can choose 7 random points) 
    //picks a random point from the array of x+y points set up above 
    for (int i = 0; i < 7 ; i++){
      
     line(x[int(random(3))], y[int(random(6))], 
          x[int(random(3))], y[int(random(6))]);
    }
 }
 
 //if compos1 mode is true, draw composition 1
 if(compos1){
      //for loop ends length of array -1, 
      //because we add 1 when we are drawing the second xy position of the line, 
      //to connect the first point with the next point
      for (int i = 0; i < comp1.length-1 ; i++){
          line(comp1[i].x,comp1[i].y,comp1[i+1].x,comp1[i+1].y);
      }
    }
    
  //if compos2 mode is true, draw composition 2   
 if(compos2){
  for (int i = 0; i < comp2.length-1 ; i++){
      line(comp2[i].x,comp2[i].y,comp2[i+1].x,comp2[i+1].y);
  }
}

}

//custom function to draw the grid 
void drawGrid(){
   //reset drawing the background + grid
    background(255, 255, 245); 

    strokeWeight(1);
    for (int i = 0; i <= 600; i += 100) { 
      line(i, 0, i, 600);
      line(0, i, 300, i); 
    }
}

PVector[] comp1 =  new PVector[7];

void comp1(){
  
  //intilizes a new PVector variable for each array index
  //*PVector is a datatype that can store two integars for position
    for (int i = 0; i < comp1.length ; i++){
       comp1[i] = new PVector();
    }
    
    //comp 1 - grid position index numbers / sequence based on Hassan's artwork
    // 1,0 > 0,2 > 2,0 > 1,2 > 2,1 > 2,3 > 2,5
    
    //first point
     comp1[0].x = x[1];
     comp1[0].y = y[0];
     
    //second point 
     comp1[1].x = x[0];
     comp1[1].y = y[2];
     
    //third point 
     comp1[2].x = x[2];
     comp1[2].y = y[0];
     
    //fourth point  
     comp1[3].x = x[1];
     comp1[3].y = y[2];
     
    //fifth point  
     comp1[4].x = x[2];
     comp1[4].y = y[1];
     
    //sixth point 
     comp1[5].x = x[2];
     comp1[5].y = y[3];
     
    //seventh point 
     comp1[6].x = x[2];
     comp1[6].y = y[5];
     
}

PVector[] comp2 =  new PVector[7];

void comp2(){
  
  //intilizes a new PVector variable for each array index
  //*PVector is a datatype that can store two integars for position
    for (int i = 0; i < comp2.length ; i++){
       comp2[i] = new PVector();
    }
    
    //comp 1 - grid position index numbers / sequence based on Hassan's artwork
    // 1,1 > 2,0 > 0,0 > 0,2 > 2,5 > 1,2 > 2,3
    
    //first point
     comp2[0].x = x[1];
     comp2[0].y = y[1];
     
    //second point 
     comp2[1].x = x[2];
     comp2[1].y = y[0];
     
    //third point 
     comp2[2].x = x[0];
     comp2[2].y = y[0];
     
    //fourth point  
     comp2[3].x = x[0];
     comp2[3].y = y[2];
     
    //fifth point  
     comp2[4].x = x[2];
     comp2[4].y = y[5];
     
    //sixth point 
     comp2[5].x = x[1];
     comp2[5].y = y[2];
     
    //seventh point 
     comp2[6].x = x[2];
     comp2[6].y = y[3];
     
}