[Narrator] One question that we get askedquite a lot on our site is how do we make this wave move?Now this wave is actually built with code.It isn't built with any design tools like Sketchor Figma or Photoshop or Illustrator.It's all code.Now, today we're gonna talk about how we actually make this.So we're gonna use a different tool than usual.Gonna use CodePen, I've signed up for an account already.I'm just gonna create a new pen.Now the reason I'm doing thisis because we can have this visual area down here.You have HTML, CSS and Javascriptall building up this wave.So how do we even think about making this to begin with.Now the way we're gonna do this is we're gonna usesomething called scalar vector graphic, an SVG.And we can write that in code,we do not need to use a design tool for all this.So I'm just gonna quickly, in this HTML, make an SVG.

Now, what we're gonna do inside this SVG is create a path.So path, open and close.Now we need to describe how this path works.I'm gonna do D.Now D is just the description of how the path works.This is gonna equal to D equals something.Now what we put in here is basically gonnadescribe this path.D kind of means describe.Now, SVGs have a particular way to do this.Now, what we're gonna do is use basically coordinates.So I'm gonna say something likewe're gonna move the pen tool to some coordinate.I'm gonna move it first of all, to 10 comma 10.So 10 pixels across and 10 pixels down.I'm gonna put a space, and then I'm gonna have a linethat goes to the next coordinates.Now, I'm gonna put in something like 50 comma 100.And then another space and another line.And this one is gonna go to something like 90and maybe something like 50.Now, at the bottom of the pageyou can see that it's suddenly drawn this kind of path.We start in this corner, we go down here to 50 and 100.And then we go here to 90, 50.And obviously, what we can do is actually style this up.How do we style this up?We use CSS.So the first thing I'm gonna dois make my SVG a certain height and width.So the width is gonna be 600 pixels,gonna give it a height of 400.Now, what we want to do on this pathis actually give it some style.So on this path I can say, well this is actually a stroke,now what stroke color shall we use?I'm gonna use, let's see, pie blue.So we should see...Well, there's nothing there yet.You might be able to see very faintly there is a blue linebut we need to make it a little bit thicker.Gonna add in a stroke width.This is gonna be a 10 pixel width.And then suddenly you can see this line pops in here.Now, we also want to say,well we don't want these kind of sharp corners insteadwe're gonna give it a line cap.Now, we want it to be round, so there you can seesuddenly added round corners to the start and the end point.

We also don't want this black areaso we're gonna remove that fill.So the fill of this is going to be none.So now what we have is just this kind of like check.So what we actually want to do isbuild a wave in JavaScript.Now, this basically moves every single frame.So how do we even think about doing this?What we're gonna do to start withis we're gonna build up some coordinates.So the first thing I'm gonna say is I'm gonna start off witha variable called exes, the X directionacross the bottom of the page.Now this is going to be an empty array.Now what you want to start with is basicallyone single point across all of the pixels that we want.I'm gonna make a a for loop.So for, round brackets, curly brackets.Now in my for loop, we're gonna start at zero,and then we're gonna end at maybe about 500 pixels across.And I want to increase the step by one every single time.

There we go.And I'm just gonna open these curly brackets out.And then what I'm gonna do is take every single I,so I is zero, then one, then two, then three,then four and five, all the way up 500,and add them into this Xs.So Xs, we're going to push into the I number.

Now, what I can show you very quickly isif I do a console log with the Xs in thereI can click down here and seeyou got a list of all these numbers in here.It's quite a lot, all the way up to 499.Now because we're not going straight to 500,maybe you wanna put in 500 as well,and then we can see the 500 has been added.Now, what we wanna do with this is actually,well eventually we wanna draw a line.So what we're gonna do, first of all,is we're gonna animate this.So we're gonna make a new function called animate.And a function has round bracketsand the curly brackets as well.And we're just gonna open this up.Now the next thing we're gonna do is below herewe want to run this function on load.So we're gonna run it here.So what this will do is when this file loadsit will do all the content in here.Now the reason for having these two separate thingsis I want to loop thisbecause I want to add some animation into this.So the way that we loop thisis add a request animation frame.

Now notice the capitals on A and F there,and which thing do you want to loop over,well the animation is called animate.So, I'm just gonna put animate in there.Now what we can do in here is we can just say,you know, is this a new frame every single time.So if I do just quickly console log to check if this works."Hi, this works"

So let's see the console now.Then what you'll see is this moves all the time.Basically, we have every single frame of the page.Now we don't really want to do this in the long term.What we actually want to do is draw a wave instead.How do we even think about doing this?Now at the moment, Xs is just a one dimensional array.It's just a list of numbers.But we want kind of two dimensional array.Like we got two numbers that each pointthe X direction across and the Y direction up and down.So what we want to do is, every single time we animate,we want to basically recalculate all the points on the page.So, I'm gonna make a new thing in here.I'm gonna let something equal points.Now what does this equal?Well, we wanna take every single X pointand kind of do some calculations with it.So I'm gonna take the X pointsand I'm gonna map them to something.

What do we want to map them to?Well, I'm gonna take each individual Xand turn it into something.

Now, further down here, what we're gonna do,we'll kind of add some more, kind of math in here later on.But for now, what we'll say we'll returnX and, well maybe we'll say,X as well.So the first coordinate is zero, zero.Second coordinate is one, one.Third is two, two, and so on.Now what we want to do later is actually draw that line.So we're gonna add in kind of the calculationsa little bit later but for nowwe wanna turn this into a line.Basically, this stuff up here.Beneath here, what we're gonna do is turn these pointsinto this kind of D attribute.

How do we even think about this?We're gonna let this equal a path instead.Now, we notice that this path starts with M.M is basically move into this first point.So M.

This is gonna add to all of the points in hereand they're separate by this L.So we wanna take this first pointadd a comma to it, add it to the second point,and then keep repeating ourselvesfor every single point in this list.So we're gonna take every single point in this list,and we wanna turn it into a string.So, what we're gonna do in here,we're gonna map every single point,which we'll call P, and this is gonna turn into something.And just to make this a little bit easier to readI'm gonna open up these brackets again,and I'm gonna turn it into, well it's the first point,P zero, so this one here,and this adds to a comma,because we can see here 50 comma 100.And this adds to the second coordinate, P one.Now, what about the Ls?Now this is still a list.We're taking it from two dimensionsback into a one dimensional string.But it's still a list of things.Now, we want to join them all togetherso we have this and this and this separated by this L.

So I'm gonna join all of these thing together with space L.

Now, space L because it's space L,and then space L there as well.Now this turns it into a path.Now, what we wanna do now is basically replace this path's Dwith the path we just made in JavaScript.So, in my document, in my HTML,I'm gonna use a query selector for this path tag.

Now, this path tag it's just up thereand what we're gonna do is set this attribute of Dto not be what we've got by default but now into the path.So let me just shove that there.And what we can see now is we have this long linethat goes off the page.How do you actually turn this into a wave?Well, if I put some randomness in hereit will start to flicker around.So instead of X I'll do X plus random.

And you'll see there's a little bit of movement there.But let's times that randomness by 20.And we see this really strange linebecause it's basically a random line.But we want this to not be a random lineinstead we want it to be a wave.So how do we think about that?Well, what we would want to do isturn this into a sine wave.You might remember this from trigonometry.But what we want is X and Y.Now, you might remember in kind of old school math lessons,you have Y equals sine.

X for something, like that would be an equation we use.So we're gonna use something similar in JavaScript now.So, what we're gonna do is open this up and say,well, we're gonna let Y equal,well we wanna take math sine X.

And, again we've still got this randomness in here,so what we're gonna do is change that to Y.So we've got zero, and then Y.Now, you might notice here thatwe've got this kind of tiny wave going on here.What we're gonna do instead is actually,well we wanna kind of times that by something.Like it's too small right now.It's still kind of between zero, one and minus one.So let's times that by maybe we'll do 100 times this.

Now what we're getting now is a bit of a weird line.We kind of have this really,kind of wave that goes back and forth really quickly.Basically, we're going up and down too quickly.So, let's reduce this down a little bit.So, instead of X, we're gonna divide itby something like 20.

You can start to see now we have this wavethat's kind of coming up the page like that.Now why's it off the page?Well, basically we're starting at zeroand it goes to minus 100 and then 100, then minus 100,and 100 again, because we times it by 100.But let's move that into the middle a little bit.Now, my kind of height is 400so to move it into the middle is 200.

And there we go, we've got this kind of wavethat we have on the page that moves up and down.Now if I want to kind of reduce this kind of frequency,kind of height of the wave,all I need to do is to change this number to say,50, it's a little bit tighter on the page.Maybe I'd wanna make it 20, even tighter as well.If you want to change the kind of gap between the wavesall I need to do is change this number,so maybe 10 instead.Gets a little bit tighter.Now, this doesn't move at the moment.How do we make this move?Well, I'm animating this every single time.Remember the randomness worked every single time.So what I'm going to do outside hereis I'm going to let something,we'll call it T for time equal zero.

And what we wanna do on every single frameis increase T by some number.So T is gonna increase by one.

So, first frame is gonna be zero,then one, then two, then three.How do we make this move?Well, I want X to be the thing that moves around as well.So I'm gonna do X and I'm gonna put a bracket around this.And instead I'm gonna do X plus T for time.

And all of a sudden now we kind of have this movement.And you can see this wave moving up and down.Again, I can change this time to be slowerby just changing it to .5, half the speed.Little bit slower there.I could even change this to a negative directionto make it go the other way.I'll do a minus so it's kind of moving the other way.But I've kind of got this full control.Now the code isn't particularly complicated.All we're doing is we're starting with what Xs do we want,which kind of X direction.So we want zero to 500, so zero to 500 pixels across.Then, every single time we're animatingbecause we wanna animate,we're looping over this animationbut we need to start it somewhere.Then we're taking every Xand calculating where the point should be,turning it into an HTML attribute,and then just replacing the current onewith what it should be.And then all we're doing on top of that is addinga little bit of time to move it around the page.