Fourier Transformation from JSON

Change class name on click in jQuery

by Konstantin Cryman

HTML

<div>
  <input id="uploadTestJson" type="file" hidden="hidden">
  <button id="uploadTestJsonButton">Uload Test Json</button>
  <range min="0.01" max="1" step="0.01" />
</div>

<canvas id="fromData"></canvas>
<br>
<canvas id="toData"></canvas>

CSS

#fromData{
  width: 640px;
  height: 320px;
  background-color: #666666;
  margin: 15px;
}

#toData{
  width: 640px;
  height: 320px;
  background-color: #666666;
  margin: 15px;
}

JavaScript

class FastFourierTransformation {

  constructor() {

    this.TWO_PI = Math.PI * 2;
    this.HALF_PI = Math.PI / 2;

  }

  valuesToDFT(sourceNumbersArray, __compression = 1) {

    const X = [];
    const N = sourceNumbersArray.length;

    const compression = __compression;

    let i = 0;

    for (let k = 0; k < N; k += compression) {

      let re = 0,
        im = 0;

      for (let n = 0; n < N; n++) {
        const phi = (this.TWO_PI * k * n) / N;
        re += sourceNumbersArray[n] * Math.cos(phi);
        im -= sourceNumbersArray[n] * Math.sin(phi);
      }

      re = re / N;
      im = im / N;

      let freq = k;
      let amp = Math.sqrt(re * re + im * im);
      let phase = Math.atan2(im, re);

      X[i] = {
        // r: re, 
        // i: im,
        f: freq,
        a: amp,
        p: phase
      };

      if (k + compression > sourceNumbersArray.length) {
        break;
      }
      i++;
    }

    // X.sort( ( arg1, arg2 ) => { return arg1.a - arg2.a } );

    return X;
  }

  dftToValues(dftDataArray, __times, __offset = 0, __precission = 1) {

    let precission = Math.ceil(dftDataArray.length * __precission);
    if (precission > dftDataArray.length) {
      precission = dftDataArray.length;
    }

    const times = __times || dftDataArray.length;

    const timeStep = this.TWO_PI / times;

    let offset = __offset;

    const resultNumbersData = [];

    let time = 0;

    for (let t = 0; t < times; t++) {

      let resultNum = 0;

      time += timeStep;

      for (let i = 0; i < dftDataArray.length; i++) {
        if (precission && precission < i) {
          break;
        }
        resultNum += dftDataArray[i].a * Math.sin(dftDataArray[i].f * time + dftDataArray[i].p + offset);
      }

      resultNumbersData.push(resultNum);

    }

    return resultNumbersData;

  }
};

const FF_TRANSFORMER = new FastFourierTransformation();

const can1 = document.getElementById( 'fromData' );
can1.width = 640;
can1.height = 320;
const ctx1 =...