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!
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 ;)
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.
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!
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
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!
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
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 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
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.
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
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.
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; }
Awesome ! Really awesome ! But how did the guy to generate the logo ???? I think he has "scanned" the logo with a vertical line, then, for all points intersecting that line, he has summed up their y coordinates returning him a value, a kind of signal value. Then he has processing that signal as any signal with an FFT giving him all the values needed for the drawing. Isn't there a more elegant way of writing the SUM function by taking advantage of Javascript ? I tried the something like the following but there's a little problem with passing parameters to the callback function for the real example of your video, I need help, but I tried this and it works fine : //this one is valid for ANY sum you want to implement const Sigma = (start, end, callback) => { sum=0; for (let n=start; n < end; n++) sum += callback(n); return sum; }; //Then, write the callback function you want, like: const f = (n, obj = {"x" : -5}) => { return Math.cos(2*Math.PI*n) * obj.x; }; //And call Sigma from the main code, passing it the f function.Well, roughly speaking of course... X = Sigma(0, N-1, f);
I don't understand why average is taken of imagery and real part at 20:07 ?? I don't see such average thing in formula mentioned on Wikipedia..! BTW thanks to you...I am learning a lot...✌️
Since you are going to use the amplitude to synthesize the signal x[n], you are actually using Equation 3 of the Wikipedia page. So you need to put the 1/N. You can do it where Daniel does it or you can actually do it later in the main program: let radius = fourierXl[i] / N; where N = fourierX.length;
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!
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
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?
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.
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?
I have a very important question, please respond. How did you extract the coordinates of paths, of the CodingTrain Logo. Please let me know Mr. Shiffman, because i'm working on somewhat similar stuff, i need this help.
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!!!
Hello. Congratulations for your video .I admire your talent to think, design and execute this. I have a big question. But let me explain with a simple example : Lets say that we have a very simple drawing that can described by this variables : (t , y) and these four points : (0 , 0) (0.1 , 1) (0.2 , 5) (0.3 , 11) (t on X axes and y on Y axes). I assumed that all the points between these 4 points are on a line between two successive points of the defined for points. I understood from your video that fft that applied on n samples (taken on n time points, lets say equal spaced), gives n complex numbers. From these n complex numbers, we can take the amplitudes and create an array of n bins. Now we can give labels to these bins, so that they correspond to frequencies, from 0 to fsampling, something like this : (0:n-1)*fresolution or (0:n-1)*(fsampling/n) or (0:n-1)/T were T is the total time of sampling. Now if we plot amplitudes of complex numbers (created by the transform), over fbins, we can see the frequency-ies from which the sampled signal have created. I can see that you separate real (a) and imaginary part (b) for each complex number, and calculate a x and a y like this : x=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a) and y=square root of (a*a + b*b) * sin (freq * time + atan2 (b,a). I assume tha freq that is the "k" in fft equation, is each of (0:n-1)*fresolution. Am i correct ? And time is each of the time points on which each sample have been taken ? (Are these x an y, on a polar system, so if the signal that we have sampled was a sine wave, they will give a cycle as a graph ?). Now my main question is this : How, from the array of the 4 given points (in the beginning of my comment) we can define epicycles, to construct the graph-shape that these points define ? I am not interesting in to draw the graph, but only to define the epicycles, and i am not interesting in a system of 2 (epicycle "generators", like in your examples [one left-down and one right-up]), but for only one. What i am thinking to do is this : for the first point (0,0) 0=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a) 0=square root of (a*a + b*b) * sin (freq * time + atan2 (b,a) for the second point (0.1 , 1) 0.1=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a) 1 =square root of (a*a + b*b) * sin (freq * time + atan2 (b,a) for the third point (0.2 , 5) 0.2=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a) 5 =square root of (a*a + b*b) * sin (freq * time + atan2 (b,a) and for the fourth point (0.3 , 11) 0.3=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a) 11 =square root of (a*a + b*b) * sin (freq * time + atan2 (b,a) I do not know if i can calculate something from the above equations .... Confused...
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
Yeah, this "Fourier machine" is really great! - And it's so inspiring how Dan explains the development of it.
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!
Jesus this is insane! I remember having to draw a image with piecewise functions in 10th grade and thought that was impressive.
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.
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!
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
most helpful source for people who don't understand math functions but understand js :D
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.
What a beautiful challenge...it's fanstastic...unbelivable to see!
I've been looking for this content for years
I took computer graphics course in my third year of cs study and all I can say is you've done some amazing
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
Shiffman was a mad scientist in a past life. Lucky for us, he's on the side of good this time around.
greatest and most complicated programe ever created by a UA-camr
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
Man i can tell you. I hate javascript and still love your channel. This is gold
"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
Im so glad that you uploud new videos! There was a little break that made me worry
What can I say Dan..... You are a legend! (And you dance exactly like me!)
Thanks
Thank you for the support!
This practical implementation is 100 x better than 10 videos dealing with the theorem.
for something so intimidating, I can't believe how quickly you reproduced that DFT algorithm
Daniel thank you!! so crazyy
Teşekkürler.
Thank you for the support!
Thank you so much Daniel!
Thanks for your help! It was always interesting how the fourier transformation works.
i have been deep in the rabbit hole after watching part one of this video
Brilliant work! One of your best ones.. Thank you :)
This was Fwording insane!
Amazing, The way you explained it, its very easy.
This was SO cool!
Beautiful - interaction between x- and y-axes. Put a similar wiper setup on the z-axis and you can make a 3D drawing.
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.
Yay new video!
it was more fun to watch the live series :D
"I made a terrible array" 😂😂
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()
Dude I loved it! ❤❤
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
Awesome, like always!
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
3:06 I’m just glad you don’t put bananas in your smoothies.
amazing!!!
"KOSMIC DUST" where the hell did you blow in from anyway?
Thanks for making this!
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!
Could someone please explain why we add phase at 25:48?
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
Thank you
Bob Ross of Fourier drawing
Thinks; that is awesome :)
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
i like how this relates to alternating current
Wonderful
Sweet. I was only able to see a part of the stream :)
Daniel: Always succeeds using Wikipedia
Teachers: Nooooooooo!
This is basically Etch-a-sketch, but cooler!!
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?
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?
I love this mad guy 😍
24:17 - what does it means "frequency = 0"? Is it possible? Can we skip that?
really really amazing!!
Cool one!!!!!!
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 like this video, earned a sub. Thanks
Great video sir ji
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
Yo that's awesome
Super 🔥🔥🔥
Amazing work.
Do you know how to get the x,y coordinates or the fft parameters of Catherine Zeta jones ? 😀
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 :(
Awesome ! Really awesome !
But how did the guy to generate the logo ????
I think he has "scanned" the logo with a vertical line, then, for all points intersecting that line, he has summed up their y coordinates returning him a value, a kind of signal value.
Then he has processing that signal as any signal with an FFT giving him all the values needed for the drawing.
Isn't there a more elegant way of writing the SUM function by taking advantage of Javascript ?
I tried the something like the following but there's a little problem with passing parameters to the callback function for the real example of your video, I need help, but I tried this and it works fine :
//this one is valid for ANY sum you want to implement
const Sigma = (start, end, callback) => {
sum=0;
for (let n=start; n < end; n++)
sum += callback(n);
return sum;
};
//Then, write the callback function you want, like:
const f = (n, obj = {"x" : -5}) => {
return Math.cos(2*Math.PI*n) * obj.x;
};
//And call Sigma from the main code, passing it the f function.Well, roughly speaking of course...
X = Sigma(0, N-1, f);
ua-cam.com/video/sp2X3uCLQsI/v-deo.html
I don't understand why average is taken of imagery and real part at 20:07 ?? I don't see such average thing in formula mentioned on Wikipedia..!
BTW thanks to you...I am learning a lot...✌️
Since you are going to use the amplitude to synthesize the signal x[n], you are actually using Equation 3 of the Wikipedia page. So you need to put the 1/N. You can do it where Daniel does it or you can actually do it later in the main program: let radius = fourierXl[i] / N; where N = fourierX.length;
I am not sure if the HALF_PI in 27:28 also has to do with that or with the fact that the Y axis points down in Processing or with both :(
@@luismolinatanco1330 ohhk got it, thanks a lot🤘
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!
How do I get an x,y array for a given drawing that can be fed to the script? Thank you!
How do I generate the correct sequence of X and Y for an image? Is there any algorithm for that??
😨 Amazing
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
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?
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.
4:03. infinitely better, that hit the mathematician in me so hard
😂
Can you drow projection of 3d train into n dimensions greater than 3. Using this technique?
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?
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
I have a very important question, please respond.
How did you extract the coordinates of paths, of the CodingTrain Logo. Please let me know Mr. Shiffman, because i'm working on somewhat similar stuff, i need this help.
You can join our Discord, it's a great place to ask coding questions !
discord.gg/hPuGy2g
- The Coding Train Team
@@TheCodingTrain thank you for your reply, i have already used a process for this.
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 ??
Great. Thx .
great video
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?
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?
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!!!
Wow
Example of SVGs path drawing using Fourier Transform : othmanelhoufi.github.io/fourier
Hello.
Congratulations for your video .I admire your talent to think, design and execute this.
I have a big question. But let me explain with a simple example :
Lets say that we have a very simple drawing that can described by this variables : (t , y) and these four points : (0 , 0) (0.1 , 1) (0.2 , 5) (0.3 , 11) (t on X axes and y on Y axes). I assumed that all the points between these 4 points are on a line between two successive points of the defined for points.
I understood from your video that fft that applied on n samples (taken on n time points, lets say equal spaced), gives n complex numbers. From these n complex numbers, we can take the amplitudes and create an array of n bins. Now we can give labels to these bins, so that they correspond to frequencies, from 0 to fsampling, something like this : (0:n-1)*fresolution or (0:n-1)*(fsampling/n) or (0:n-1)/T were T is the total time of sampling.
Now if we plot amplitudes of complex numbers (created by the transform), over fbins, we can see the frequency-ies from which the sampled signal have created.
I can see that you separate real (a) and imaginary part (b) for each complex number, and calculate a x and a y like this :
x=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a) and
y=square root of (a*a + b*b) * sin (freq * time + atan2 (b,a).
I assume tha freq that is the "k" in fft equation, is each of (0:n-1)*fresolution. Am i correct ? And time is each of the time points on which each sample have been taken ?
(Are these x an y, on a polar system, so if the signal that we have sampled was a sine wave, they will give a cycle as a graph ?).
Now my main question is this :
How, from the array of the 4 given points (in the beginning of my comment) we can define epicycles, to construct the graph-shape that these points define ?
I am not interesting in to draw the graph, but only to define the epicycles, and i am not interesting in a system of 2 (epicycle "generators", like in your examples [one left-down and one right-up]), but for only one.
What i am thinking to do is this :
for the first point (0,0)
0=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a)
0=square root of (a*a + b*b) * sin (freq * time + atan2 (b,a)
for the second point (0.1 , 1)
0.1=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a)
1 =square root of (a*a + b*b) * sin (freq * time + atan2 (b,a)
for the third point (0.2 , 5)
0.2=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a)
5 =square root of (a*a + b*b) * sin (freq * time + atan2 (b,a)
and for the fourth point (0.3 , 11)
0.3=square root of (a*a + b*b) * cos (freq * time + atan2 (b,a)
11 =square root of (a*a + b*b) * sin (freq * time + atan2 (b,a)
I do not know if i can calculate something from the above equations ....
Confused...
Anybody can help ?