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.
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
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.
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;
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.
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'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?
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
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.
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.
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 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.
Why is there a statement in the code that says "re = re / N" and "im = im / N"? Why is the average needed even if it was not obtained from the DFT equation? - me as a noob coder
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!!!
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; }
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.??
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;
Xtremely good Q. Notice he skipped every 10nth x,y coordintate? And could have skipped a few epicycles with low amplit...? I.e. u can think of this as a compressed image, that can scale, rotate, and does not pixilate.
Hello, good morning. Is it possible to create more than one canvases on a single page? Like createCanvas(w,h) createCanvas(w,h) that could result two canvases. Please tell me how I can do this if it is possible.
Cause what your basicly doing is adding a bunch of sinus signal. So it wont matter if its sinus(a) +sin(b) or sin(b)+sin(a) cause adding is commutative
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
So, I use Processing exclusively, and when I downloaded the code fro the Coding Challenge site for this lesson, I get an error that the circle () function is not found. I am using Processing 3.4 . If I use the reference page off of the SW, that does not include a circle() function reference, but if I search for Processing Circle(), I can find a page. Any idea what I an missing?
I think circle() is only available as part of Processing 3.5+. You can change it to ellipse() and add two arguments for widht and height and it should be the same!
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);
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
You are the best coding teacher ever!
Keep up the math related codes.
Thanks!
Thank you for the support!
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
So basically you've created the most complicated etch-a-sketch of all time
XD
This is the coolest explanation of Fourier transformation I’ve ever seen!
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.
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
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.
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.
"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
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.
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
I took computer graphics course in my third year of cs study and all I can say is you've done some amazing
I've been looking for this content for years
Could someone please explain why we add phase at 25:48?
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.
Thanks
Thank you for the support!
Beautiful - interaction between x- and y-axes. Put a similar wiper setup on the z-axis and you can make a 3D drawing.
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
What can I say Dan..... You are a legend! (And you dance exactly like me!)
most helpful source for people who don't understand math functions but understand js :D
greatest and most complicated programe ever created by a RUclipsr
Teşekkürler.
Thank you for the support!
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
Man i can tell you. I hate javascript and still love your channel. This is gold
Thanks for your help! It was always interesting how the fourier transformation works.
Brilliant work! One of your best ones.. Thank you :)
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.
Daniel thank you!! so crazyy
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
amazing!!!
"KOSMIC DUST" where the hell did you blow in from anyway?
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()
for something so intimidating, I can't believe how quickly you reproduced that DFT algorithm
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
Amazing, The way you explained it, its very easy.
Thank you so much Daniel!
This practical implementation is 100 x better than 10 videos dealing with the theorem.
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
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 :(
it was more fun to watch the live series :D
"I made a terrible array" 😂😂
This was SO cool!
This was Fwording insane!
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!
3:06 I’m just glad you don’t put bananas in your smoothies.
Awesome, like always!
24:17 - what does it means "frequency = 0"? Is it possible? Can we skip that?
Dude I loved it! ❤❤
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
Thanks for making this!
Can you drow projection of 3d train into n dimensions greater than 3. Using this technique?
i have been deep in the rabbit hole after watching part one of this video
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 ??
How do I get an x,y array for a given drawing that can be fed to the script? Thank you!
This is basically Etch-a-sketch, but cooler!!
Thank you
How do I generate the correct sequence of X and Y for an image? Is there any algorithm for that??
Sweet. I was only able to see a part of the stream :)
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
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?
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'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?
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
how do we get a continuous path for any image of interest?
Amazing work.
Do you know how to get the x,y coordinates or the fft parameters of Catherine Zeta jones ? 😀
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.
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?
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.
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
Can u do the cristian ilies vasile visualization of pi it's so awesome !!
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.
Why is there a statement in the code that says "re = re / N" and "im = im / N"? Why is the average needed even if it was not obtained from the DFT equation?
- me as a noob coder
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?
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!
Cool one!!!!!!
really really amazing!!
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!!!
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?
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.??
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🤘
If you have a set of x,y coordinates why you don´t just prints it? What you see if you print that set of numbers?
In a x,y coordinate system, I mean...
Xtremely good Q. Notice he skipped every 10nth x,y coordintate? And could have skipped a few epicycles with low amplit...? I.e. u can think of this as a compressed image, that can scale, rotate, and does not pixilate.
Hello, good morning. Is it possible to create more than one canvases on a single page? Like createCanvas(w,h) createCanvas(w,h) that could result two canvases. Please tell me how I can do this if it is possible.
Take a look at instance mode! ruclips.net/video/Su792jEauZg/видео.html
Where to get coordinates for our sketch?
Wonderful
Hello, please can you do Einstein gravitational lensing ?
How does it still draw the same thing after sorting? I can't wrap my head around that.
This is just a sum of all signals so the order does not matter
indeed!
Cause what your basicly doing is adding a bunch of sinus signal. So it wont matter if its sinus(a) +sin(b) or sin(b)+sin(a) cause adding is commutative
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
I like this video, earned a sub. Thanks
So, I use Processing exclusively, and when I downloaded the code fro the Coding Challenge site for this lesson, I get an error that the circle () function is not found. I am using Processing 3.4 . If I use the reference page off of the SW, that does not include a circle() function reference, but if I search for Processing Circle(), I can find a page. Any idea what I an missing?
I think circle() is only available as part of Processing 3.5+. You can change it to ellipse() and add two arguments for widht and height and it should be the same!
@@TheCodingTrain Awesome, that worked great. Thanks.
I love this mad guy 😍
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);
ruclips.net/video/sp2X3uCLQsI/видео.html
How do you find path for the drawing?
Was it only me or you stoped to find the "i will refactor it later" song as well?