@@FilthyManatee In this video the Fourier series is developed in JavaScript language to be run on a normal web browser. If you want more advanced tools to work with such series you can use mathematical software (Matlab, Maple, Octave ..) they have many dedicated methods to be implemented easily. If you want to do things the hard way ;) you can download the code of the presented script in this video and try to modify the coefficients or change other parameters.
@@akremhadji7326 I wrote mine in the hard/fun way (javascript/canvas) already. I did it very differently than what was shown here, but was still able to learn a thing or two watching this video. It gave me a few things to think about and change in my code. I went right into the chain of alternating spinning vectors and drawing from the last point on the chain.
I'm Russian student and I want to express my huge thanks to The Coding Train channel! Thanks to you I have top marks in my school! The whole world loves you!!!
90% of my coding skill is from Coding Train. Everytime my friends ask me where i learned something, I always show them this channel. I love this channel so much❤️❤️
As an EET major looking back at studying how to code, I love this! We look at wave forms all day. I am going to recreate this and show my fellow electrical engineers at work.
@@CJBurkey Peak-to-Peak value isn't the coefficient or the amplitude. Peak is the absolute distance from the average of a function to either the min or max and peak-to-peak is the absolute distance from min to max. The amplitude is the peak value, and on sinusoidal functions, the peak-to-peak value is double the amplitude or peak value. This is more of the electrical engineer view of it, though
What are you calling "peak to peak value" is in fact sometimes called "peak to peak amplitude", and what you calling "amplitude" is sometimes called "semi-amplitude". It's kinda similar situation as with "Natural numbers" - the name is ambiguous and it's better to refer to it either as "Positive integers" or "Non-negative integers" depending on what exactly you mean.
After visualising this in the full complex form, it becomes pretty clear how higher frequencies enhance the "precision" of the wave position. I love how the whip rolls up into a tight ball with each rotation and each addition of epicycles.
Isn't it so satisfying to witness that sine waves are making rectangular wave , that ending of this video made my whole 2019 yr , and a good start of 2020 , thanks for this awesome video 🌷
I love the way the best and the brightest youtube channels are inspired and motivated by each other...that is a really positive environment.... Siraj,you,smarterEveryday,3 blue 1 brown..... You guys really help me and many others as well . Thank you.
Just stumbled across your channel. This is the best RUclips channel I've ever seen. So many high quality videos and such great teaching and enthusiasm. I'm just speechless!
27:18 Kinda cool illustration of aliasing that happens when the sampling rate is not a perfect multiple of the signal frequency being sampled. After increasing it to 100, sometimes you get a big spike at the corners on the square wave, sometimes not -- this is the aliasing. Sometimes you're "lucky" to sample (draw) when the tip of the pendulums are at the very top or bottom of the corner, and you get a spike. Sometimes you're "unlucky" to sample (draw) when the tip of the pendulums are not near the top or bottom, and you get a more traditional "90 degrees corner" without the spike.
28:28 I love that ending. *Has a good moral:* If you stumble over your words instead of trying to solve the confusion just give up, blow your flute, and say goodbye :D
hell, there are worst ways to distract yourself. programming fourier transformations is a decent way to waste your time (though time spent learning isn't wasted, I'm told)
Yeah, I'm supposed to study algorithms and time complexity proving. So... I guess I will fail the test, but I will know a bit more about FS. Totally worth it xD
Right? I was recently looking into graph plotting and stumbled upon this, too. And within a week there this video. Hee's tracking my browser history.... I have to go.
the slider part at the end is even more interesting as it gives even chaotic curve which when condensed give non continuous sine waves of different frequencies......*wow*
An interesting thing that was done i think in 3blue1brown was to assign random or non-regular growing or shriking radius to the circles. Theses Fourrier series create really unique and interesting patterns, some of them event ressembing famous man made paintings.
27:38 - 27:40 there is a time where the line is near horizontal facing right! pause and use the , (comma) and . (period/full stop) to go back/forward by 1 frame edit: press 27:38 then wait for it to go right edit 2: 27:55 also edit 3: also at 27:54 it's at a very high point (right side)
Fun fact at 27:20 you can see spikes on the corners of the function and this is called the Gibbs phenomenon and you can never get rid of it, due to the discontinuity of the function that you are trying to approximate.
I searched on how to get the x and y values on something that had been rotated for hours. I knew that it would be something having to do with the angle and the hypotenuse, but I never found what I was looking for. I finally got the answer by some guy on Reddit this morning. Why couldn’t I have watched this video when I really needed it?
The amplitude is from axis x to max or to min. Example if, s(t) = a sin(t), a is the amplitude. Thank you for all your videos, they are instructive and well done.
You can translate Bilimneguzellan= Bilim+ne+ guzel +lan = Science+ what+ beautiful +guy = hey guy Science is what a beautiful thing ! for pronounciation, go to google translate, select turkish , type the "Bilim ne güzel lan" and tap the voice button :)
Just to correct you there on the definition of amplitude at about 3:45 the amplitude is the height difference between the very top and the middle part of the wave (position of equilibrium) :) overall very nice video!
@@rahulbansode1537 the point that is right in between the highest peak and the lowest peak of the sine wave is called the equilibrium position. Say you have a child on a swing. The equilibrium position is the position of the child when the swing is at rest. When the child starts swinging, the highest peak (and this is relative) is when the child is on the highest position in front (positive) of the equilibrium position and the lowest peak is when the child is on the highest position behind (negative) the equilibrium position. So the amplitude (or in this case the maximum height at which the child is swinging at) is the height difference from the position of equilibrium (not swinging) to any of the maximums (either behind or in front of the swing). Sorry if this analogy is too complicated im not really good at explaining stuff.
Theres a bug though. Look at 28:11 . The spike switches positions from the top to the bottom. Also there should be two spikes (smaller than they are here) and on both the bottom and the top. So theres a mistake somewhere.
Something interesting at 27:46 when those circles come around they almost *slap* the square wave and it changes the spikes at the corner of the square wave lol
In case you are wondering, although a Fourier Series and a Fourier Transform are not the same, it is possible to devise a framework in which you can formally treat them on equal footing if you want to (you might need to look into Dirac combs and intervals of ever-increasing length). And more importantly: within the realm of numeric computation you are pretty much forced to use the *Discrete* Fourier Transform instead of the "bare" (continuous) Fourier Transform, which turns out to be essentially the same as the Fourier Series. (I'm assuming you don't make a distinction about using either trigonometric functions or complex exponential).
4:56 - Fourier Serier is like a smothie, like a video in premiere, like a song in FL, like a 3d scenerey in Blender,like a lego model, 7:53 - 10:09 - VS autocomplete feature 3:45 - Amplitude is the height difference between the very top and the middle part of the wave (position of equilibrium) :) overall very nice video! @irAdzimm by @K When you went to 100 iterations for the square wave, the overshoot spike would jump from the top of the wave to the bottom after it was already drawn. Look around @ and pay close attention to the top and bottom of the wave after they're drawn, as they move across the screen. *Related* *Projects* ruclips.net/video/CjFR4p1Mwpg/видео.html @t
very nice code, ofcourse would be nice other slider for time this is the function that I made for this timeslider = createSlider(0.001, 0.05,0.001,0.001); and then where it is time u put timeslider, the variables for this are (min,max,default,setpbystep)
Is it just me or is this pattern of circles rotating around eachother looking like a whip when it reaches a hundred. Maybe this is how a whip delivers such a fatal blow.
Do you know about the Gibbs phenomenon? It dosent matter how hard you (your computer) try you will have those "peaks" at discontinuities. Only if you add up infint waves it is theroretically converging to the rectangular function. I hope my explantion makes sense :)
Hey man! Found your channel today And I really love it! I do want to just correct a little error. There’s a difference between the Fourier TRANSFORM and the Fourier SERIES. The transform is indeed unsmoothying a smoothie so to say, but that has to do with infinity integrals in the complex plane (don’t ask). The series on the other hand takes a periodic function and approximates it with an infinite series of simple sines and cosines. Kinda like a Taylor series for periodic waves. There may be a connection between the two, I don’t deal with them a lot in my life, but just wanted to let ya know 😊 Edit: ah I see u addressed it. Thank you!
The Coding Train my pleasure! I really enjoy the channel! Will be staying glued to ur work for a good long while As a coding challenge, why not try Runge Kutta approximations of differential systems? Something very similar to what you did with Lorenz System, but much more accurate. Just maybe something to tickle your fancy
Damn, I love Python and wanna use it for work. But I don't know yet how to do all these cool stuffs in Python so I learn JS because of this channel :D Thank you, that is great!
I took a small hiatus from this channel but came back as I was bored, decided to follow this video (I usually watch). I changed the slider into an input box so you could input whatever number you'd like, and the circles would be added. I'm not sure if this is the best way to use an input box in this scenario but it does work. function setup() { createCanvas(960, 350); input = createInput(); input.position(5, 325); } function draw() { frameRate(30) background(0); translate(200, 200); let x = 0; let y = 0; let circles = 0; if (input.value() == 0) { circles = 1; } else { circles = input.value(); } for (let i = 0; i < circles; i++) { let prevx = x; let prevy = y; let n = i * 2 + 1; let radius = 50 * (4 / (n * PI)); x += radius * cos(n * time); y += radius * sin(n * time); stroke(255, 100); noFill(); ellipse(prevx, prevy, radius * 2); //fill(255); stroke(255); line(prevx, prevy, x, y); //ellipse(x, y, 8); }
What is up with all this spaghetti code? Especially with needing to futz with your loop to change the cycles you use; imagine trying to do something that doesn’t fit into a simple formula with this. This looks like the very definition of a place to use object-oriented coding. Make a class called Epicycle, which contains a radius, center, current angle, rotation speed, and a nextCycle. There is also a class function (or whatever you call it) called Advance, with one point as a parameter; it increments that circle’s angle by the speed, draws its circle and line based on the center given as a parameter and other data, then if there is a nextCircle it Advance()s that with the new endpoint as parameter, but if not it unshifts the new endpoint to the list of points to draw the curve and draws it. That way, you can just generate a bunch of Epicycles, set their parameters and set each as the nextCycle of the previous a la a linked list, and just call firstCycle.Advance(0, 0) to recursively draw everything.
3blue1brown recommended this video for his Fourier transform video
I've just watched it, it was amazing !!!
I just watched his video, then I tried coding my own Fourier series. Figured I would come on here and see what I did wrong.
@@FilthyManatee In this video the Fourier series is developed in JavaScript language to be run on a normal web browser. If you want more advanced tools to work with such series you can use mathematical software (Matlab, Maple, Octave ..) they have many dedicated methods to be implemented easily. If you want to do things the hard way ;) you can download the code of the presented script in this video and try to modify the coefficients or change other parameters.
@@akremhadji7326 I wrote mine in the hard/fun way (javascript/canvas) already. I did it very differently than what was shown here, but was still able to learn a thing or two watching this video. It gave me a few things to think about and change in my code. I went right into the chain of alternating spinning vectors and drawing from the last point on the chain.
I came here from 3 Blue 1 Brown. And, I am so happy I did! This is a great channel! :)
I'm Russian student and I want to express my huge thanks to The Coding Train channel! Thanks to you I have top marks in my school! The whole world loves you!!!
Я думал русских ент
Теперь это русский чат макс репост
Thank you!
@@maximgasai1349 Русские везде
Russians everywhere
@@sharphurt8753 у вас в школе преподают JS? Жестко.
So happy to see you and Destin interact. This is the intersection of all the best content on RUclips
who is destin?
@@blasttrash destin is the smarter every day dude
90% of my coding skill is from Coding Train.
Everytime my friends ask me where i learned something, I always show them this channel.
I love this channel so much❤️❤️
I'm 11 and I'm from Mexico, and have been programming for 3 years and Coding Train is my source of inspiration and learning.
So nice to hear! Please feel free to share anything you make 🙂
it's awesome to have such a productive hobby you get enjoyment from and willingly invest your free time. especially at such a young age. keep it up
Awesome keep it up
b0ss thats great for his age and its called a "comment", plus he just want to say thanks to Daniel
@@don1041 I learned Javascript, p5.js, HTML and CSS
dude...I am obsessed. you are literally one of the best teachers Ive ever experienced.
I am a high-school student from France and I am really happy to see how great and efficient code can be with people like you!!!
As an EET major looking back at studying how to code, I love this! We look at wave forms all day. I am going to recreate this and show my fellow electrical engineers at work.
Did you do it? Were they impressed, or at least mildly entertained?..
please we need an update
I need to more consciously appreciate the amazing, high quality content on RUclips. We are living in a beautiful time in history
@3:30 What you are calling "Amplitude" is in fact the "Peak to Peak" value. The "Amplitude" will be only half of that.
Indeed, thank you for the correction!
But the coefficient (often called amplitude) is the vertical peak to peak distance of the wave.
@@CJBurkey Peak-to-Peak value isn't the coefficient or the amplitude. Peak is the absolute distance from the average of a function to either the min or max and peak-to-peak is the absolute distance from min to max. The amplitude is the peak value, and on sinusoidal functions, the peak-to-peak value is double the amplitude or peak value.
This is more of the electrical engineer view of it, though
What are you calling "peak to peak value" is in fact sometimes called "peak to peak amplitude", and what you calling "amplitude" is sometimes called "semi-amplitude".
It's kinda similar situation as with "Natural numbers" - the name is ambiguous and it's better to refer to it either as "Positive integers" or "Non-negative integers" depending on what exactly you mean.
Wow, smarter every day in the coding train... Avengers is no longer the most ambitious crossover in the history of the world
Yeah who needs Rewind if they keep making quality crossovers like these
Fuckavengers
:p
After visualising this in the full complex form, it becomes pretty clear how higher frequencies enhance the "precision" of the wave position. I love how the whip rolls up into a tight ball with each rotation and each addition of epicycles.
I love this channel and this guy and all the videos. Thank you .
That took me -1/12 lines of code
Infinite lines is impossible.
@@sujals7108 But what if i made a code that adds a line to the js file every frame?
@@x-lightsfs5681 Then to make infinite lines, you would need an infinite number of frames, hence infinite time.
@@sujals7108 how bout making more line each frame? Then you'll get to infinity in no time :v
@@x-lightsfs5681 cant go to infinity since memory is always limited :)
Isn't it so satisfying to witness that sine waves are making rectangular wave , that ending of this video made my whole 2019 yr , and a good start of 2020 , thanks for this awesome video 🌷
I love the way the best and the brightest youtube channels are inspired and motivated by each other...that is a really positive environment.... Siraj,you,smarterEveryday,3 blue 1 brown.....
You guys really help me and many others as well .
Thank you.
Just stumbled across your channel. This is the best RUclips channel I've ever seen. So many high quality videos and such great teaching and enthusiasm. I'm just speechless!
My favourite channel... This is really great...
Fantabulous! This needs to be taught in every DSP course!
this is so freaking fantastic! I could do this all day
I really appreciate the goofs and slight logic mistakes on this one, it was almost more enlightening than if he had just done the thing
27:18 Kinda cool illustration of aliasing that happens when the sampling rate is not a perfect multiple of the signal frequency being sampled. After increasing it to 100, sometimes you get a big spike at the corners on the square wave, sometimes not -- this is the aliasing. Sometimes you're "lucky" to sample (draw) when the tip of the pendulums are at the very top or bottom of the corner, and you get a spike. Sometimes you're "unlucky" to sample (draw) when the tip of the pendulums are not near the top or bottom, and you get a more traditional "90 degrees corner" without the spike.
Yoooo nice plugging smartereveryday. I love that channel.
28:28 I love that ending. *Has a good moral:* If you stumble over your words instead of trying to solve the confusion just give up, blow your flute, and say goodbye :D
*Procrastinating intensifies*
Underrated comment lol
hah, yeah
hell, there are worst ways to distract yourself. programming fourier transformations is a decent way to waste your time (though time spent learning isn't wasted, I'm told)
you always release coding challenges just when im studying a specific topic
Yeah, I'm supposed to study algorithms and time complexity proving. So... I guess I will fail the test, but I will know a bit more about FS. Totally worth it xD
Right? I was recently looking into graph plotting and stumbled upon this, too. And within a week there this video. Hee's tracking my browser history.... I have to go.
4:12 - To play a musical note, the sine wave is made of multiple sine waves. You have the note you want, but you also have some overtones.
Awesome, interesting and instructing. Thank you for all the effort you put in the channel!
This is a good example of coding Fourier series, thanks.
the slider part at the end is even more interesting as it gives even chaotic curve which when condensed give non continuous sine waves of different frequencies......*wow*
An interesting thing that was done i think in 3blue1brown was to assign random or non-regular growing or shriking radius to the circles. Theses Fourrier series create really unique and interesting patterns, some of them event ressembing famous man made paintings.
That refactoring song though ahah! We need 10 hour version for productive coding work!
27:38 - 27:40 there is a time where the line is near horizontal facing right! pause and use the , (comma) and . (period/full stop) to go back/forward by 1 frame
edit: press 27:38 then wait for it to go right
edit 2: 27:55 also
edit 3: also at 27:54 it's at a very high point (right side)
hehe yeah even I noticed that, when all the circles are extended to the right, it essentially cuts the wave!!!
Thank you. As always, you make learning so much fun. I've never been able to visualize how Fourier creates a square wave or any wave until now.
Fun fact at 27:20 you can see spikes on the corners of the function and this is called the Gibbs phenomenon and you can never get rid of it, due to the discontinuity of the function that you are trying to approximate.
I'm native Turkish and i like how you pronounce the name of the website :D and great video, thank you
This was really fun to watch that i didn't notice the video's lengh was 30min.
Nice work really :D
LOVE The Crossover with Smarter everyday, Been getting into coding because of you, thanks!
awesome !!! The movement of all those circles radii looks so "biologic", fascinating !
Thanks!
Thank you for the support!
I like these Coding Challange videos :) trying to replicate these in python makes learning so much fun and also easier. Thank yyou!
What do you use to draw in python? Turtle?
I searched on how to get the x and y values on something that had been rotated for hours. I knew that it would be something having to do with the angle and the hypotenuse, but I never found what I was looking for. I finally got the answer by some guy on Reddit this morning. Why couldn’t I have watched this video when I really needed it?
Best analogy ever. Very smooth.
Dude, you are my new hero.
The amplitude is from axis x to max or to min. Example if, s(t) = a sin(t), a is the amplitude. Thank you for all your videos, they are instructive and well done.
Thanks for the correction!
Primer video que veo. Adoro!
You deserve so much more attention.
The end result looks like a fantastic whip. WT-TSH!!
It's wappah
1:21 Website's name actually means "science is so beautiful"
dafgjkdfjaglh
Wow awesome job it's super satisfying! :)
You can translate
Bilimneguzellan= Bilim+ne+ guzel +lan = Science+ what+ beautiful +guy = hey guy Science is what a beautiful thing !
for pronounciation,
go to google translate, select turkish , type the "Bilim ne güzel lan" and tap the voice button :)
Oh be gördüm rahatladım. Yoksa ben yazacaktım.
Iyi yetiştin
Adamsın, adam sitenin ismini okurken bunaldım...
djfsdfsjdfjdfljdfg çok iyi okumadı mı dfghjkdfghjdfghjhjdfgkdfg
Just to correct you there on the definition of amplitude at about 3:45 the amplitude is the height difference between the very top and the middle part of the wave (position of equilibrium) :) overall very nice video!
Yes indeed, thank you for pointing this out!
@@TheCodingTrain thank you as well for providing very educational (and interesting) content!
What do you mean the middle part or position of equilibrium Sorry I don't understand
@@rahulbansode1537 the point that is right in between the highest peak and the lowest peak of the sine wave is called the equilibrium position. Say you have a child on a swing. The equilibrium position is the position of the child when the swing is at rest. When the child starts swinging, the highest peak (and this is relative) is when the child is on the highest position in front (positive) of the equilibrium position and the lowest peak is when the child is on the highest position behind (negative) the equilibrium position. So the amplitude (or in this case the maximum height at which the child is swinging at) is the height difference from the position of equilibrium (not swinging) to any of the maximums (either behind or in front of the swing). Sorry if this analogy is too complicated im not really good at explaining stuff.
@@AmirAdzim that was a great explanation thank you!
Theres a bug though. Look at 28:11 . The spike switches positions from the top to the bottom. Also there should be two spikes (smaller than they are here) and on both the bottom and the top. So theres a mistake somewhere.
Something interesting at 27:46 when those circles come around they almost *slap* the square wave and it changes the spikes at the corner of the square wave lol
What a coincidence the video was suggested to me just when I was about to start Fourier series for my exam prep.👻
This video inspired me to learn p5.js .Will be my new resolution to learn p5.js !!!
In case you are wondering, although a Fourier Series and a Fourier Transform are not the same, it is possible to devise a framework in which you can formally treat them on equal footing if you want to (you might need to look into Dirac combs and intervals of ever-increasing length).
And more importantly: within the realm of numeric computation you are pretty much forced to use the *Discrete* Fourier Transform instead of the "bare" (continuous) Fourier Transform, which turns out to be essentially the same as the Fourier Series.
(I'm assuming you don't make a distinction about using either trigonometric functions or complex exponential).
Thanks for this clarification! I'm hoping to do a video on DFT next!
I was anticipating your video since you mentioned doing this in the smarter everyday video comments.
You can make
y = negative radius sin(time) ..... because y is upside in computer land.
I'm glad after a couple years of thinking about the fourier transform, I made something like what he talked about with the homer simpson being drawn,
You have a great taste on youtube channels you watch
this is EPIC , would you please continue uploading like this content? especially on fourier drwaing visuals?
yes, i'm planning to!
I’m actually so excited for this video
Amazing. Thank you for sharing your awesome skills.
Interesting to see the fractal tree branches being produced here by the circles radiuses 23:50
This guy is the smartest guy in the neighborhood - the Mr Rogers of code.
Hey, go to 3Blue1Browns Channel for a new video about Fourier Series!!
Brother, dude, friend Daniel, thank you!
Very nicely done! You could also add some p5.sound and explain vibrato, tremolo and other sound effects.....
4:56 - Fourier Serier is like a smothie, like a video in premiere, like a song in FL, like a 3d scenerey in Blender,like a lego model,
7:53 - 10:09 - VS autocomplete feature
3:45 - Amplitude is the height difference between the very top and the middle part of the wave (position of equilibrium) :) overall very nice video!
@irAdzimm
by @K
When you went to 100 iterations for the square wave, the overshoot spike would jump from the top of the wave to the bottom after it was already drawn. Look around @ and pay close attention to the top and bottom of the wave after they're drawn, as they move across the screen.
*Related* *Projects*
ruclips.net/video/CjFR4p1Mwpg/видео.html
@t
page's name is "bilim ne guzel lan" and it means in english "science is what a sweet thing buddy" :D
What I see is "The Professor" is teaching us the Fourier
very nice code, ofcourse would be nice other slider for time this is the function that I made for this timeslider = createSlider(0.001, 0.05,0.001,0.001); and then where it is time u put timeslider, the variables for this are (min,max,default,setpbystep)
Great video, loved it.
Could someone please explain to me that doing the command "unshift" is the only thing I did not understand. Thank you
15:19
3:25 - but it's _double amplitude,_ the amplitude describes radius, not diameter.
Very very useful. Thank you so much Dan
This was amazing, thanks for doing a video on this
You are the best man
Does anyone know what the html document looks like?
I like your approach to explanation - really interesting - cool video
Is it just me or is this pattern of circles rotating around eachother looking like a whip when it reaches a hundred.
Maybe this is how a whip delivers such a fatal blow.
Look like project for ultimate synthesizer this is the vco stage but the ADSR can be used in more basic and fast transformation
Do you know about the Gibbs phenomenon? It dosent matter how hard you (your computer) try you will have those "peaks" at discontinuities. Only if you add up infint waves it is theroretically converging to the rectangular function.
I hope my explantion makes sense :)
Hey man! Found your channel today And I really love it!
I do want to just correct a little error. There’s a difference between the Fourier TRANSFORM and the Fourier SERIES. The transform is indeed unsmoothying a smoothie so to say, but that has to do with infinity integrals in the complex plane (don’t ask). The series on the other hand takes a periodic function and approximates it with an infinite series of simple sines and cosines. Kinda like a Taylor series for periodic waves.
There may be a connection between the two, I don’t deal with them a lot in my life, but just wanted to let ya know 😊
Edit: ah I see u addressed it. Thank you!
Thanks for the feedback!
The Coding Train my pleasure! I really enjoy the channel! Will be staying glued to ur work for a good long while
As a coding challenge, why not try Runge Kutta approximations of differential systems? Something very similar to what you did with Lorenz System, but much more accurate. Just maybe something to tickle your fancy
Brother me Bangladeshi your good tips my head very easy work thank you so much brother
Damn, I love Python and wanna use it for work. But I don't know yet how to do all these cool stuffs in Python so I learn JS because of this channel :D Thank you, that is great!
python has p5 too
this guy is so funny i love it
I am so excited !!
at 9:50, would it make more sense to reverse the roles of x, y to make it rotate counterclockwise instead of decrementing time?
Amazing 😄
frouier seiries can represent any function because all functions contain frequencies even if they are at infinity
i come from 3b1b and i barely know coding, but i just subscribed...
I took a small hiatus from this channel but came back as I was bored, decided to follow this video (I usually watch). I changed the slider into an input box so you could input whatever number you'd like, and the circles would be added.
I'm not sure if this is the best way to use an input box in this scenario but it does work.
function setup() {
createCanvas(960, 350);
input = createInput();
input.position(5, 325);
}
function draw() {
frameRate(30)
background(0);
translate(200, 200);
let x = 0;
let y = 0;
let circles = 0;
if (input.value() == 0) {
circles = 1;
} else {
circles = input.value();
}
for (let i = 0; i < circles; i++) {
let prevx = x;
let prevy = y;
let n = i * 2 + 1;
let radius = 50 * (4 / (n * PI));
x += radius * cos(n * time);
y += radius * sin(n * time);
stroke(255, 100);
noFill();
ellipse(prevx, prevy, radius * 2);
//fill(255);
stroke(255);
line(prevx, prevy, x, y);
//ellipse(x, y, 8);
}
How did you make the html document or how did you see the code in Chrome?
my most favorite to date
28:20 Eyyy that would be based on quaternions. Fun.
I’d love to see a part 2!
What is up with all this spaghetti code? Especially with needing to futz with your loop to change the cycles you use; imagine trying to do something that doesn’t fit into a simple formula with this. This looks like the very definition of a place to use object-oriented coding. Make a class called Epicycle, which contains a radius, center, current angle, rotation speed, and a nextCycle. There is also a class function (or whatever you call it) called Advance, with one point as a parameter; it increments that circle’s angle by the speed, draws its circle and line based on the center given as a parameter and other data, then if there is a nextCircle it Advance()s that with the new endpoint as parameter, but if not it unshifts the new endpoint to the list of points to draw the curve and draws it. That way, you can just generate a bunch of Epicycles, set their parameters and set each as the nextCycle of the previous a la a linked list, and just call firstCycle.Advance(0, 0) to recursively draw everything.
0:00 Intro
7:00 Part 1 - Laying the groundwork
16:19 Part 2 - Making it modular and making the series
27:39 Outtro
Geniuss😭. Please teach us more !