turbomaze / js-fourier-image-analysis

Javascript implementation of a 2D FFT for images. Makes it easy to apply low pass/high pass/band filters.

JS Fourier Image Analysis

This is a web app that computes the 2D Fourier transforms (FTs) of images. After a FT is computed, an image is generated representing the magnitudes of each of the constituent sinusoids.

Check out a live demo at: http://turbomaze.github.io/JS-Fourier-Image-Analysis/

Low frequencies are in the center of this image, per usual. Entering a value in the "Low pass radius" box removes all sinusoids that are more than that many pixels away from the center: those with high frequency. Setting the "High pass radius" removes the sinusoids that are within the specified number of pixels. If you enter both a low and high pass radius, a band filter will be applied. That is, only sinusoids between the low and high radii are kept.

Once you click the reconstruct button to restore the image, you can see how the result differs from the original. Green areas are the same as the original, blue areas are darker, and red areas are brighter. Currently (due to CORS issues), only images that are hosted on the same web server as the web app can be transformed.

For more info about Fourier transforms/an example app that uses this code, check out this blog post about evolutionary art.

Usage

To use this module, include the js/fourier.js file in your webpage.

To compute the FFT of an input array, call the Fourier.transform(data, out) function where data is the array of vaalues you'd like to FFT and out is an empty, pre-declared array that will be filled with the transform.

For the inverse FFT, use Fourier.invert(transform, sig) similarly.

To compute the FFT of an image, first, draw it to a canvas and get the image data with [CanvasRenderingContext2D].getImageData. Then you can run the above functions on a copy of the resulting array. See the demo code in js/main.js for examples.

You can compute ta low pass/high pass filter with the Fourier.filter(data, dims, lowPass, highPass) function. data is the FFT output, dims is a two-element array representing the dimensions of the original image, lowPass is the optional low pass radius and highPass is the optional high pass radius.

License

MIT License: http://igliu.mit-license.org/

js-fourier-image-analysis's Issues

issues with color assignment

Thanks @turbomaze for your work.

PhET (https://github.com/phetsims) has been leveraging some of your code on Fourier Image Analysis to develop an educational open source simulation on wave interference (https://github.com/phetsims/wave-interference).

I'd like to report an issue with the color assignment in main.js

 var logOfMaxMag = Math.log(cc*maxMagnitude+1);
    for (var k = 0; k < dims[1]; k++) {
      for (var l = 0; l < dims[0]; l++) {
        var idxInPixels = 4*(dims[0]*k + l);
        currImageData.data[idxInPixels+3] = 255; // full alpha
        var color = Math.log(cc*$h(k, l).magnitude()+1);
        color = Math.round(255*(color/logOfMaxMag));
        // RGB are the same -> gray
        for (var c = 0; c < 3; c++) { // lol c++
          currImageData.data[idxInPixels+c] = color;
        }
      }

The line with the color assignment has indices reverted.
If we follow your convention of unpacking the array, then
the indices for the color assignment should be transposed.

  var color = Math.log(cc*$h(l, k).magnitude()+1);

Maximum call stack size exceeded (rec_FFT)

Hey there,

I've been working on a quality image detection js thing and came across this library. I've been wanting to use an FFT transform to be able to determine the quality of the image, however, when I pass in the grayscale image data, I get a maximum call stack size exceeded, is this due to the size of the array?

Example
https://codepen.io/izzy-md/pen/JZbOWy?editors=0010

Error

RangeError: Maximum call stack size exceeded
    at rec_FFT (VM11697 fourier.js:37)

Note: I'm planning on making a JS implementation of this formula https://www.sciencedirect.com/science/article/pii/S1877705813016007

what is the fun of "lol c++" about this line?

JS-Fourier-Image-Analysis/js/main.js

Line 216 in 4131dfb

for (var c = 0; c < 3; c++) { // RGB are the same, lol c++

This is a 1D transform, not 2D

I have a strong suspicion, that this is an implementation of a 1D fourier transform, not 2D. Meaning, instead of computing a 2D transform of NxN values, it computes a 1D transform of a "linear array" of NxN values.

The 1D transform of an image (as "row-by-row") looks very similar to a 2D transform. Of course, it is invertable, meaning, that the inverse will give you back the original array, even if it was an image.

This library gives exactly the same results, as this code of 1D transform: https://code.soundsoftware.ac.uk/projects/js-dsp-test/repository/entry/fft/nayuki-obj/fft.js

Licence?

Hi, I'd like to use this project in a hybrid image maker. I've started building it here (but I haven't added any code yet): https://github.com/nathanathan/hybrid-image-maker
If you don't mind me using your code to do the filtering could you add a license?
Thanks,
-Nathan