let groupOfBloodFor = [];

let groupOfBloodBack =[];

let counter = 0;

​

function setup() {

  createCanvas(400, 400);

  colorMode(HSB);

  /*

    for(let i = 0; i < 300; i++){

    groupOfVeins.push(new veins(i));

  }

  for(let j = 0; j < 300; j++){

    //do the setup for the veins and create the blood cells based on it

    groupOfVeins[j].create();

    groupOfBloodFor.push(new blood(groupOfVeins[j].paramArray, true));

    groupOfBloodBack.push(new blood(groupOfVeins[j].paramArray, false));

    groupOfVeins[j].display();

    groupOfBloodFor[j].display();

    groupOfBloodBack[j].display();

  }

  */

}

​

function draw() {

  background(0);

  if(frameCount % 75 == 0){

    if(counter < 300){

      initialize();

    }

    else{

      counter = -1;

      resetCanvas();

    }

    counter++

  }

  for(let i = 0; i < counter; i++){

    groupOfVeins[i].display();

    groupOfBloodFor[i].display();

    groupOfBloodBack[i].display();

  }

}

​

function initialize(){

  groupOfVeins.push(new veins(counter));

  groupOfVeins[counter].create();

  groupOfBloodFor.push(new blood(groupOfVeins[counter].paramArray, true));

  groupOfBloodBack.push(new blood(groupOfVeins[counter].paramArray, false));

}

​

function resetCanvas(){

  groupOfVeins = [];

  groupOfBloodFor = [];

  groupOfBloodBack =[];

}

​

​

class veins{

  constructor(num){

    //this array is the key to this whole program. It stores the individual vein line parameters so in display function, the each different lines can form one vein

    this.paramArray = [];

    this.initPos = int(random(50,350));

    this.posVar = 0;

    this.colorRange = [0,120,240];

    //side variable is to determine whether the vein will be from left to right or from top to down

    this.side = num;

  }

  create(){

    //counter is for the vein to make horizontal and vertical lines

    let counter = 0;

    let color;

    //Separating the left to right veins and top to bottom veins

    if(this.side % 2 == 0){

      //continues to form the vein only within the canvas

      while(this.posVar < 400){

        //separates the formulation of horizontal and vertical lines: if counter % 2 == 0, the line will be horizontal, else, the line will be vertical

        if(counter % 2 == 0){

          //storing of initial x value before adding changes and then adding changes

          let tempPosVar = this.posVar;

          this.posVar += (int(random(1,5)) * 10);

          color = this.colorRange[int(random(0,3))];

          this.paramArray.push([tempPosVar,this.initPos, this.posVar, this.initPos, color]);

        }

        else{

          let tempInitPos = this.initPos;

          this.initPos += (int(random(-4,4)) * 10);

          //in case random initPos is 0, to prevent incosistent vein

          if (this.initPos == tempInitPos)

            this.initPos -= 10;

          //push the 5 parameters in the array

          this.paramArray.push([this.posVar, tempInitPos, this.posVar, this.initPos, color]);

        }

        counter++;

      }

    }

    //Same process but for up to down veins

    else{

      while(this.posVar < 400){

        if(counter % 2 == 0){

          let tempPosVar = this.posVar;

          this.posVar += (int(random(1,5)) * 10);

          color = this.colorRange[int(random(0,3))];

          this.paramArray.push([this.initPos, tempPosVar, this.initPos, this.posVar, color]);

        }

        else{

          let tempInitPos = this.initPos;

          this.initPos += (int(random(-4,4)) * 10);

          if (this.initPos == tempInitPos)

            this.initPos -= 10;

          this.paramArray.push([tempInitPos, this.posVar, this.initPos, this.posVar, color]);

        }

        counter++;

      }

    }

  }

  display(){

    //draws the line on canvas based on the line parameter array data

    for(let i = 0; i < this.paramArray.length; i++){

      stroke(this.paramArray[i][4], 100, 70);

      strokeWeight(2);

      line(this.paramArray[i][0], this.paramArray[i][1], this.paramArray[i][2], this.paramArray[i][3]);

    }

  }

}

​

//This is for the cells moving along the veins

class blood{

  //Takes two arguments: one for the vein path the cell is moving on, the other for the direction of the cell

  constructor(veinArr, dir){

    this.veinRoute = veinArr;

    //Variable for internal check on whether the cell had reached the end of the current line of the vein

    this.lineNum;

    //If the direction is true, the cell will be moving forward, else, the cell would be moving backward

    this.direction = dir

    if(this.direction == true){

      //Cell is positioned in the beginning of the vein

      this.lineNum = 0;

      this.x = this.veinRoute[this.lineNum][0];

      this.y = this.veinRoute[this.lineNum][1];

    }

    else{

      //Cell is positioned in the end of the vein

      this.lineNum = this.veinRoute.length - 1;

      this.x = this.veinRoute[this.lineNum][2];

      this.y = this.veinRoute[this.lineNum][3];

    }

  }

  display(){

    //display part for forward moving cells

    if(this.direction == true){

      if(this.lineNum < this.veinRoute.length){

        //the actual printing of the cell 

        strokeWeight(0);

        fill(60, 100, 100);

        circle(this.x, this.y, 4);

        //The cell movement mechanism: the cell position variable will move towards the end of the current line it is on the vein

        //For x position

        if(this.x != this.veinRoute[this.lineNum][2]){

          if(this.x < this.veinRoute[this.lineNum][2])

            this.x++;

          if(this.x > this.veinRoute[this.lineNum][2])

            this.x--;

        }

        //For y position

        else if(this.y != this.veinRoute[this.lineNum][3]){

          if(this.y < this.veinRoute[this.lineNum][3])

            this.y++;

          if(this.y > this.veinRoute[this.lineNum][3])

            this.y--;

        }

        //If the cell is on the end of the line, move on to the next line of the vein

        else

          this.lineNum++;

      }

      //If the cell had reached the end of the vein, reset to the beginning of the vein

      else{

        this.x = this.veinRoute[0][0];

        this.y = this.veinRoute[0][1];

        this.lineNum = 0;

      }

    }

    //Same process but for backward moving cells

    else{

      if(this.lineNum > 0){

        strokeWeight(0);

        fill(60, 100, 100);

        circle(this.x, this.y, 4);

        if(this.x != this.veinRoute[this.lineNum][0]){

          if(this.x < this.veinRoute[this.lineNum][0])

            this.x++;

          if(this.x > this.veinRoute[this.lineNum][0])

            this.x--;

        }

​

        else if(this.y != this.veinRoute[this.lineNum][1]){

          if(this.y < this.veinRoute[this.lineNum][1])

            this.y++;

          if(this.y > this.veinRoute[this.lineNum][1])

            this.y--;

        }

        else

          this.lineNum--;

      }

      else{

        this.lineNum = this.veinRoute.length - 1;

        this.x = this.veinRoute[this.lineNum][0];

        this.y = this.veinRoute[this.lineNum][1];

      }

    }

  }

}