2D Fourier transforms to draw figures
On this page, you can draw a 2D figure that then is drawn using a 2D fft. This is inspired by a video by 3Blue1Brown. I basically just watched the video, then tried to create something similar – and it was definitely not as straightforward as I first thought, and the method I finally used is probably not completely the same as used in the video.
I started with writing an fft-function. This was quite straightforward since I have done that a couple of times before. The idea is then to treat a 2D input as a complex input to the fft.
Then I tried it with some known inputs. One problem is that the fft of a real cos and an imaginary sin are the same. To fix this I did two fft’s. One on the real data and one on the imaginary data, then combining the data.
Next, I added the possibility to draw the data points, either with a mouse or on a touch screen. This data is then turned into a set of data with the number of data points being a power of two, using interpolation. The fft’s are then done using that set of data.
Later on, I added some demos, and the possibility to paste your own data.
The buttons and other inputs
- Clear: Clears the canvas and resets all data.
- Draw epicycles: Draws the curve constructed by the fft.
- Show circles: Show the circles corresponding to the different frequencies.
- Hide trace: Hides the trace of the curve the outermost vector moves along. I.e., the curve corresponding to the sum of the cos and sin functions determined by the fft’s.
- Show original: Shows the original curve.
- Show Demo: This will show one of several demos listed below.
- Next demo: Jump to the next demo.
- Demo nr: You can also edit the demo number here directly.
- #Circles: Here you can select the number of circles/vectors shown. This corresponds to the number of terms of the fft’s that are used when drawing the resulting curve.
- Min gap length: Select the min step length that makes the lone not to be shown. If the steps between two successive points on the curve are too far from each other the corresponding part of the curve is not drawn. This allows you to draw discontinuous curves, such as texts.
- Speed – and speed + are used to change the drawing speed.
The Demos
- A clock face: It is not supposed to show the time, just shows the principle that it’s even possible to draw something as complicated as the numbers on a clock face.
- This makes it jump between two horizontally spaced points. I think this looks rather cool.
- This shows how a straight line can be drawn using two counterrotating vectors of equal length.
- This also draws a line, but now the line is produced at a constant speed.
- This draws a square using circles. It exemplifies the problem with trying to explain away things with ad hoc solutions – like epicycles to “explain” planetary motions, or arbitrary “atmospheric lensing” to “explain” why, if the earth were flat, the sun would not get smaller as it moves away.
- Draws a spiral on a torus – just for fun.
- Draws a map of the world. The data is extracted from an SVG-file.
- This draws a part of a sine wave, or the graph of some user data.
User data
If you have some coordinates in two columns in Excel, one for the x-coordinates, and one for the y-coordinates, and you copy and then paste them onto the canvas, then that data will be used to form a graph. The data will be used for demo number 8, and it will start to draw the graph directly if the data is in the right format. If you want to create it in some other way, then each pair of coordinates should be in the format:
x-coordinate TAB y-coordinate NEW LINE RETURN
The coordinates should be between –300 to +300.
Drawing
Draw a curve or figure on the screen – rather slowly – then click Show epicycles – and enjoy (^^,)
Up a level : Fast Fourier transformLast modified: