let prev;

const numOfDigits = 1000;

​

const colors = ["#FF0000", "#FF7E21", "#FBFF00", "#85FF2E", "#2BFFED", "#0AA5FF", "#365EFF", "#9421FF", "#FF26F8", "#FF0F47"];

​

function setup() {

  createCanvas(0.4 * numOfDigits, 0.4 * numOfDigits);

  strokeWeight(1);

  background(0);

  prev = createVector(0, 0);

}

​

function draw() {

  for (let i = 2; i < numOfDigits; i++) {

    let digit = pi.charAt(i);

    let curr = p5.Vector.fromAngle(radians(360 * digit / 10), 10);

    curr.add(prev);

    points.push({

      pos: curr,

      digit

    });

    prev = curr;

  }

​

  let upperLeft = createVector(0, 0);

  let lowerRight = createVector(0, 0);

​

  for (let p of points) {

    if (p.pos.x < upperLeft.x) upperLeft.x = p.pos.x;

    if (p.pos.y < upperLeft.y) upperLeft.y = p.pos.y;

    if (p.pos.x > lowerRight.x) lowerRight.x = p.pos.x;

    if (p.pos.y > lowerRight.y) lowerRight.y = p.pos.y;

  }

​

  let translation = createVector(0.5 * width - (lowerRight.x + upperLeft.x) / 2, 0.5 * height - (lowerRight.y + upperLeft.y) / 2);

​

  let scalar = Math.max((lowerRight.x - upperLeft.x) / width, (lowerRight.y - upperLeft.y) / height);

​

  let midpoint = createVector(width / 2, height / 2);

  points = points.map(p => {

    p.pos.add(translation);

    p.pos.sub(midpoint);

    p.pos.mult(0.85 / scalar);

    p.pos.add(midpoint);

    return p;

  });

​

  for (let i = 0; i < points.length-1; i++) {

    let digit = points[i].digit;

    let c = color(colors[digit]);

    c.setAlpha(220)

    stroke(c);

​

    line(points[i].pos.x, points[i].pos.y, points[i + 1].pos.x, points[i + 1].pos.y);

  }

​

  save("pi-"+numOfDigits+"-digits","png"); 

  noLoop();

}