Hi, welcome to this new video. So we have learned how to use for loops, the iteration to create primitives
like boxes in the screen. But we also know that there are certain
primitives like the polylines that require a multiplicity of vertices, right. So it's possible also to use for
loops to create those vertices as we go. So let's look at an example. As you know, the polyline would
require a series of points. So what we could actually do
is use the beginShape and the endShape surrounding a for
loop structure in this case. And then run a for loop that would
actually create the vertices. So in this example we are doing a for
loop that goes from 0 to 4, right? And we are creating the x coordinate
to be equal to i times 10, meaning the iterator value
that goes from 0, 1, 2, 3. And we're using that to
feed into the vertex. So we ultimately repeat that particular
line of code vertex four times and we end up with this result, right? (0,0), (10,0), (20,0), (30,0). It's still a straight line. And if you actually wouldn't see the dots,
as we're kind of graphically showing here, you wouldn't perhaps see
that it's a polyline. It's a line that has different vertices. But we could actually use a mathematical
function to start creating much more complex lines using this technique. So that's what we're
going to try to do today. We're going to be using
a simple sine wave function. A sine wave is a mathematical curve
that describes an oscillation. And if we actually use the iterator value, the i to kind of multiply and
use the sine wave function. We could actually start making
our polyline to start kind of describing curvature. There's a lot more to read and
understand about sine waves, we're going to provide you
documentation with that. But for now we're going to really try
to leverage the power of a sine wave to build up this principle of
how we can actually use a for loop to create a kind
of a complex polyline. So let's jump into processing and
see how would that play out. So here we are,
we have the boilerplate code that we will be using
in the future as well. But let's just start by
doing our beginShape. And what I like doing is
kind of always remembering that whenever I begin shape,
I need to end the shape. So this region here is the region in which
we will be describing a shape, right. And traditionally, if you remember,
we would do the function vertex. And we would do something like,
I don't know, (0,0). And manually be like maybe
copy pasting this line and changing the vertex positions. And we could actually
create a piece of geometry, any arbitrary geometry that we want. But let's just do that in a for
loop this time. So for i in range (0, 50) right, we have 50 iterations and we're going to indent the vertex line,
right. And let's start with something simple. Let's just start first
by identifying an x. So the x coordinate,
we could say it's going to be I. If we would just use i, we would get
a line that goes 0 up to 50, right. And because we have a screen, if you
remember, the canvas goes from 0 to 1200. So maybe we can multiply this value,
right, let's do multiply it by 20, right? So that we actually end up with
a series of vertice points that are slightly more distributed
across our canvas, right. And let's use that x here. And the second, the y at the moment,
let's just use a simple value of maybe 300,
which will be in the middle of the screen. If you remember that our canvas is 600
in height, 300 would be the middle. And let's just put that y here. I would also like to make sure that we, let's just draw that
line with some weight. Let's just give it some weight. So maybe here. We're going to give it a strong stroke weight of 1 and stroke color of white. So let's just test that. What we have so far is in fact working. And we have here a straight line, right. Not very exciting. How do we know if in fact
that there's vertices there? I like adding to this, just for reference. Right, a point. Let's just do a point. It uses the same coordinate, the difference between the vertex and
the point. The point is an isolated primitive, right. It's a piece of geometry that doesn't
create any relationship with another. A vertex is part of a line, right. So in this case x and y,
we can use the same coordinates to test. And the only thing I would add
here is that whenever I do this stroke of the point, I would like
it to be a little bit thicker. Sorry, stroke weight 5. Just to make sure that these points. And you can see, we cannot see
the point because the line became. And this is an interesting little kind
of graphical bag that we're seeing here. So the line became thick as well. So we cannot read the points, right. But I would like to identify that the line
is quite thin with a line weight of one, and the point is slightly thicker. So how do we do that? And why is the case that this
point ends up transferring its information to the line? Well, if you think about it,
once we enter the loop, we basically override the information
that we did outside the loop as much as we started the line thinking we're
going to use a stroke weight of one. Once we enter the loop, this information
becomes the dominant one, right. So let's imagine that for a moment we
want to go to stroke weight of five and do this point, but
then as soon as we finish that point, we're going to return to
a stroke weight of one. Therefore we're going to be drawing that
line always with a stroke weight of 1, but the points with a stroke weight of 5. Let's see if this works, right? And you can see that now we have a little
bit more clarity of what's going on, right. We do have a polyline constructed by
a series of points, all of them straight. And we're going to start adding a little
bit of mathematical information to design. Here's kind of an important note. We are going to introduce
a sine wave function, which is one way to starting to kind
of manipulate geometry and form. This is not the only paradigm of how you
would actually design using codem right. Like using mathematical functions
can get you to interesting places. There's kind of more generative
approaches to design. There's kind of different
attitudes of how do you obtain design kind of primitives or ideas. And this kind of path of math, certainly
it's a powerful one, but not the only one. So if this is not necessarily
what you're into and you feel like I need to kind of go
into the territory of math a lot. There are other alternatives, right, like
you might be able to kind of gravitate to just more procedural geometry that
is created through generative means. And we're going to be doing a lot more
of that in MOOC two, course two and course three. But for now,
I think the sine wave is a very good introductory mathematical function
that could be leveraged for creating these kind of
oscillating patterns. And it certainly has a lot of power. So let's create some variables,
maybe even before this beginShape. What are the variables that we will
need for our wave or for our sine wave? So let's start with wavelength. And I'm going to use a value of 30. I'm also going to need an amplitude. And I'm going to invite you to play
with these variables because all of them will change the way
the curve looks, right. And finally I'm going to do an offset. Yeah, let's do an offset of 300. The offset is just going to push
this curve to be in the place of the screen that we want, right. And here,
instead of using a 300 value for y, the only thing that we're going
to change here is the y, right. Because the x, it's basically,
the points are going to gradually be moving a little bit
further to the right in x. But the only thing that we're
going to be changing is how high this point would be, right. So let's just use amplitude. And here I would always
invite you to kind of, in case you misspelled,
I do that all the time. I need to make sure that I'm
copying my variables correctly by double-clicking on them. And here we're going to use sine,
which is a mathematical inbuilt function. So sine refers to a mathematical
equation for sine wave. And here what we actually need. I actually forgot one final variable, which is a kind of important one,
which is the frequency. So the frequency,
the way sine waves actually work, they have to do with the radius of circle. For that,
we would actually need to use PI. So we're going to use an inbuilt variable,
which is called TWO_PI. And you'll see it turns blue
because it's an inbuilt number. You don't want to be typing the kind
of decimal places of PI and kind of duplicating that. But certainly we can use that
inbuilt function to actually get the right frequency, and we're going to
divide that by the wavelength, right. So, again, we're going to provide
you more documentation on sine waves in one of our notebooks. So that you could understand how do
you actually construct the sine wave. And how do you can actually control
it with more precision, right. But let's go here and
use the sine wave function. That will require the frequency times i. And this is kind of the most
important part, right. This sine wave value will be the same. If you feed a particular number, you would
always get a particular result, right. But if you're feeding a number
that changes, in this case I, you will see that the change will
kind of be this oscillation. And that would be enough, normally that
would be enough to calculate this value. But we do want to push that to
the particular place in the screen that we want, which is defined by the offset. If you remember, we're not drawing
the line all the way in zero, but rather in the middle of the screen. Therefore, our offset will push
the sine wave to that location, right. So let's just see what we actually have. So we actually do have this sine wave, but we have this kind of very
kind of weird looking feel. So one of the things that I would like to
add as a style a little bit here further, is say no feel. And we can evaluate, right. As you can see,
we have design wave information. Let's just play a little bit
with the values that we created. What happens if we change
the wavelength to ten? You can see that the wavelength,
it's now much shorter. And it doesn't have too much
resolution because the resolution is dictated for
how fast we are moving in x, right. We are actually kind of
capturing 50 points. We could actually do. We can play with how fast the x
variable moves and how many iterations. If you want to do 60, you'll see that we actually get further. We kind of repeat the pattern,
but we actually get more points. But most importantly,
let's just change this value. Let's say we do 50 here for
the wavelength. You'll see that we get
the wavelength is a lot smoother. Therefore, our points spacing
is capable to register what happens if we change the amplitude. So let's change that to 50. You see that we get, like,
a smoother curve, right. And if you do that 200, right. So the wavelength, it will determine
from the beginning to the point in which it kind of starts
repeating itself, right. How long is that distance? The amplitude is how height, the height
of the curve, how much it would be. And the offset is basically how many
pixels down are we pushing this curve to start, right. Otherwise, we would actually
have it all the way up here, and we only would see the bottom
part of the curve. So you have a little bit of
a control panel situation. And you'll see this happening quite a bit
in the design that you will do with your code, where you actually
create a handful of variables. Hopefully the minimum amount of variables
that will be able to control a particular design and
gradually start playing with those. Eventually, you could create interfaces
where you could have maybe sliders. Or different forms by which you could
actually manipulate those variables in real time and see the transformation
of that curve in real time as well. Okay, before we wrap up, I just realized
that we had a typo here, amplitude. And forgive me, sometimes just mistakes,
but this is why it was important to kind of double-click on the variable
because I was spelling it incorrectly. And as you can see,
we can actually correct that here. The code will still function,
but for the sake of clarity, make sure that you do that
correction yourself as well. Yeah, so that's it for this one,
and I'll see you in the next video.