Fourier Drawing Editor

I remember the first time I saw a line drawing being created using epicycles and thinking that was neat. After browing the Internet I discovered a series of videos on Fourier series and Fourier transfomations by Dan Shiffman and it encouraged me to have a go myself. In particular I wanted an editor where I could create and edit my own drawings and this is the result.

At the core of the sketch is the code to represent basic complex numbers, epicycles and perform the discrete Fourier transformation. These were based on Dan’s Coding Challenge 130.

The sketch starts with one of the examples but to experiment making your own click on the CLEAR ALL button to start a new drawing from scratch. Alternatively you can view and edit any of the 12 examples provided.

If you have a p5js Web Editor account you can clone this sketch and play with the source code.

Have fun :grin:

5 Likes

It’s turtle-like. I’m not familiar with cloning someone else’s work in p5.js. What’s the procedure for that (I have an account)? Very nice work and thanks for this contribution. Looks like you used vector arrays to keep track of the path.

1 Like

The first thing to do is create your own account in the p5js Web Editor then make sure you are logged in and ‘visit’ this sketch by clicking the link in my previous post.
Then select File | Save from the menu and it will copy the sketch into your account so you can edit it to your hearts desire.

Got it. Thanks for the code.

1 Like

Great work @quark! The UI is nice to use–reminds me a little of Sketch Machine. I made a less refined version a few years ago so a friend could draw some portraits-as-machines. Actually revisited this idea recently for another project, so I’m excited to learn from your sketch. Thanks for sharing!

2 Likes