var input = new Array(1024);

var sampling_rate = 50;

var freq_step = sampling_rate / 1024;

var out = fft.createComplexArray();

​

var theta = 0.0;

function setup() {

  input.fill(0);

  setInterval(function () {

    input.push(0.1*sin(theta));

    theta = theta + TWO_PI/50;

    while (input.length > 1024) {

      input.shift();

    }

  }, 20);

​

  createCanvas(1024,1024);

}

​

function draw() {

  background(200);

​

  if (input.length >= 1024) {

    const data = fft.toComplexArray(input);

    fft.realTransform(out, data);

    noFill();

    beginShape();

    for (let i = 0; i < out.length / 2; i++) {

      text(i * freq_step, i, height - 10);

      vertex(i, -pow(out[i], 2) + height - 20);

    }

    endShape();

​

    fill(0);

    textSize(7);

    textAlign(CENTER);

    for (let i = 0; i < out.length / 2; i += 25) {

      text((i * freq_step).toFixed(1), i, height - 10);

      line(i, height - 18, i, height - 25);

    }

​

    text(`Frequency Step: ${freq_step}`, 10, 10);

  }

}

​