3.7: Additive Waves - The Nature of Code
Vložit
- čas přidán 11. 07. 2024
- This video builds on the previous sine wave visualization in p5.js example. Here, I build a Wave class with variables for period, amplitude, and phase, and demonstrate how to add multiple wave patterns together! Code: thecodingtrain.com/tracks/the...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • 3.6 Graphing Sine Wave...
🎥 All videos: • The Nature of Code 2
Videos:
🎥 Simple Pendulum Simulation: • Coding Challenge #159:...
Timestamps:
0:00 Welcome back!
0:26 How do we make a wave class?
2:02 The formula we'll use for a wave.
4:53 Let's make a wave class.
7:33 Why did we spend the time to make the wave class?
8:08 Adding waves together!
9:39 Let's animate it!
10:40 A couple small improvements.
11:21 I hope you try some of these ideas!
11:43 What's next?
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
✪ Nebula: go.nebula.tv/codingtrain
💖 Membership: czcams.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#forbeginners #javascript #p5js
I just wanted to say, that your videos are the best content I have ever found generally, not just specifically on subjects that you present. I have just started to watch this video and realised that it is one of a few things that make me happy, motivated and sane these days. I assume it is the same for many others and wanted to thank you for your exceptional work.
Hi! I've been binge watching this series and I love it! Keep up the good work!
this is shows the fourier transform. good work, tu. Наглядно показывает преобразование Фурье. Хорошая работа, спасибо.
I love he’s video, always clear to understand. I hope everyone is like him.
Very interesting and with a minimal amount of code, it's amazing
thanks so much for coming back with the edited versions!!!
I read "addictive waves" at first
I like it
wait... oooh
A common naming approach I see for methods such as your evaluate(x) is something like sample(time or position).
Honestly, in the previous video I had trouble getting a good grasp at what amplitude, period and phase actually affected.
It was much better in this video. I think making a class was very helpful. As well as changing the values over time.
absolutely love this! Thank you!
Your an amazing teacher Dan!
excellent!! enjoy watching your program!!
The information is helpful and interesting 😊 Thank you🕊
Goldstar to the editor for speedup during writing and then some.
Thx, very useful content!
Very good your video. Thanks a lot 😄👍
Great content, thanks for sharing it!
You are the best Dan
"I did signal processing on Processing so you can signal while you're Processing."
good one 🥰
Hi! Loved the video. But I'd suggest that a better formula to represent points of a moving wave instead of
y = sin(phase + 2pi*x/T)* amp
is
y = amp*sin(phase + 2*pi*(t/T - x/lambda)),
where lambda is the wave length.
The formula you used is more adequate to model a stationary wave (not exactly this formula, but something like that). The way you coded, adding the same increment to the phase made all the waves have the same frequency/period, and the value you intended to be the period is actually the wave length.
Another thing you can look at now that you have these sine functions that can all add together to create other functions using Fourier series sums.
Very interesting.
You should be able to get a speed increase by having each wave compute two vectors, the first one is the sine and cosine of the wave at a particular X coordinate, and the second one is the amount of change from an X of 0 to an X of 1, then you could have another function called Iterate which will use a rotation matrix to rotate the first vector by the second one, this way you only have to compute the trigonometry once.
Nice thanks
Dan I hope you break down how to code the Gerstner / trochoidal wave some day. Cheers
Good stuff
sir outstanding work crystal clear explanation just one request can you make lecture series on machine learning by using python really appreciate your work thankyou keep up the great work
🌊 physics! 😍
TWO_PI * x/period can be a separate function named frequency, if we want to make a very object-oriented version of the whole program
I absolutely love your videos and I think you're an excellent teacher!
Please correct me if I'm wrong, but I think there's a mistake in your equation.
Suppose this equation: y = 10sin(2pi*x/5 + 1)
The amplitude is 10 but the phase shift is not actually 1 to the left, it's really 1/(2pi/5) = 5/2pi to the left.
In order for the phase shift to be 1 to the left the equation needs to be: y = 10 sin((2pi/5)*( x + 1)) where the "period part" is factored in the brackets.
This because the general equation is y = a sin(k(x + d)) + c where k is controlling your period and d is the phase shift. If the "k" isn't factored from the x AND the d then the phase shift will be incorrect.
That should make your equation y = sin((TWO_PI/this.period)*(x + this.phase))*amplitude in order for it to have the correct phase shift.
Again, please correct me if I'm wrong.
I don't know if it's too advanced or not something that's in your roadmap but a video on soft bodies like cells squishing together, might be cool/useful, probably done with springs?
How did the CZcams algorithm know to show me this video after I browsed the Wikipedia article on standing waves (in physics) yesterday? But I'm really glad.
The sketch linked in the description has a comment "CORRECTION? phase should change relative to period?". In my opinion, yes it should (but don't forget the "this."). That will make the additive waveform propagate across the window without changing, showing its true unchanging shape. If the phases are not adjusted for the period, the shape changes over time. That isn't necessarily a bad thing; giving the different waves different phase adjustments produces very interesting results! But it isn't a static additive wave.
I dont get how exactly the phase changes in this particular code. Seems like it calculates phase shift for each wave from waves but it should calculate phase shift only for steps of x. Isn't it?
Swoeshhhhhh
Good place to use reduce() 😉
I want to meet you
What would this sound like if you fed it in as the frequency of a pulse?
Idea for a coding challenge/cabana episode: Additive waves + polar coordinates = guilloché generator
Niiiiiiiiiiiceeeeeee
These waves seems a dancing DNA
Small correction at 4:51: It would be example (- Phase). (Phase +) example, would shift the wave to the left. In that X approaching (PI/2)/600, Y would be (PI)/600 since (2X)/600.
Truthfully you don't have phase specified so hey it don't matter. Phase could be normally -PI/4 in your graph
I originally ignored the period because hey it's usually baked in but I know someone would get me on it
Is this channel specialized in javascript, and some libraries of it, like p5?
If we are changing only the phase of all the waves by the same amount (not the amplitude and period), then why doesn't the function just translate?
Wow this is awesome. I wonder if you could show how to translate this linear wave into a circle (kinda like Westworld's Rehoboam)
change the period from 2*PI . 2*PI is what makes it that shape. A circle is 4*PI so altering the code to use 4*PI will make it a circle.
Hey @@Bm23CC, thanks for the answer. I gave it a try but it didn't work. I guess it doesn't only involve changing the wave update function but also the drawing process itself, because the update function y = sin(x) is linear, but we need polar coordinates to transform the line into a circle. I'm trying some other stuff. I'll let you know if I have any progress
Hi! I'd like to post an update! I managed to make it like I wanted (somewhat an 1.0 version lol). I used the polar equation taught in another video (x = r * sin(theta) or x = r * cos(theta)) to calculate the points in the circle. Then I add to r the result of the evaluate function of the waves minus the last result of the evaluate function of the waves.
Here's the repository with (in Processing) with a Demo visualization: github.com/rafaelchampion/Rehoboam
My next steps now are modifying the waves in time, create some "divergences" and changing the dots colors according to the height
Google regular to polar coordinates matrices and follow the math
so early😍😍
its probably better to use -phase instead of +phase
@Chris Sears 😇 i still remembered from like 5 years ago
Can you or someone here help me out quickly, I used ur space invaders video as a base for my school project, the only thing I want different is that when I hit the flower it disappears just like the droplets, how can I achieve this?
BZZZ!
How is that? Haven't charged it yet. Doesn't have fastcharge.
Hi sir
I wish to see if I could
30 sec ago
Who cares and who asked
Я один тут русский , то что он говорит не понимаю ,но очень интересно
On what language he program
He's using Javascript, and a framework called p5.js
@@APaleDot thx
Aw
I guess I'm homeschooled via phone
Please reply me
Wish I was cuter
I like your videos, but the way you're using 'period' to describe 'wavelength' is bothering me so much right now.
I love how these videos have decreasing views xD
(Wait, this one HAS good views xD)