Random arcs on a grid interactive

let cols = 20;

let rows = 20;

var r;

var cellW, cellH;

var colors = ["#65F0B6","#F0664D", "#F0DF59", "#4DF0AC", "#937DF0"];

var corner, acrLen;

var cells = [];

var q=0, h=0, c=0, tf=0;

​

function setup() {

  createCanvas(windowHeight, windowHeight, SVG);

  r = width/cols;

  cellW = width/cols;

  cellH = height/rows;

  corner = [PI + PI/2 , 2*PI, 2*PI + PI/2, PI];

  arcLen = [HALF_PI, PI, PI + HALF_PI, 2*PI]

  background("#44396E");

  frameRate(6)

​

  for(var i=0; i<cols; i++){

    line(i*cellW, 0, i*cellW, height);

    for(var j=0; j<rows; j++){

      line(0, j*cellH, width, j*cellH);

      cells.push(new arcs( i*cellW + cellW/2, j*cellH + cellH/2));

    }

  }

  //console.log("quarters: ", q);

  //console.log("Half: ", h);

  //console.log("Three fourths: ", tf);

  //console.log("Circles: ", c);

  //console.log("total: ", cells.length);

  noStroke();

}

​

function draw() {

  background("#44396E");

    stroke(25);

  strokeWeight(0.09);

  for(var i=0; i<cols; i++){

    line(i*cellW, 0, i*cellW, height);

    line(0, i*cellH, width, i*cellH);

​

  }

​

  for(var i=0; i<cells.length; i++){

    cells[i].draw();    

  }

  //save("arcs1.svg");

}

​

function mousePressed(){

  var x, y;

  x = Math.floor(mouseX/cellW);

  y= Math.floor(mouseY/cellH);

  //console.log(x,y);

  cells[x*rows + y].turn();

}

​

class arcs{

  constructor(x, y){

    this.x = x;

    this.y =y;

    this.angle = random(corner);

    this.color = random(colors);

    this.counter = 0;

    this.arcL = HALF_PI;

    var rndom = random(20);

    if(rndom < 13){ this.arcL = arcLen[0]; q++;}

    else if(rndom < 18){ this.arcL = arcLen[1]; h++}

    else if(rndom < 19.5){ this.arcL = arcLen[2]; tf++}

    else{ this.arcL = arcLen[3]; c++}

  }

  draw(){

      push();

      translate(this.x, this.y);

      rotate(this.angle);

      noFill();

      stroke(this.color);

      strokeWeight(4);

      arc(0, 0, r, r, 0, this.arcL, OPEN);

      pop();

      //this.randomTurn();

  }

  randomTurn(){

    var rand = random(100);

    if(rand<=0.1) this.turn();

  }

  turn(){

    this.angle = this.angle + PI/2;

  }

}