Interactive image Fourier analysis website

This hosts the code and files for a website that allows for interactive exploration of image Fourier analysis—potentially useful for teaching.

See this blog post for more background.

Contents:

• Demonstration
• Features
• Current limitations
• Hosting
• Building
• Author

Demonstration

Website

A demonstration version is available on this website.

Video

img_freq_web_demo.mp4

Features

• All calculations performed entirely within the browser.
• Includes example natural and synthetic images.
• Custom images can be uploaded or grabbed from a webcam.
• Windowing can be applied to the input image.
• Amplitude spectrum displayed on either log-polar or (zoomable) Cartesian axes.
• Optionally shows the spatial frequency slope.
• Can set low-pass, high-pass, or band-pass filters and see the reconstructed output.
• Output can be saved to the local computer.

Current limitations

• Untested on Safari and Edge.
• Webcam doesn't seem to work on mobile devices (can upload from camera, though).
• Widget layout is relatively unstyled.
• Page layout could be improved—ideally the key components would be visible without scrolling.
• No explanatory prose.
• Needs some visual indicator when updating the output.
• Missing axis labels on the non-image canvases.
• Some more example images could be added.

Hosting

Copy the files in the site directory to a web server.

Building

If you would like to make any changes or fixes, the JavaScript will need to be re-compiled using node.js. This is because the site uses functionality from the great set of scijs packages.

Install the necessary packages

npm ci

(Optionally) Run the linter

npm run lint

Compile

npm run build

Author

Damien Mannion

• Profile
• Email
• Website