let arcs = [];

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

  background(0);

  translate(width >> 1, height >> 1);

​

  for (let a of arcs) {

    a.show();

  }

}

​

function mousePressed() {

  if (mouseButton === RIGHT) {

    let a = new Arc(index, index + 100, 0);

    arcs.push(a);

  }

  if (mouseButton === LEFT) {

    let a = new Arc(index, index + 100, 1);

    arcs.push(a);

  }

}

class Arc {

  constructor(start, end, dir) {

    this.start = start;

    this.end = end;

    this.dir = dir;

  }

​

  show() {

    let diameter = this.end - this.start;

    let x = (this.end + this.start) / 2;

    let r = map(this.dir, 1, 0, 0, 255);

    let g = map(this.dir, 0, 1, 0, 255);

​

    stroke(r, g, 127);

    noFill();

    //strokeWeight(0.1);

    if (this.dir == 0) {

      arc(x, 0, diameter, diameter, PI, 0);

    } else {

      arc(x, 0, diameter, diameter, 0, PI);

    }

  }

}

​