let search = '';

​

let searchBar;

let indexP;

let button;

let startButton;

let pauseButton;

​

let paused = false;

let started = false;

​

let pitchDetector;

let audioContext;

let mic;

let modelURL = 'https://cdn.jsdelivr.net/gh/ml5js/ml5-data-and-models/models/pitch-detection/crepe/';

​

function preload() {

  raw = loadStrings('pi-million.txt');

}

​

function setup() {

  createP('The model listens for a pitch every second and will add it to the search. It is being mapped between 0 and 9. You can clear it too.').style('font-size', '24px');

  noCanvas();

  button = createButton('clear').position(0, 270);

  button.mousePressed(clearSearch);

  searchBar = createInput('');

  searchBar.input(searchActivated);

  indexP = createP('Waiting to Start . . .').style('font-size', '32px');

  digits = raw[0];

  startButton = createButton('start');

  startButton.mousePressed(start);

  startButton.position(75, 270);

  pauseButton = createButton('pause');

  pauseButton.position(150, 270);

  pauseButton.mousePressed(pause);

}

​

function pause() {

  paused = !paused;

  pauseButton.hide();

  pauseButton = createButton(paused ? 'unpause' : 'pause');

  pauseButton.position(started ? 75 : 150, 270);

  pauseButton.mousePressed(pause);

}

​

function start() {

  started = true;

  pauseButton.position(75, 270);

  userStartAudio();

  audioContext = getAudioContext();

  mic = new p5.AudioIn();

  mic.start(startedPitch);

  startButton.hide();

  pauseButton.position(75, 270);

}

​

function startedPitch() {

  pitchDetector = ml5.pitchDetection(

    modelURL,

    audioContext,

    mic.stream,

    modelLoaded

  );

  setInterval(listen, 1000);

}

​

function modelLoaded() {

  indexP.html('model loaded!');

}

​

function gotPitch(err, freq) {

  if (err) {

    console.error(err);

  } else {

    let reading = floor(map(freq, 0, 800, 0, 10));

    let digit = reading.toString();

    search += digit;

    searchBar.value(search);

    getIndex();

  }

}

​

function listen() {

  if (!paused) {

    pitchDetector.getPitch(gotPitch);

  }

}

​

function clearSearch() {

  search = '';

  searchBar.value('');

}

​

function searchActivated() {

  search = searchBar.value();

  getIndex();

}

​

function getIndex() {

  let pattern = searchBar.value();

  if (pattern !== '') {

    let position = digits.indexOf(pattern, 2) - 1;

    if (position !== -2) {

      indexP.html(`${pattern} appears at position ${position} in π! 👍🏼`);

    } else {

      indexP.html(`${pattern} doesn't appear in the first million digits of π! 😢`);

    }

  }

}