In the very first video of chapter 3,
I showed this example when talking about oscillating
motion in general.
What if what I want to model is some type
of undulating wave pattern?
So by the end of this particular video,
I want to have something just like this example for you
to be able to work with.
And where I'm going to start from,
however, is this example--
the one that I ended with in the last video--
that is one single dot or circle oscillating up and down
the vertical axis of a P5 Canvas.
So how am I going to do that?
Well, if I wanted to graph a static wave, what
I would do is I would consider, in a P5 canvas,
every x pixel to be an angle value.
And then I would calculate the sine of that angle
and map that to some y-value.
And I could say begin shape, end shape, vertex, vertex, vertex,
and connect them all.
I have an example that I'll link to in the video description
that does exactly that, but I'm going
to do this in a slightly different way.
Ultimately it's the same thing in the end,
but I want to start with it in motion.
I want to think about this one dot
as an object oscillating up and down,
and then I want to make an array of those dots,
and I want them all to oscillate up and down.
Now, there's a lot of things you could do here
just by starting to vary the period
and frequency of each one of these dots moving up and down.
I don't want to just do that right now.
Let's go ahead.
I'm going to-- I'm going to do that right now.
I'm going to start by taking the single angle variable,
and make it an array called angles.
Then it will be useful for me to keep track of the size.
I'll just use a variable for the radius
of each one of those circles.
And then I need to know how many circles
fit across the entire width.
And that should be an integer value,
so I will just take off the decimal place.
Then I can write a loop to create
all the elements of the array to all the angles for every spot.
Now, instead of just drawing one circle here at x equals 0,
I want to draw many of them--
a circle for every single spot in that array of angles.
Let me comment out the incrementing the angle
for a moment right now, and I need
to figure out where is the exposition of every circle?
To do this, I'll use the map function again.
And remember, I have translated to the center here,
so I want all of the circles to be
between negative 300 and 300, because the canvas is
600 pixels wide.
Oh, and this, of course, now-- very, very important.
It's not sine of the angle anymore.
It's sine of angles index I. And now
you can see I have now drawn many circles
across the horizontal axis.
If I were to bring back incrementing the angle,
do it inside the loop-- angles index I plus equal angleV--
and the line should also correspond to x.
We can now see I have all of the circles oscillating
up and down.
They're all oscillating at exactly the same period,
with exactly the same amplitude.
As an exercise, you might start to think about, oh,
how could I vary the amplitude of each of these,
or how could I vary the period?
Well, let's vary the period, or the frequency,
just by having an array of these angleV values.
So now all of them have a completely random value.
So they're all offset, just with no logic to them whatsoever.
I could do something like say, oh, let me say i divided by 10.
Well, that's too much. i divided by 100.
Now you could see their periods have a relative relationship
to each other.
They're faster on the right side, slower on the left.
So we'll get out of--
they'll end up with these different patterns.
You could see the one on the left
is always just never changing, because I started at 0,
so it probably wouldn't make sense for me to say,
oh, this is 0.01 plus i divided by 100.
So that one would, at the very least, move.
So again, I've done something different than what I actually
intended to do when I started making this video tutorial,
and you could probably pause here and start
to play with this idea and think about different ways
that you might visualize this.
But I want to get back to talking
about the reason why I was here in the first place, which
is phase.
I want to see this graph like a sine wave.
The way to do that is simply have a different starting angle
for each one of these dots.
For example, if this dot starts at angle 0, then its sine of 0
is in the 0 position.
Then this one might be a slightly higher angle--
0.05, 0.1, 0.2.
We'll start to see that graph play out.
Maybe I want to see the full sine wave
and make sure the starting angle here is 0 and the starting
angle for this one is 2 pi.
Let's see what happens when I do that.
First thing first-- let me take this out
so that now we're back to having just the circles
flat along the horizontal axis.
I want to give them a different starting angle.
Where is that starting angle?
What is that phase?
All of the starting angles are 0.
So I could say map i, which goes from 0 to total,
to between 0 and 2 pi.
And now you can see there is the graph of this sine function--
one full cycle through the wave, from 0-- and for some reason,
the way that I've drawn this, I'm missing the last one.
So I might do something like add one extra one here,
and we can see I have that last one filled
in on the edge of the screen now.
Let me change the way I'm rendering
this to be a bit more clear.
I'm going to remove the line, and I'm going
to make R quite a bit smaller.
And we can see there are all the dots, now,
graphing that particular sine wave.
If I wanted a higher frequency wave,
if I wanted to see the sine wave cycled through twice,
I could say, let's look at all the angles
from left to right between 0 and 4 pi, or 2 times 2 pi.
And now we can see there's two cycles of the wave.
Now, do I want this to be more like a graph?
There's a lot of space between these dots.
So here's where I could come down here and change
the way I'm rendering it, and I could say,
beginShape endShape, and vertex at x comma y.
Interestingly enough, it's got a fill to it,
so it's actually trying to make it a shape where it actually
fills things in.
I'm going to just take that out for right now.
I could also comment out the circle, and there we go.
Now, what happens if I go back to this idea of angular
velocity?
What happens if I just add that back in?
Whoa, so it's doing some crazy stuff, because again, I've
got this weird, crazy pattern of all of the dots also having
a different period and frequency.
So I love this strange, unexpected artifact I got here.
Apologies for the flashing.
Now I can go back and add in the idea
of incrementing each angle for each position as well.
Now, I encourage you to try variable increment values,
like I had before, and get all sorts of strange artifacts
and patterns.
But I'm going to simplify things and just
have them move together, which ultimately ends
up giving the quality that makes it look like I am panning
across the wave, and sometimes sliding the wave across--
which is ultimately what I'm doing.
They're each starting at a different angle,
and each angle changes.
It's like shifting the thing.
If I go back to rendering these as circles, we can see,
once again, it looks as if these circles are moving
along this path, but really, each one
is just moving up and down at exactly the same oscillation,
with a slight phase offset from the one next to it.
So what might you do with this?
Hopefully this is sparking some ideas
in your head about what kinds of visual patterns
you might try with different shapes and colors
and periods and ways of visualizing the wave patterns.
Certainly, could you create this wave pattern
around the perimeter of the circle,
in the way that I showed you how to use polar coordinates,
to draw your own circular shape?
Could you offset the various vertices of that circle
according to a sine wave?
The other thing which is less of a creative output idea
is that this isn't going to be super easy for me
to work with going forward.
I might want to do something where
I consider each one of these dots an object.
So maybe it stores position and angle and angle increment--
I'm not sure-- to package all of the idea of one
of these moving up and down into an object.
That's something that you might try to do.
Or perhaps the wave itself--
what is the starting angle?
What is the ending angle?
What is the phase offset?
What is the period?
What is the amplitude?
Whatever the properties are of a wave itself,
could you make a wave class?
And then you could make a bunch of different waves
simultaneously in the canvas, just by making them as objects.
So I'll try to create some example solutions
to those exercise ideas.
You'll find those linked in the video's description.
But in the next video, what I actually want to demonstrate
is how to take this idea and turn it
into something like this.
What this is is not just the result of graphing one wave,
but it's taking multiple sine waves, possibly cosine waves,
with different periods and different amplitudes,
and adding them together-- summing
them to get one resulting wave, an additive wave.
So that'll be the topic of the next video.
I'll take this example that we just did
and look at how to add multiple waves together
to change to make a more dynamic pattern.
As always, if you've made something from this video,
check the link in the video's description, where
you can share the results of what you made on The Coding
Train website, OK?
See in the next video, I hope.
Good bye!