Coding Challenge 130: Fourier Transform User Drawing

Other Parts of this Challenge:

References:

Videos:

Related Coding Challenges:

Timestamps:
0:00 Fourier Transform and Epicycles Part 2 - render a user-drawn path
1:20 Create a state variable
2:18 When the mouse is pressed, set the state as "user"
4:18 Render points while the user is drawing
6:48 Reset variables
7:38 Fix offset
8:38 Up next: have the inputs be complex numbers

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#fouriertransformsquarewave #discretefouriertransform #epicyclesdrawing #javascript #p5js

[adityasriram]

"I know I could use like Enumerables and stuff, but that's not me" 🤣🤣
Go Dan, you do you !!

[EldeNova]

Under 10 mins! I think it's time to bring the coding timer back Dan!

[pilotmax]

When you create a point in your Draw function and push in to the drawing array, check if that point is equal to the last point in the array. If it is, skip it. This will avoid having multiple identical points when while drawing you don't move the mouse for a moment. You can see this happening in your last drawing, as the DFT draws, you can see it "pause" at a few moments, probably because the array is filed with identical points following each other.

[akashtakawale]

As i love your tuturials ..i watch entire ads to help you no matter how long they thank u for this amazing content.

[m-agoumi]

Really creative idea man big up and good luck in the next videos I really wait for them

[avi]

4:29 When the syntax of JavaScript is so similar to Java that you accidentally use the syntax of Java

[SrikanthReddy-nxpx]

Thats cool man including fourier series

[sureshbabu-tjfl]

Excellent man.... I am excited... Thanks!

[יובלהרמן-חד]

This could be used as a compression algorithm to replace vector images.
Perhaps not in every case but in some case it will reduce file size considerably!

[thejavascriptshow]

Precise and fun as always, you've been such an inspiration for me and for my channel, looking forward to making such entertaining content 😃.

Try doing Shrödingers wave function visualization

[djtygre]

+++ THANK YOU FOR DOING THIS CHALLENGE DAN +++

[trkn]

just for valentine's i made a drawing of a heart, you can use this formula to get a polar graph of a heart that can be used as a path:
for (let t = 0; t <= TWO_PI; t += cont) {
let r = -100*(3 - 2 * sin(t) + cos(2 * t) -2 * abs(cos(t)));
drawing.push({x: r * cos(t), y: r * sin(t)})
}
happy valentine's day

[AshutoshSingh-tovx]

You are famous in India. This video is awesome. I don't code (except write basic level script in octave) but I'm sure I'll start today as this is cool and I've read about Fourier transform but didn't do anything like this on computer.

[nileshmangnakar]

just a thank you is not enough!!! we love you sir. #RESPECT :*

[unitydeveloper]

Wow....This is awesome can't wait for the say you jump into water simulation

[avi]

7:02 I guess:
state = USER;
drawing = x = y = path = [];
time = 0;

[unitydeveloper]

Wow....This is awesome can't wait for the day you jump into water simulation

[shambhalawarriorphilosophe]

Is it possible to use the X y paths (the straight up down left right epicyclicle movement) to 'carve' that graphs pattern onto a rotating circle, as to create a cam profile that will then drive that motion for an automaton?

[MrKlingypoo]

what about adding a 3 dimension so you could possibly load a PLY file, find the shortest route through these polygons and then draw it in 3D space? I know this is a rather big challenge but I believe it would be fun.