1 00:00:05,955 --> 00:00:07,818 Hi, welcome to this new video. 2 00:00:07,818 --> 00:00:10,724 So we have learned how to use for loops, 3 00:00:10,724 --> 00:00:15,446 the iteration to create primitives like boxes in the screen. 4 00:00:15,446 --> 00:00:19,927 But we also know that there are certain primitives like the polylines that 5 00:00:19,927 --> 00:00:23,334 require a multiplicity of vertices, right. 6 00:00:23,334 --> 00:00:29,710 So it's possible also to use for loops to create those vertices as we go. 7 00:00:29,710 --> 00:00:31,959 So let's look at an example. 8 00:00:31,959 --> 00:00:36,160 As you know, the polyline would require a series of points. 9 00:00:36,160 --> 00:00:40,454 So what we could actually do is use the beginShape and 10 00:00:40,454 --> 00:00:45,440 the endShape surrounding a for loop structure in this case. 11 00:00:45,440 --> 00:00:49,662 And then run a for loop that would actually create the vertices. 12 00:00:49,662 --> 00:00:56,925 So in this example we are doing a for loop that goes from 0 to 4, right? 13 00:00:56,925 --> 00:01:01,378 And we are creating the x coordinate to be equal to i times 10, 14 00:01:01,378 --> 00:01:05,672 meaning the iterator value that goes from 0, 1, 2, 3. 15 00:01:05,672 --> 00:01:08,416 And we're using that to feed into the vertex. 16 00:01:08,416 --> 00:01:14,479 So we ultimately repeat that particular line of code vertex four times and 17 00:01:14,479 --> 00:01:17,431 we end up with this result, right? 18 00:01:17,431 --> 00:01:21,925 (0,0), (10,0), (20,0), (30,0). 19 00:01:21,925 --> 00:01:24,233 It's still a straight line. 20 00:01:24,233 --> 00:01:29,039 And if you actually wouldn't see the dots, as we're kind of graphically showing here, 21 00:01:29,039 --> 00:01:31,744 you wouldn't perhaps see that it's a polyline. 22 00:01:31,744 --> 00:01:35,343 It's a line that has different vertices. 23 00:01:35,343 --> 00:01:40,116 But we could actually use a mathematical function to start creating much 24 00:01:40,116 --> 00:01:42,944 more complex lines using this technique. 25 00:01:42,944 --> 00:01:45,190 So that's what we're going to try to do today. 26 00:01:45,190 --> 00:01:48,294 We're going to be using a simple sine wave function. 27 00:01:48,294 --> 00:01:53,946 A sine wave is a mathematical curve that describes an oscillation. 28 00:01:53,946 --> 00:01:57,196 And if we actually use the iterator value, 29 00:01:57,196 --> 00:02:01,448 the i to kind of multiply and use the sine wave function. 30 00:02:01,448 --> 00:02:05,851 We could actually start making our polyline to start kind of 31 00:02:05,851 --> 00:02:07,708 describing curvature. 32 00:02:07,708 --> 00:02:10,297 There's a lot more to read and understand about sine waves, 33 00:02:10,297 --> 00:02:12,652 we're going to provide you documentation with that. 34 00:02:12,652 --> 00:02:17,418 But for now we're going to really try to leverage the power of a sine wave to 35 00:02:17,418 --> 00:02:20,992 build up this principle of how we can actually use a for 36 00:02:20,992 --> 00:02:24,130 loop to create a kind of a complex polyline. 37 00:02:24,130 --> 00:02:28,674 So let's jump into processing and see how would that play out. 38 00:02:28,674 --> 00:02:33,659 So here we are, we have the boilerplate code 39 00:02:33,659 --> 00:02:38,528 that we will be using in the future as well. 40 00:02:38,528 --> 00:02:43,301 But let's just start by doing our beginShape. 41 00:02:49,089 --> 00:02:54,937 And what I like doing is kind of always remembering 42 00:02:54,937 --> 00:03:01,211 that whenever I begin shape, I need to end the shape. 43 00:03:01,211 --> 00:03:07,755 So this region here is the region in which we will be describing a shape, right. 44 00:03:07,755 --> 00:03:13,340 And traditionally, if you remember, we would do the function vertex. 45 00:03:13,340 --> 00:03:17,904 And we would do something like, I don't know, (0,0). 46 00:03:17,904 --> 00:03:21,383 And manually be like maybe copy pasting this line and 47 00:03:21,383 --> 00:03:23,607 changing the vertex positions. 48 00:03:23,607 --> 00:03:27,078 And we could actually create a piece of geometry, 49 00:03:27,078 --> 00:03:29,733 any arbitrary geometry that we want. 50 00:03:29,733 --> 00:03:33,436 But let's just do that in a for loop this time. 51 00:03:33,436 --> 00:03:39,488 So for i in range (0, 50) right, 52 00:03:39,488 --> 00:03:43,839 we have 50 iterations and 53 00:03:43,839 --> 00:03:51,230 we're going to indent the vertex line, right. 54 00:03:51,230 --> 00:03:52,273 And let's start with something simple. 55 00:03:52,273 --> 00:03:56,091 Let's just start first by identifying an x. 56 00:03:56,091 --> 00:03:59,808 So the x coordinate, we could say it's going to be I. 57 00:03:59,808 --> 00:04:07,219 If we would just use i, we would get a line that goes 0 up to 50, right. 58 00:04:07,219 --> 00:04:13,366 And because we have a screen, if you remember, the canvas goes from 0 to 1200. 59 00:04:13,366 --> 00:04:20,019 So maybe we can multiply this value, right, let's do multiply it by 20, right? 60 00:04:20,019 --> 00:04:25,200 So that we actually end up with a series of vertice points 61 00:04:25,200 --> 00:04:31,284 that are slightly more distributed across our canvas, right. 62 00:04:31,284 --> 00:04:34,884 And let's use that x here. 63 00:04:34,884 --> 00:04:39,682 And the second, the y at the moment, let's just use a simple 64 00:04:39,682 --> 00:04:44,870 value of maybe 300, which will be in the middle of the screen. 65 00:04:44,870 --> 00:04:50,165 If you remember that our canvas is 600 in height, 300 would be the middle. 66 00:04:50,165 --> 00:04:51,984 And let's just put that y here. 67 00:04:54,084 --> 00:04:59,092 I would also like to make sure that we, 68 00:04:59,092 --> 00:05:05,150 let's just draw that line with some weight. 69 00:05:05,150 --> 00:05:06,949 Let's just give it some weight. 70 00:05:06,949 --> 00:05:09,121 So maybe here. 71 00:05:16,316 --> 00:05:21,172 We're going to give it a strong stroke 72 00:05:21,172 --> 00:05:26,194 weight of 1 and stroke color of white. 73 00:05:29,334 --> 00:05:31,510 So let's just test that. 74 00:05:31,510 --> 00:05:34,727 What we have so far is in fact working. 75 00:05:34,727 --> 00:05:38,312 And we have here a straight line, right. 76 00:05:38,312 --> 00:05:39,583 Not very exciting. 77 00:05:39,583 --> 00:05:43,694 How do we know if in fact that there's vertices there? 78 00:05:43,694 --> 00:05:47,302 I like adding to this, just for reference. 79 00:05:47,302 --> 00:05:49,966 Right, a point. 80 00:05:49,966 --> 00:05:51,114 Let's just do a point. 81 00:05:52,314 --> 00:05:53,440 It uses the same coordinate, 82 00:05:53,440 --> 00:05:55,386 the difference between the vertex and the point. 83 00:05:55,386 --> 00:05:57,715 The point is an isolated primitive, right. 84 00:05:57,715 --> 00:06:02,354 It's a piece of geometry that doesn't create any relationship with another. 85 00:06:02,354 --> 00:06:05,914 A vertex is part of a line, right. 86 00:06:05,914 --> 00:06:09,978 So in this case x and y, we can use the same coordinates to test. 87 00:06:09,978 --> 00:06:14,734 And the only thing I would add here is that whenever I do this 88 00:06:14,734 --> 00:06:19,893 stroke of the point, I would like it to be a little bit thicker. 89 00:06:19,893 --> 00:06:25,101 Sorry, stroke weight 5. 90 00:06:28,183 --> 00:06:31,410 Just to make sure that these points. 91 00:06:31,410 --> 00:06:35,310 And you can see, we cannot see the point because the line became. 92 00:06:35,310 --> 00:06:39,055 And this is an interesting little kind of graphical bag that we're seeing here. 93 00:06:39,055 --> 00:06:41,880 So the line became thick as well. 94 00:06:41,880 --> 00:06:43,296 So we cannot read the points, right. 95 00:06:43,296 --> 00:06:48,258 But I would like to identify that the line is quite thin with a line weight of one, 96 00:06:48,258 --> 00:06:50,600 and the point is slightly thicker. 97 00:06:50,600 --> 00:06:51,400 So how do we do that? 98 00:06:51,400 --> 00:06:55,567 And why is the case that this point ends up transferring its 99 00:06:55,567 --> 00:06:57,616 information to the line? 100 00:06:57,616 --> 00:07:01,092 Well, if you think about it, once we enter the loop, 101 00:07:01,092 --> 00:07:06,041 we basically override the information that we did outside the loop as much as 102 00:07:06,041 --> 00:07:10,848 we started the line thinking we're going to use a stroke weight of one. 103 00:07:10,848 --> 00:07:15,358 Once we enter the loop, this information becomes the dominant one, right. 104 00:07:15,358 --> 00:07:20,085 So let's imagine that for a moment we want to go to stroke weight of five and 105 00:07:20,085 --> 00:07:23,668 do this point, but then as soon as we finish that point, 106 00:07:23,668 --> 00:07:26,820 we're going to return to a stroke weight of one. 107 00:07:26,820 --> 00:07:31,743 Therefore we're going to be drawing that line always with a stroke weight of 1, 108 00:07:31,743 --> 00:07:34,430 but the points with a stroke weight of 5. 109 00:07:34,430 --> 00:07:36,226 Let's see if this works, right? 110 00:07:36,226 --> 00:07:40,408 And you can see that now we have a little bit more clarity of what's going 111 00:07:40,408 --> 00:07:41,185 on, right. 112 00:07:41,185 --> 00:07:47,797 We do have a polyline constructed by a series of points, all of them straight. 113 00:07:47,797 --> 00:07:54,425 And we're going to start adding a little bit of mathematical information to design. 114 00:07:54,425 --> 00:07:55,593 Here's kind of an important note. 115 00:07:55,593 --> 00:07:58,472 We are going to introduce a sine wave function, 116 00:07:58,472 --> 00:08:02,888 which is one way to starting to kind of manipulate geometry and form. 117 00:08:02,888 --> 00:08:06,809 This is not the only paradigm of how you would actually design using codem right. 118 00:08:06,809 --> 00:08:10,802 Like using mathematical functions can get you to interesting places. 119 00:08:10,802 --> 00:08:14,790 There's kind of more generative approaches to design. 120 00:08:14,790 --> 00:08:19,221 There's kind of different attitudes of how do you 121 00:08:19,221 --> 00:08:23,131 obtain design kind of primitives or ideas. 122 00:08:23,131 --> 00:08:28,496 And this kind of path of math, certainly it's a powerful one, but not the only one. 123 00:08:28,496 --> 00:08:32,265 So if this is not necessarily what you're into and 124 00:08:32,265 --> 00:08:37,126 you feel like I need to kind of go into the territory of math a lot. 125 00:08:37,126 --> 00:08:41,479 There are other alternatives, right, like you might be able to kind of gravitate to 126 00:08:41,479 --> 00:08:45,362 just more procedural geometry that is created through generative means. 127 00:08:45,362 --> 00:08:49,540 And we're going to be doing a lot more of that in MOOC two, course two and 128 00:08:49,540 --> 00:08:50,457 course three. 129 00:08:50,457 --> 00:08:53,213 But for now, I think the sine wave is a very good 130 00:08:53,213 --> 00:08:57,104 introductory mathematical function that could be leveraged for 131 00:08:57,104 --> 00:08:59,946 creating these kind of oscillating patterns. 132 00:08:59,946 --> 00:09:03,739 And it certainly has a lot of power. 133 00:09:03,739 --> 00:09:09,306 So let's create some variables, maybe even before this beginShape. 134 00:09:09,306 --> 00:09:15,886 What are the variables that we will need for our wave or for our sine wave? 135 00:09:15,886 --> 00:09:19,622 So let's start with wavelength. 136 00:09:22,574 --> 00:09:25,615 And I'm going to use a value of 30. 137 00:09:25,615 --> 00:09:30,765 I'm also going to need an amplitude. 138 00:09:30,765 --> 00:09:35,148 And I'm going to invite you to play with these variables because all 139 00:09:35,148 --> 00:09:38,663 of them will change the way the curve looks, right. 140 00:09:38,663 --> 00:09:42,271 And finally I'm going to do an offset. 141 00:09:42,271 --> 00:09:48,221 Yeah, let's do an offset of 300. 142 00:09:48,221 --> 00:09:52,546 The offset is just going to push this curve to be in the place of 143 00:09:52,546 --> 00:09:55,032 the screen that we want, right. 144 00:09:55,032 --> 00:09:57,820 And here, instead of using a 300 value for y, 145 00:09:57,820 --> 00:10:01,494 the only thing that we're going to change here is the y, right. 146 00:10:01,494 --> 00:10:06,432 Because the x, it's basically, the points are going to gradually 147 00:10:06,432 --> 00:10:10,126 be moving a little bit further to the right in x. 148 00:10:10,126 --> 00:10:13,007 But the only thing that we're going to be changing is how 149 00:10:13,007 --> 00:10:15,134 high this point would be, right. 150 00:10:15,134 --> 00:10:18,639 So let's just use amplitude. 151 00:10:18,639 --> 00:10:23,791 And here I would always invite you to kind of, 152 00:10:23,791 --> 00:10:29,221 in case you misspelled, I do that all the time. 153 00:10:29,221 --> 00:10:33,574 I need to make sure that I'm copying my variables correctly by 154 00:10:33,574 --> 00:10:35,592 double-clicking on them. 155 00:10:35,592 --> 00:10:40,007 And here we're going to use sine, which is a mathematical inbuilt function. 156 00:10:40,007 --> 00:10:46,497 So sine refers to a mathematical equation for sine wave. 157 00:10:46,497 --> 00:10:48,802 And here what we actually need. 158 00:10:48,802 --> 00:10:52,653 I actually forgot one final variable, 159 00:10:52,653 --> 00:10:58,382 which is a kind of important one, which is the frequency. 160 00:10:58,382 --> 00:11:03,948 So the frequency, the way sine waves actually work, 161 00:11:03,948 --> 00:11:08,285 they have to do with the radius of circle. 162 00:11:08,285 --> 00:11:11,291 For that, we would actually need to use PI. 163 00:11:11,291 --> 00:11:16,205 So we're going to use an inbuilt variable, which is called TWO_PI. 164 00:11:16,205 --> 00:11:19,865 And you'll see it turns blue because it's an inbuilt number. 165 00:11:19,865 --> 00:11:25,220 You don't want to be typing the kind of decimal places of PI and 166 00:11:25,220 --> 00:11:27,639 kind of duplicating that. 167 00:11:27,639 --> 00:11:32,791 But certainly we can use that inbuilt function to actually get 168 00:11:32,791 --> 00:11:39,440 the right frequency, and we're going to divide that by the wavelength, right. 169 00:11:39,440 --> 00:11:44,422 So, again, we're going to provide you more documentation on sine waves 170 00:11:44,422 --> 00:11:46,175 in one of our notebooks. 171 00:11:46,175 --> 00:11:50,888 So that you could understand how do you actually construct the sine wave. 172 00:11:50,888 --> 00:11:54,578 And how do you can actually control it with more precision, right. 173 00:11:54,578 --> 00:12:00,568 But let's go here and use the sine wave function. 174 00:12:00,568 --> 00:12:04,224 That will require the frequency times i. 175 00:12:04,224 --> 00:12:07,088 And this is kind of the most important part, right. 176 00:12:07,088 --> 00:12:10,336 This sine wave value will be the same. 177 00:12:10,336 --> 00:12:14,200 If you feed a particular number, you would always get a particular result, right. 178 00:12:14,200 --> 00:12:17,195 But if you're feeding a number that changes, in this case I, 179 00:12:17,195 --> 00:12:20,204 you will see that the change will kind of be this oscillation. 180 00:12:22,184 --> 00:12:26,208 And that would be enough, normally that would be enough to calculate this value. 181 00:12:26,208 --> 00:12:31,178 But we do want to push that to the particular place in the screen that we 182 00:12:31,178 --> 00:12:34,040 want, which is defined by the offset. 183 00:12:34,040 --> 00:12:37,793 If you remember, we're not drawing the line all the way in zero, but 184 00:12:37,793 --> 00:12:39,748 rather in the middle of the screen. 185 00:12:39,748 --> 00:12:45,167 Therefore, our offset will push the sine wave to that location, right. 186 00:12:45,167 --> 00:12:48,728 So let's just see what we actually have. 187 00:12:48,728 --> 00:12:53,426 So we actually do have this sine wave, but 188 00:12:53,426 --> 00:12:59,345 we have this kind of very kind of weird looking feel. 189 00:12:59,345 --> 00:13:04,230 So one of the things that I would like to add as a style a little bit here further, 190 00:13:04,230 --> 00:13:05,204 is say no feel. 191 00:13:09,584 --> 00:13:11,384 And we can evaluate, right. 192 00:13:11,384 --> 00:13:13,818 As you can see, we have design wave information. 193 00:13:13,818 --> 00:13:16,562 Let's just play a little bit with the values that we created. 194 00:13:16,562 --> 00:13:22,362 What happens if we change the wavelength to ten? 195 00:13:22,362 --> 00:13:26,642 You can see that the wavelength, it's now much shorter. 196 00:13:26,642 --> 00:13:32,248 And it doesn't have too much resolution because the resolution 197 00:13:32,248 --> 00:13:36,724 is dictated for how fast we are moving in x, right. 198 00:13:36,724 --> 00:13:40,690 We are actually kind of capturing 50 points. 199 00:13:40,690 --> 00:13:41,974 We could actually do. 200 00:13:43,314 --> 00:13:48,926 We can play with how fast the x variable moves and how many iterations. 201 00:13:48,926 --> 00:13:51,952 If you want to do 60, 202 00:13:51,952 --> 00:13:58,012 you'll see that we actually get further. 203 00:13:58,012 --> 00:14:03,056 We kind of repeat the pattern, but we actually get more points. 204 00:14:03,056 --> 00:14:05,715 But most importantly, let's just change this value. 205 00:14:05,715 --> 00:14:09,330 Let's say we do 50 here for the wavelength. 206 00:14:09,330 --> 00:14:12,439 You'll see that we get the wavelength is a lot smoother. 207 00:14:12,439 --> 00:14:16,852 Therefore, our points spacing is capable to register what 208 00:14:16,852 --> 00:14:20,214 happens if we change the amplitude. 209 00:14:20,214 --> 00:14:21,994 So let's change that to 50. 210 00:14:24,374 --> 00:14:27,594 You see that we get, like, a smoother curve, right. 211 00:14:29,494 --> 00:14:37,132 And if you do that 200, right. 212 00:14:37,132 --> 00:14:42,019 So the wavelength, it will determine from the beginning to the point 213 00:14:42,019 --> 00:14:45,821 in which it kind of starts repeating itself, right. 214 00:14:45,821 --> 00:14:49,994 How long is that distance? 215 00:14:49,994 --> 00:14:55,813 The amplitude is how height, the height of the curve, how much it would be. 216 00:14:55,813 --> 00:15:00,535 And the offset is basically how many pixels down are we pushing this 217 00:15:00,535 --> 00:15:02,317 curve to start, right. 218 00:15:02,317 --> 00:15:05,080 Otherwise, we would actually have it all the way up here, and 219 00:15:05,080 --> 00:15:07,166 we only would see the bottom part of the curve. 220 00:15:07,166 --> 00:15:10,143 So you have a little bit of a control panel situation. 221 00:15:10,143 --> 00:15:14,347 And you'll see this happening quite a bit in the design that you will do with your 222 00:15:14,347 --> 00:15:17,449 code, where you actually create a handful of variables. 223 00:15:17,449 --> 00:15:22,035 Hopefully the minimum amount of variables that will be able to control a particular 224 00:15:22,035 --> 00:15:24,730 design and gradually start playing with those. 225 00:15:24,730 --> 00:15:28,562 Eventually, you could create interfaces where you could have maybe sliders. 226 00:15:28,562 --> 00:15:33,153 Or different forms by which you could actually manipulate those variables in 227 00:15:33,153 --> 00:15:37,404 real time and see the transformation of that curve in real time as well. 228 00:15:37,404 --> 00:15:43,729 Okay, before we wrap up, I just realized that we had a typo here, amplitude. 229 00:15:43,729 --> 00:15:48,507 And forgive me, sometimes just mistakes, but this is why it was important to 230 00:15:48,507 --> 00:15:53,303 kind of double-click on the variable because I was spelling it incorrectly. 231 00:15:53,303 --> 00:15:55,506 And as you can see, we can actually correct that here. 232 00:15:55,506 --> 00:15:59,428 The code will still function, but for the sake of clarity, 233 00:15:59,428 --> 00:16:03,125 make sure that you do that correction yourself as well. 234 00:16:03,125 --> 00:16:05,594 Yeah, so that's it for this one, and I'll see you in the next video.