count = 1,

    sequence = [],

    currentNumber = 0,

    arcs = [],

    biggest = currentNumber;

​

class Arc {

  constructor(start, end, direction) {

    this.start = start;

    this.end = end;

    this.direction = direction;

  }

  show() {

    stroke(233);

    noFill();

    arc((this.end + this.start) / 2, 0, abs(this.end - this.start), abs(this.end - this.start), (this.direction) ? 0 : PI, (this.direction) ? PI : 0);

  }

}

​

function setup() {

  createCanvas(960, 540);

  takenNumbers[currentNumber] = true;

  sequence.push(currentNumber);

}

​

function draw() {

  background(22);

  translate(0, height / 2);

  scale(width / biggest / map(mouseX, 0, width, 0.01, 1));

  let next = currentNumber - count;

  if (next < 0 || takenNumbers[next]) {

    next = currentNumber + count;

  }

  takenNumbers[next] = true;

  sequence.push(next);

  biggest = (next > biggest) ? next : biggest;

  arcs.push(new Arc(currentNumber, next, count % 2));

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

    arcs[i].show();

  }

  currentNumber = next;

  count++;

}

​