test Fast Fourier Transformation

by Konstantin Cryman

HTML

<script src="https://threejs.org/build/three.min.js"></script>
    <canvas id="testCanvas" width="1200" heigh="480" style="background-color: #000000; width: 1200px; height: 480px" >
    </canvas> <br />
    <div style="display: none;" >
      start offset range: <input type="range" min="-1" max="1" step="0.01" id="testRange"></input> <br />
    </div>
    points count range: <input type="range" min="1" max="1200" step="1" id="testRange_count_of"></input><div style="display: inline-block;" id="testRange_count_of_value"></div><br />
    precission range: <input type="range" min="0.1" max="1" step="0.01" id="precissionRange"></input><div style="display: inline-block;"  id="precissionRange_value"></div>

JavaScript

let testData = [];

// const testGeometry = new THREE.SphereGeometry( 100, 16, 16 );
// const testGeometry = new THREE.PlaneGeometry( 50, 200, 64, 64 );

 const total_i = 1200;
 for( let i = 0; i < total_i; i++ ){
     const alpha = i / total_i;
	testData.push( {
             x: 150 * Math.sin( Math.PI * 2 * alpha ),
             y: 150 * Math.cos( Math.PI * 2 * Math.random() / 4 ),
             z: 0
     } );
}
  
/* for( let i = 0; i < testGeometry.vertices.length; i++ ){
  testData.push( {
            x: testGeometry.vertices[ i ].x,
            y: testGeometry.vertices[ i ].y,
            z: testGeometry.vertices[ i ].z
    } );
} */

  const testRange = document.getElementById( 'testRange' );
  const testRange_count_of = document.getElementById( 'testRange_count_of' );
  const testRange_count_of_value = document.getElementById( 'testRange_count_of_value' );
  const precissionRange = document.getElementById( 'precissionRange' );
  const precissionRange_value = document.getElementById( 'precissionRange_value' );
  const canvas = document.getElementById( 'testCanvas' );
  canvas.width = 1200;
  canvas.height = 480;
  const ctx = canvas.getContext( '2d' );
  
  const ANIMATIONS = [];
  const animate = () => {
    for( const nextAnimationFoo of ANIMATIONS ){
        nextAnimationFoo();
    }
    requestAnimationFrame( () => {
        animate();
    } );
  }
  
class FastFourierTransformation{

    constructor(){

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

    }

    valuesToDFT( sourceNumbersArray, precissionValue ){

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

        // console.log( 'sourceNumbersArray.length', sourceNumbersArray.length );
        // console.log( 'sourceNumbersArray.length', sourceNumbersArray );

        const filtrator = 1;

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

            if( k > N ){
                break;
            }

            let re = 0, im = 0;

            for( let n =...