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!
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.
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;
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.
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!
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
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
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!
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.
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; }
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
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?
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;
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.
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...
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);
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 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?
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 you've created the most complicated etch-a-sketch of all time
XD
You are the best coding teacher ever!
Keep up the math related codes.
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
Thanks!
Thank you for the support!
This is the coolest explanation of Fourier transformation I’ve ever seen!
Jesus this is insane! I remember having to draw a image with piecewise functions in 10th grade and thought that was impressive.
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!
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.
"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
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.
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!
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
Example of SVGs path drawing using Fourier Transform : othmanelhoufi.github.io/fourier
What a beautiful challenge...it's fanstastic...unbelivable to see!
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
I took computer graphics course in my third year of cs study and all I can say is you've done some amazing
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
Im so glad that you uploud new videos! There was a little break that made me worry
Thanks
Thank you for the support!
I've been looking for this content for years
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 made a small start to one in the most recent video (part 3 of this series)!
@@TheCodingTrain Definitely watching that, you're awesome
Beautiful - interaction between x- and y-axes. Put a similar wiper setup on the z-axis and you can make a 3D drawing.
Shiffman was a mad scientist in a past life. Lucky for us, he's on the side of good this time around.
What can I say Dan..... You are a legend! (And you dance exactly like me!)
Thanks for your help! It was always interesting how the fourier transformation works.
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.
Could someone please explain why we add phase at 25:48?
Daniel thank you!! so crazyy
most helpful source for people who don't understand math functions but understand js :D
Brilliant work! One of your best ones.. Thank you :)
Thank you so much Daniel!
for something so intimidating, I can't believe how quickly you reproduced that DFT algorithm
greatest and most complicated programe ever created by a TH-camr
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()
Teşekkürler.
Thank you for the support!
Man i can tell you. I hate javascript and still love your channel. This is gold
3:06 I’m just glad you don’t put bananas in your smoothies.
This practical implementation is 100 x better than 10 videos dealing with the theorem.
it was more fun to watch the live series :D
"I made a terrible array" 😂😂
Amazing, The way you explained it, its very easy.
This was Fwording insane!
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
This was SO cool!
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
Yay new video!
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
Dude I loved it! ❤❤
amazing!!!
"KOSMIC DUST" where the hell did you blow in from anyway?
Awesome, like always!
Bob Ross of Fourier drawing
i have been deep in the rabbit hole after watching part one of this video
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!
Thanks for making this!
Was it only me or you stoped to find the "i will refactor it later" song as well?
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
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!
24:17 - what does it means "frequency = 0"? Is it possible? Can we skip that?
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.
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?
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?
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 :(
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
Daniel: Always succeeds using Wikipedia
Teachers: Nooooooooo!
Thinks; that is awesome :)
Thank you
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
Now you just have to do it with a single bunch of circles. (Nothing different between x and y)
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
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
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 ??
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?
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?
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🤘
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.
I like this video, earned a sub. Thanks
Amazing work.
Do you know how to get the x,y coordinates or the fft parameters of Catherine Zeta jones ? 😀
i like how this relates to alternating current
Can u do the cristian ilies vasile visualization of pi it's so awesome !!
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??
I love this mad guy 😍
really really amazing!!
Can you drow projection of 3d train into n dimensions greater than 3. Using this technique?
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 ?
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);
th-cam.com/video/sp2X3uCLQsI/w-d-xo.html
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 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?
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.
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?
Great video sir ji
great video
Wonderful
Hello, please can you do Einstein gravitational lensing ?
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?
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.