An interactive image Fourier analysis website

Here, I describe and reflect on a project in which I created a site to allow the interactive exploration of the Fourier analysis of images.

I have been thinking more about usefulness of interactive online activities in learning and understanding, inspired by the great examples given by:

Recently, a colleague mentioned that an interactive way of exploring the Fourier analysis of images could be a useful teaching tool. Implementing such an activity on a website sounded interesting, so I thought I would have a go at putting one together.

The result is the “Image frequency spectrum analysis” site. The site and its code available in a public Github repository. The main features of the site are:

Here is a screenshot of the site:

Screenshot of the image frequency spectrum analysis website
Screenshot of the “Image frequency spectrum analysis” website. The dog is Mabel—my sister’s Newfoundland dog.

A few things I have learned, recognised, or appreciated while putting this together:

Overall, I really enjoyed and feel like I learned a lot from this project—and I hope that it may be a useful teaching resource.


  1. Harris, C.R., Millman, K.J., van der Walt, S.J., Gommers, R., Virtanen, P., Cournapeau, D., Wieser, E., Taylor, J., Berg, S., Smith, N.J., Kern, R., Picus, M., Hoyer, S., van Kerkwijk, M.H., Brett, M., Haldane, A., del Río, J.F., Wiebe, M., Peterson, P., Gérard-Marchant, P., Sheppard, K., Reddy, T., Weckesser, W., Abbasi, H., Gohlke, C., & Oliphant, T.E. (2020) Array programming with NumPy. Nature, 585, 357–362.