Animated Sequence

HTML

CSS

JS

let numbers = [];
let count = 1;
let sequence = [];
let index = 0;
let newTickEveryMS = 1000;
let oldTickTime = Date.now();
let currStep;
let scl = 0;
let arcs = [];
let biggest = 0;
class Arc {
  constructor(start, end, dir) {
    this.start = start;
    this.end = end;
    this.dir = dir;
  }
  show() {
    let diameter = abs(this.end - this.start);
    let x = (this.end + this.start) / 2;
    stroke(255);
    strokeWeight(0.5);
    noFill();
    if (this.dir == 0) {
      arc(x, 0, diameter, diameter, PI, 0);
    } else {
      arc(x, 0, diameter, diameter, 0, PI);
    }
  }
  showPartial() {
    stroke(255);
    strokeWeight(0.5);
    noFill();
    let diameter = abs(this.end - this.start);
    let x = (this.end + this.start) / 2;
    if (this.dir == 0) {
      if (this.end < this.start) {
        drawLeftTop(x, 0, diameter, currStep);
      } else {
        drawRightTop(x, 0, diameter, currStep);
      }
    } else {
      if (this.end < this.start) {
        drawLeftBottom(x, 0, diameter, currStep);
      } else {
        drawRightBottom(x, 0, diameter, currStep);
      }
    }
  }
}
function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(30);
  background(0);
  numbers[index] = true;
  sequence.push(index);
}
function step() {
  let next = index - count;
  if (next < 0 || numbers[next]) {
    next = index + count;
  }
  numbers[next] = true;
  sequence.push(next);
  let a = new Arc(index, next, count % 2);
  arcs.push(a);
  index = next;
  if (index > biggest) {
    biggest = index;
  }
  count++;
}
function draw() {
  if (oldTickTime < Date.now()) {
    step();
    oldTickTime = Date.now() + newTickEveryMS;
    start = Date.now();
    end = start + newTickEveryMS;
  }
  currStep = map(end - Date.now(), newTickEveryMS, 0, 0.1, PI);
  translate(0, height / 2);
  scl = lerp(scl, width / (biggest * 1.1), 0.1);
  scale(scl);
  background(0);
  for (let i = 0; i < arcs.length - 1; i++) {
    arcs[i].show();
  }
  arcs[arcs.length - 1].showPartial();
}
function drawRightBottom(x, y, diameter, currStep) {
  arc(x, y, diameter, diameter, PI - currStep, PI);
}
function drawRightTop(x, y, diameter, currStep) {
  arc(x, y, diameter, diameter, PI, currStep - PI);
}
function drawLeftBottom(x, y, diameter, currStep) {
  arc(x, y, diameter, diameter, 0, currStep);
}
function drawLeftTop(x, y, diameter, currStep) {
  arc(x, y, diameter, diameter, 0 - currStep, 0);
}

Ad #1

Ad #2