sign = -1,

  denominator = 0;

let iterations = 0;

let history = [];

let minY = 2,

  maxY = 4;

​

function setup() {

  createCanvas(windowWidth - 2, 400);

  display();

}

​

function display() {

  div1 = createDiv(fraction).style('font-size', '40pt');

  div1.position(width / 7.5, height / 1.5);

  div1.style('color', 'white');

​

  div2 = createDiv(PI).style('font-size', '40pt');

  div2.position(width / 7, height / 1.2);

  div2.style('color', 'yellow');

}

​

function draw() {

  background(0);

  denominator = sign * (iterations * 2 + 3);

  fraction += 4.0 / denominator;

  history.push(fraction);

​

  stroke(255);

  noFill();

​

  let piY = map(PI, minY, maxY, height, 0);

  line(0, piY, width, piY);

​

  beginShape();

  let spacing = width / history.length;

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

    let x = i * spacing;

    let y = map(history[i], minY, maxY, height, 0);

    vertex(x, y);

  }

  endShape();

​

  sign *= -1;

  iterations++;

  div1.html(fraction);

}