i love how well you can explain topics, especially complex topics such as Fourier Transform! you’re definitely able to explain them in a really simple, but effective manner. great video as always!
Congratulations. The best video of all time. It encapsulates all necessary videos and sites on the internet related to fourier transform and fourier series so anyone with basic knowledge on math can understand and implement a fourier transform. It is simply amazing. I've spent many years of my life trying to understand it and now it it seams so easy.
This is an awesome way to learn about the discrete fourier transform and fourier series. Even knowing a LOT about fourier transforms as applied to both sound and electronic signals, seeing the DFT used to draw a friggin train blew my mind.
I'm watching Daniel's channel since about 50k subs, every time he creates some amazing project, but this is maybe the most amazing thing I've ever seen here :D I heard about FT long time ago, but I've never been interested until now. Great job ;)
Haha! While everyone can make such mistakes, it always trigger me when is see code like: var a = 20; // age var b = 40; // length instead of: var age = 20; var length = 40;
I love that you shout out other channels and give credit to the inspiration of the video where it is due. Always love your videos keep up the great work
Hey Daniel! I'm a huge fan of your channel, and I always learn a lot from your videos. Although I do not do JavaScript or p5.js, by going through the algorithm step-by-step one can build and expand on the code in any modern language. More importantly, one can not only replicate the code, but also understand it! Combining math, code and graphics is so much fun! In fact, I've been interested in Fourier since ever, but the standard math has always daunting to me, a biologist without strong background in math. Your recent videos on FT are not only amusing, but also expanded the horizon of possibilities in my research. Keep up the GREAT work! Best!
Although this video's sophistication only adds to its glory, I miss the time when your videos used to be based on p5.js and were so simple that I would start coding straight away!
FFT must means FULL of FRUSTRATING TRANSFORMATION. i had to watch more videos about fourier transform to catch up your 1 hour video. and more time to ponder. but only got glimpse of it. I only could start actual coding after i stop to try understand everything mathmatically. it was shame but when I finally reconstructed a straight line with x,y sin waves in my own code I am so satisfied. all my struggle was not in vain. thank you!
if you don't mind, could i know how long you have been coding, and what is your level of knowledge in mathematics? i just started coding 5 months ago and feel like im picking it up very quickly, and i was always very good at math in highschool, just wanting to get an idea of how long until i'm at the level that I can start figuring this stuff out on my own like you commented that you did, thanks the last video he did on fourier series i understood like 95% of it, but on this one just got totally lost, lol, thanks again
When I saw this you gave me an idea, I took your code, and I added something with python. I made something like paint in black and white, and what you draw (if you refresh the page) it get drawn eith your machine. it's all a mix of phyton and javascript. But then I saw your other video where you did that but better :-( I'm still happy of my result Thank you for giving me fantastic ideas every time I watch one of your video
FFT if I remember correctly can be used to simulate sea waves in videogame graphics very efficiently Also, as a way to teach complex numbers, have you ever considered making a "complex number library"? You can then refer to it when you do videos like this that build on top of it.
I believe the performance issue for the logo path is due to the fact that in the dft() function the number of frequencies computed is equal to the number of the data points in the signal array. So if you have 1000 points in the data array - you will be computing 1000 frequencies. It's unlikely that anyone will need that many, most of them are probably close to 0.
Tip: Don't use "const" when you know you don't want to change a variable - just always use "const" except when it's _really_ not possible. You'll write different code that way because automatically you try to avoid "let" by using functions like .map() and stuff
1) Load picture. 2) Create array. 3) Make function to fill array with coordinates when clicked. 4) Click only 5000x on picture. 5) Profit! Simple as that.
Here's a code improvement that lets you use any time step size and see what happens between sample points. You can learn a lot about how DFT works this way, and it shows what a real "Fourier machine" would draw if you actually built it. The original code relies on aliasing for negative frequencies and plots an idealized path by only "hitting" the original sample points. To fix the negative frequencies issue change lines 31 & 32 to the following: let ang = 0; if (freq < fourierY.length/2) ang = freq * time + phase + HALF_PI; else ang = -(fourierY.length - freq) * time + phase + HALF_PI; x += radius * cos(ang); y += radius * sin(ang); Then you can reduce the time step size -- change the original line 50 to a small number or something like this const dt = TWO_PI / fourierY.length / 10; If your signal is undersampled you'll see a lot more oscillations since the DFT is only able to approximate the original signal. However the plotted line always goes through the sample points and you can increase accuracy by increasing the number of samples (signal array size). Functions containing sine waves don't need very many samples, for example this function works reasonably well for arbitrarily small time step sizes with as few as 16 samples: y = sin(x)*2 + sin(x * 3 + PI/7) for x from 0 to 2*PI. Note there is an ambiguity at N/2 so for some signals like a single straight line odd array sizes might work better.
Thank you for this! If you like you can submit it as a community contribution on the coding train website! thecodingtrain.com/CodingChallenges/130.1-fourier-transform-drawing.html
Upon watching 'Coding Challenge #130.1: Drawing with Fourier Transform and Epicycles' I had a few questions that I am hoping the board can answer. 1) Given all the points from the picture being drawn, couldn't the picture have been drawn just connecting the points? 2) The equation included the imaginary part 'i' and i is defined a sqrt(-1), but sqrt(-1) was not used in the algorithm, that is a little confusing.
I loved the video so much. I download your code, so I can play a bit with different pictures. However, I have problems to extract the x and y coordinates from a continuous line drawing picture. does someone know how to extract those coordinates other than manually?
A crude attempt at reducing the number of points in the drawing (to 375 in this case) instead of skipping 7 out of 8 points which gives 625 points, while keeping most of the details of the original 5000 point drawing: function simplifyDrawing(drawing) { const maxHeadingDiff = 0.4; const maxStrokeLength = 16; let newDrawing = []; let headingDiff = 0; let strokeLength = 0; let prevVec = null; for (let i = 0; i < drawing.length -1; i++) { let vec = createVector(drawing[i+1].x - drawing[i].x, drawing[i+1].y - drawing[i].y); if (prevVec == null) { newDrawing.push(drawing[0]); } else { headingDiff += vec.heading() - prevVec.heading(); if (abs(headingDiff) > maxHeadingDiff/8) { strokeLength += vec.mag(); } else { strokeLength += vec.mag()/128; } if (headingDiff > maxHeadingDiff || headingDiff < -maxHeadingDiff || strokeLength > maxStrokeLength) { newDrawing.push(drawing[i+1]); headingDiff = 0; strokeLength = 0; } } prevVec = vec; } if (strokeLength > 0) { newDrawing.push(drawing[drawing.length-1]); } print('Simplified drawing from ' + drawing.length + ' to ' + newDrawing.length + ' points.'); return newDrawing; }
i'm not sure why but for me, only the 7th index of the transformed hard-coded square wave gives wrong values. all the other values are fine. Why does this happen?
Hi, i have learnt a lot from this channel. The content and references provided are great. Great job👍 I don't whether it's the right place to ask, but can you create a video on generating offset polygons. I think they are great, and challenging as well. Can you some techniques for working with them. I really appreciate
Why you need that Fourier calculations at all??? To be able to draw the logo you need to draw the points taken from the logo array input. The same result, but without taking Fourier calculations.... This is insane. You are using your input array to perform heavy calculations to get the output which in fact is your input!
Can someone please explain to me why i cannot just add an arbitrary amount dt each frame? Making it bigger is obviously a bad idea since you skip high frequencies. But even if i make it smaller than 2PI/N it creates weird shapes. Shouldn't every value of the function f(t) we're creating be on our "train-line"? Please enlighten me. Great stuff btw!!!
This is epic! How can you make it like that, but with only one set of circles? (3:28) If you had a link or something I have to search, that's more than enough.
Hey, I wonder can we Fourier transform the path of moon in space, as moon revolves around earth, earth revolves around sun and sun revolves around galaxy.??
hey i'm trying to make the one where the person draws the shape so that it keeps tracing the path but as it continues to trace it the path disapears at the start so the shape keeps being drawn without the line overlaping at all.
So basically draw in a convoluded way when it is simpler to just normalise those values and multiply them against size and add them to the xy positions wanted
You are the best coding teacher ever!
Keep up the math related codes.
So basically you've created the most complicated etch-a-sketch of all time
XD
Thanks!
Thank you for the support!
This is the coolest explanation of Fourier transformation I’ve ever seen!
i love how well you can explain topics, especially complex topics such as Fourier Transform! you’re definitely able to explain them in a really simple, but effective manner. great video as always!
My favorite part about the channel! Very inspiring
Jesus this is insane! I remember having to draw a image with piecewise functions in 10th grade and thought that was impressive.
Yeah, this "Fourier machine" is really great! - And it's so inspiring how Dan explains the development of it.
Congratulations. The best video of all time. It encapsulates all necessary videos and sites on the internet related to fourier transform and fourier series so anyone with basic knowledge on math can understand and implement a fourier transform. It is simply amazing. I've spent many years of my life trying to understand it and now it it seams so easy.
This is an awesome way to learn about the discrete fourier transform and fourier series. Even knowing a LOT about fourier transforms as applied to both sound and electronic signals, seeing the DFT used to draw a friggin train blew my mind.
I'm watching Daniel's channel since about 50k subs, every time he creates some amazing project, but this is maybe the most amazing thing I've ever seen here :D I heard about FT long time ago, but I've never been interested until now. Great job ;)
Thank you for this nice feedback!
"Lets make an array, called "y" and this is signals"
how about naming it "signals"?
Haha! While everyone can make such mistakes, it always trigger me when is see code like:
var a = 20; // age
var b = 40; // length
instead of:
var age = 20;
var length = 40;
@@naxaes7889 It triggers me when someone uses var instead of let without purpose
@@spythere ES6 makes me cry.
@@spythere there's no difference though
I love that you shout out other channels and give credit to the inspiration of the video where it is due.
Always love your videos keep up the great work
Hey Daniel! I'm a huge fan of your channel, and I always learn a lot from your videos. Although I do not do JavaScript or p5.js, by going through the algorithm step-by-step one can build and expand on the code in any modern language. More importantly, one can not only replicate the code, but also understand it! Combining math, code and graphics is so much fun! In fact, I've been interested in Fourier since ever, but the standard math has always daunting to me, a biologist without strong background in math. Your recent videos on FT are not only amusing, but also expanded the horizon of possibilities in my research. Keep up the GREAT work! Best!
Although this video's sophistication only adds to its glory, I miss the time when your videos used to be based on p5.js and were so simple that I would start coding straight away!
isn't he using p5.js in this video?
@@ajoealex1 I am! But it does take me a while to get to it 😬
@@TheCodingTrain you are awesome.... keep going😊. love the way you explain.
Don't joke about imaginary numbers Daniel! This is VERY serious business.
Please explain me!
imagine how bad puns would come out of that!
Hehehe... "Imagine"-"imaginary"? No? Only me laughing?
Anyway, bad pun intended
Daniel is my name to
@@canaDavid1 lol
@Yo ming concur
FFT must means FULL of FRUSTRATING TRANSFORMATION. i had to watch more videos about fourier transform to catch up your 1 hour video. and more time to ponder. but only got glimpse of it. I only could start actual coding after i stop to try understand everything mathmatically. it was shame but when I finally reconstructed a straight line with x,y sin waves in my own code I am so satisfied. all my struggle was not in vain. thank you!
if you don't mind, could i know how long you have been coding, and what is your level of knowledge in mathematics? i just started coding 5 months ago and feel like im picking it up very quickly, and i was always very good at math in highschool,
just wanting to get an idea of how long until i'm at the level that I can start figuring this stuff out on my own like you commented that you did, thanks
the last video he did on fourier series i understood like 95% of it, but on this one just got totally lost, lol, thanks again
What a beautiful challenge...it's fanstastic...unbelivable to see!
Im so glad that you uploud new videos! There was a little break that made me worry
I took computer graphics course in my third year of cs study and all I can say is you've done some amazing
When I saw this you gave me an idea, I took your code, and I added something with python.
I made something like paint in black and white, and what you draw (if you refresh the page) it get drawn eith your machine.
it's all a mix of phyton and javascript.
But then I saw your other video where you did that but better :-(
I'm still happy of my result
Thank you for giving me fantastic ideas every time I watch one of your video
Shiffman was a mad scientist in a past life. Lucky for us, he's on the side of good this time around.
Could someone please explain why we add phase at 25:48?
most helpful source for people who don't understand math functions but understand js :D
What can I say Dan..... You are a legend! (And you dance exactly like me!)
Man i can tell you. I hate javascript and still love your channel. This is gold
I've been looking for this content for years
greatest and most complicated programe ever created by a TH-camr
for something so intimidating, I can't believe how quickly you reproduced that DFT algorithm
Beautiful - interaction between x- and y-axes. Put a similar wiper setup on the z-axis and you can make a 3D drawing.
Thanks
Thank you for the support!
Thanks for your help! It was always interesting how the fourier transformation works.
This practical implementation is 100 x better than 10 videos dealing with the theorem.
FFT if I remember correctly can be used to simulate sea waves in videogame graphics very efficiently
Also, as a way to teach complex numbers, have you ever considered making a "complex number library"? You can then refer to it when you do videos like this that build on top of it.
I made a small start to one in the most recent video (part 3 of this series)!
@@TheCodingTrain Definitely watching that, you're awesome
Daniel thank you!! so crazyy
Thank you so much Daniel!
I believe the performance issue for the logo path is due to the fact that in the dft() function the number of frequencies computed is equal to the number of the data points in the signal array. So if you have 1000 points in the data array - you will be computing 1000 frequencies. It's unlikely that anyone will need that many, most of them are probably close to 0.
Brilliant work! One of your best ones.. Thank you :)
Teşekkürler.
Thank you for the support!
Amazing, The way you explained it, its very easy.
So... he basically reinvented the Gcode?
Basically yes. But In a wierd way
Isn't the path file already sorta like gcode? The Fourier transform just gives you the size and starting angle of the little circle/rotating things
I loved it Dan, thank you very much for all this!
Also i'm making it happens with dart/flutter!
Please share when you do!
Tip: Don't use "const" when you know you don't want to change a variable - just always use "const" except when it's _really_ not possible. You'll write different code that way because automatically you try to avoid "let" by using functions like .map() and stuff
@@kreuner11 what a madlad
and .forEach()
yea but can you do it like 3blue1brown and make the picture from just one set of circles?
he done something similar in a february video
Yes! See: thecodingtrain.com/CodingChallenges/130.3-fourier-transform-drawing.html
@@TheCodingTrain nice
3:06 I’m just glad you don’t put bananas in your smoothies.
Dude I loved it! ❤❤
Yay new video!
This was SO cool!
This was Fwording insane!
it was more fun to watch the live series :D
"I made a terrible array" 😂😂
39:00 5 years and I still haven't figured it out how to make a vector out of an image. He never showed and I was never able to understand it :(
I would love to learn how the Coding Train logo path was generated.
yeah me too
Ask twitter.com/tomfevrier, he made it!
Probably something to do with SVG data
1) Load picture.
2) Create array.
3) Make function to fill array with coordinates when clicked.
4) Click only 5000x on picture.
5) Profit!
Simple as that.
Actually, you can easily convert any image to array of vectors using any cnc machine software
Awesome, like always!
i have been deep in the rabbit hole after watching part one of this video
24:17 - what does it means "frequency = 0"? Is it possible? Can we skip that?
Thanks for making this!
amazing!!!
"KOSMIC DUST" where the hell did you blow in from anyway?
Sweet. I was only able to see a part of the stream :)
Here's a code improvement that lets you use any time step size and see what happens between sample points. You can learn a lot about how DFT works this way, and it shows what a real "Fourier machine" would draw if you actually built it. The original code relies on aliasing for negative frequencies and plots an idealized path by only "hitting" the original sample points. To fix the negative frequencies issue change lines 31 & 32 to the following:
let ang = 0;
if (freq < fourierY.length/2)
ang = freq * time + phase + HALF_PI;
else
ang = -(fourierY.length - freq) * time + phase + HALF_PI;
x += radius * cos(ang);
y += radius * sin(ang);
Then you can reduce the time step size -- change the original line 50 to a small number or something like this
const dt = TWO_PI / fourierY.length / 10;
If your signal is undersampled you'll see a lot more oscillations since the DFT is only able to approximate the original signal. However the plotted line always goes through the sample points and you can increase accuracy by increasing the number of samples (signal array size). Functions containing sine waves don't need very many samples, for example this function works reasonably well for arbitrarily small time step sizes with as few as 16 samples: y = sin(x)*2 + sin(x * 3 + PI/7) for x from 0 to 2*PI.
Note there is an ambiguity at N/2 so for some signals like a single straight line odd array sizes might work better.
Thank you for this! If you like you can submit it as a community contribution on the coding train website! thecodingtrain.com/CodingChallenges/130.1-fourier-transform-drawing.html
Can you drow projection of 3d train into n dimensions greater than 3. Using this technique?
Thank you
Bob Ross of Fourier drawing
Amazing work.
Do you know how to get the x,y coordinates or the fft parameters of Catherine Zeta jones ? 😀
Wonderful
Example of SVGs path drawing using Fourier Transform : othmanelhoufi.github.io/fourier
How to transform an image into a set of points like the train he made?
There is a p5 function called text to bounds for text, I dont know about images. You can check the p5 reference for other information
How do I get an x,y array for a given drawing that can be fed to the script? Thank you!
Thinks; that is awesome :)
Upon watching 'Coding Challenge #130.1: Drawing with Fourier Transform and Epicycles' I had a few questions that I am hoping the board can answer.
1) Given all the points from the picture being drawn, couldn't the picture have been drawn just connecting the points?
2) The equation included the imaginary part 'i' and i is defined a sqrt(-1), but sqrt(-1) was not used in the algorithm, that is a little confusing.
Daniel: Always succeeds using Wikipedia
Teachers: Nooooooooo!
I loved the video so much. I download your code, so I can play a bit with different pictures. However, I have problems to extract the x and y coordinates from a continuous line drawing picture. does someone know how to extract those coordinates other than manually?
how would you do this with processing, due to the fact that Java arrays are different than javascript arrays? would you use an ArrayList?
did you find an answer?
@@Feljx_ yeah, I used arraylists
@@davidsnyder518 would ist possible for you to send me the Array Part, because i dont get it how to use
How do I generate the correct sequence of X and Y for an image? Is there any algorithm for that??
Great video sir ji
A crude attempt at reducing the number of points in the drawing (to 375 in this case) instead of skipping 7 out of 8 points which gives 625 points, while keeping most of the details of the original 5000 point drawing:
function simplifyDrawing(drawing) {
const maxHeadingDiff = 0.4;
const maxStrokeLength = 16;
let newDrawing = [];
let headingDiff = 0;
let strokeLength = 0;
let prevVec = null;
for (let i = 0; i < drawing.length -1; i++) {
let vec = createVector(drawing[i+1].x - drawing[i].x, drawing[i+1].y - drawing[i].y);
if (prevVec == null) {
newDrawing.push(drawing[0]);
} else {
headingDiff += vec.heading() - prevVec.heading();
if (abs(headingDiff) > maxHeadingDiff/8) {
strokeLength += vec.mag();
} else {
strokeLength += vec.mag()/128;
}
if (headingDiff > maxHeadingDiff || headingDiff < -maxHeadingDiff || strokeLength > maxStrokeLength) {
newDrawing.push(drawing[i+1]);
headingDiff = 0;
strokeLength = 0;
}
}
prevVec = vec;
}
if (strokeLength > 0) {
newDrawing.push(drawing[drawing.length-1]);
}
print('Simplified drawing from ' + drawing.length + ' to ' + newDrawing.length + ' points.');
return newDrawing;
}
What is this actually?
do you know ho to create an array of points in js from an random image?
Was it only me or you stoped to find the "i will refactor it later" song as well?
how do we get a continuous path for any image of interest?
There is a mirrored part of the dft result in high freq part and if I draw that out it would be distorted, why your video don't have this problem?
Nice work!
Here you used two signals x and y as pairs of the coordinates to draw it. You can also draw it with one signals e.g., y only, right?
I love this mad guy 😍
i'm not sure why but for me, only the 7th index of the transformed hard-coded square wave gives wrong values. all the other values are fine. Why does this happen?
Hi, i have learnt a lot from this channel. The content and references provided are great. Great job👍
I don't whether it's the right place to ask, but can you create a video on generating offset polygons.
I think they are great, and challenging as well. Can you some techniques for working with them.
I really appreciate
This is basically Etch-a-sketch, but cooler!!
really really amazing!!
Super 🔥🔥🔥
I like this video, earned a sub. Thanks
great video
Cool one!!!!!!
Why you need that Fourier calculations at all??? To be able to draw the logo you need to draw the points taken from the logo array input.
The same result, but without taking Fourier calculations.... This is insane. You are using your input array to perform heavy calculations to get the output which in fact is your input!
You didn't tell how can one get the array of points (at 39:08) for some other shapes.
i am searching for that too.. do u know now ??
i like how this relates to alternating current
im lost halfway in the video but i still love watching your videos, i wish i could program like you lol im so bad at this
Its an accomplishment that you got the first half though!!! Keep working at it and over time you will improve.
Can someone please explain to me why i cannot just add an arbitrary amount dt each frame?
Making it bigger is obviously a bad idea since you skip high frequencies. But even if i make it smaller than 2PI/N it creates weird shapes.
Shouldn't every value of the function f(t) we're creating be on our "train-line"?
Please enlighten me.
Great stuff btw!!!
I know this video is kind of old but, what program and how can I make an array of x and y cords of an image?
Same question here. I would love to know a software that is capable to do it.
SVG?
Did you ever find out?
This is epic! How can you make it like that, but with only one set of circles? (3:28)
If you had a link or something I have to search, that's more than enough.
I'm hoping to tackle this tomorrow.
Hey, I wonder can we Fourier transform the path of moon in space, as moon revolves around earth, earth revolves around sun and sun revolves around galaxy.??
hey i'm trying to make the one where the person draws the shape so that it keeps tracing the path but as it continues to trace it the path disapears at the start so the shape keeps being drawn without the line overlaping at all.
Fun additional challenge: have the epicycles draw their final position when the drawing is finished.
ah i saw it on reddit hahah would be cool though
you just broke my mind. wait, it`s a paradox, right?
Yo that's awesome
So basically draw in a convoluded way when it is simpler to just normalise those values and multiply them against size and add them to the xy positions wanted
😨 Amazing