WEBVTT 00:00.000 --> 00:09.360 All right, great. 00:09.360 --> 00:10.360 Hi, everyone. 00:10.360 --> 00:13.360 Again, welcome to the third workshop on creative computing. 00:13.360 --> 00:18.040 So today we're going to be focusing a lot more on interactive art. 00:18.040 --> 00:22.680 So one example here that we have is a wave maker right here. 00:22.680 --> 00:25.040 It looks like a very kind of like complex pattern. 00:25.800 --> 00:32.760 If we move our mouse, we can affect how the waves actually move here. 00:32.760 --> 00:35.320 But if you look down how it's actually done, it's fairly simple. 00:35.320 --> 00:38.520 You can do this in just a little bit of code. 00:38.520 --> 00:41.680 And I kind of I'm going to walk through how to work with this. 00:41.680 --> 00:45.880 And then along the way, add some new functions and stuff like that to make it a little more 00:45.880 --> 00:47.520 unique. 00:47.520 --> 00:52.640 So yeah, as you can see here, all of these are basically just doing the same kind of 00:52.680 --> 00:55.040 cycle animation over and over again. 00:55.040 --> 01:00.480 And then when you put it off to the side here, that's when things start looking like wave 01:00.480 --> 01:01.960 starts getting a little more complex. 01:01.960 --> 01:06.040 But every single one of these is still just doing a circle around and round. 01:06.040 --> 01:12.720 So we're going to start off just by creating one of these little dots right here. 01:12.720 --> 01:21.860 So if everyone has this set up, we can start off by going straight to the draw function. 01:22.080 --> 01:27.340 So let's create the angle for our particle to move in. 01:27.340 --> 01:29.380 Hi guys. 01:29.380 --> 01:34.180 So we're going to declare an x angle to start off with. 01:34.180 --> 01:40.580 We're going to use the map function to map wherever our mouse is on the x-coordinate, 01:40.580 --> 01:55.980 that's mouse x, from zero to width, to negative four times pi, and four times pi. 01:55.980 --> 01:59.780 So there's going to be the radians of our angle, essentially. 01:59.780 --> 02:06.940 And something I just found out for the map function on p5.js, if you put true at the 02:06.940 --> 02:13.460 end here, that makes sure that your results are bounded between negative four pi and four 02:13.460 --> 02:14.460 pi. 02:14.460 --> 02:19.080 So you can't go off the screen like in the frequency example from last time. 02:19.080 --> 02:24.340 So we're going to do the same thing for the y angle as well. 02:24.340 --> 02:31.380 Map our mouse y from zero to height. 02:31.380 --> 02:39.500 And then the same thing, negative four times pi to four times pi. 02:39.500 --> 02:42.100 And then true as well. 02:42.100 --> 02:47.820 And then using these two values, we're going to get a theta value or an angle. 02:47.820 --> 02:53.460 I was never good in geometry, so I'm going to keep this as simple as possible. 02:53.460 --> 02:57.100 So we'll have an angle. 02:57.100 --> 03:08.380 And I'm just going to do the x angle divided by two plus the y angle divided by two. 03:08.380 --> 03:12.980 And that's going to get us in radians the angle that our circle is going to move in. 03:12.980 --> 03:16.060 Cool. 03:16.060 --> 03:21.860 So moving on from there, we're going to need to keep track of where in space our particle 03:21.860 --> 03:22.860 is. 03:23.260 --> 03:27.380 So let's let t equal to time. 03:27.380 --> 03:32.540 And then we're going to use this frame count variable, which basically keeps track of how 03:32.540 --> 03:37.620 many frames have been going since the execution of the program. 03:37.620 --> 03:42.940 If you remember right, there's like 60 or so frames per second, depending on how fast 03:42.940 --> 03:44.500 your browser can keep up. 03:44.500 --> 03:50.380 So we're going to multiply that by a pretty low number just to keep it kind of lower. 03:50.380 --> 03:52.660 I'm just going to do 0.008 arbitrarily. 03:52.660 --> 03:56.380 You can speed it up or slow it down however you want. 03:56.380 --> 04:00.380 And then we need an x and a y value. 04:00.380 --> 04:03.900 So I'm going to call this my x. 04:03.900 --> 04:06.660 And that's going to be so we need a starting value. 04:06.660 --> 04:08.980 So I'm going to make that the width divided by two. 04:08.980 --> 04:11.300 So it's centered on the canvas. 04:11.300 --> 04:16.620 And then we're going to add, let's say, 40. 04:16.620 --> 04:18.900 Yeah, 40 times. 04:18.900 --> 04:22.500 Remember, there are cosine and sine functions in p5.js as well. 04:22.500 --> 04:33.980 So we're going to do cosine of two times pi times our time variable plus the angle that 04:33.980 --> 04:35.980 we've calculated. 04:35.980 --> 04:42.540 All right, and of course, the same thing for y. 04:42.580 --> 04:49.380 The reason I'm calling this my x and my y are going to be clear in a little bit. 04:49.380 --> 04:53.340 And this time around, I'm going to use the sine function, actually. 04:53.340 --> 05:00.620 So same thing, two times pi times t plus the angle. 05:00.620 --> 05:10.860 And then all that's left to do is fill with some color value. 05:11.180 --> 05:21.860 And then draw our circle using my x, my y, and then some diameter value. 05:21.860 --> 05:29.420 So if we press play now, we have our circle moving in the direction that we want it to. 05:29.420 --> 05:33.820 And then it changes every time we move our mouse. 05:33.820 --> 05:38.900 And if you want to create some more interesting patterns, not just circle patterns, we can 05:38.940 --> 05:41.380 change our multiplier right here. 05:41.380 --> 05:44.900 So let's say 3 pi instead of 2 pi. 05:44.900 --> 05:52.700 And now we get this, I always think of it as a fish-like pattern, I guess. 05:52.700 --> 06:00.340 And then actually, one more thing we can do to emulate the wave maker here. 06:00.380 --> 06:11.020 So to give it that trail that we just saw, we can actually add an alpha value to the background. 06:11.020 --> 06:17.780 So this is going to give us the grayscale value of 10 and then an alpha value of 10 as well. 06:17.780 --> 06:26.500 So that as we draw our circle more and more, it starts fading to give it kind of the illusion of a trail. 06:26.540 --> 06:37.620 And then also, I want to give this a no fill up here to get, or no, I'm sorry, no stroke to get rid of those lines. 06:40.100 --> 06:46.500 And now we get something fairly similar to the wave maker right here. 06:46.500 --> 06:53.580 So like this example right here, it's the exact same pattern for a bunch of these little dots here. 06:53.580 --> 07:00.180 So we just need to make a grid now using the exact same behavior, and we'll be able to emulate that pretty closely. 07:00.180 --> 07:13.060 So let's just go up here and say for let x equals 0, x is less than or equal to the width. 07:13.060 --> 07:22.940 And x equals, or plus equals 30, let's say, to give it some spacing from the other dots. 07:23.580 --> 07:29.860 Same thing for our y value as well with the height. 07:34.460 --> 07:38.820 Plus equals 30, you can give that whatever spacing you want. 07:38.820 --> 07:48.580 And then pretty simply going to take all of this code that we have right here and put it into our loop. 07:48.580 --> 07:52.860 And we'll need to change around a couple of things. 07:52.860 --> 08:00.220 So first off, our angle has to be based upon where the x value and y value is and not just the center like we did before. 08:00.220 --> 08:03.180 So let's get rid of this. 08:03.220 --> 08:25.540 And we can make this x angle times x divided by the width of the canvas plus our y angle times y divided by the height of the canvas. 08:25.580 --> 08:34.740 And I also want to get rid of 60, make it 6 instead to make our dots a little smaller. 08:34.740 --> 08:42.060 So these width divided by 2 and height divided by 2 values, they should be replaced with our x and our y values as well. 08:42.060 --> 08:48.220 So now, like in our example over here, we can change it up using this. 08:50.660 --> 08:52.940 Our mouse. 08:53.940 --> 09:02.980 And there's plenty of variables to change around here to make our patterns more interesting. 09:02.980 --> 09:08.540 Change up the constants and you get something completely different basically. 09:08.540 --> 09:18.340 One more thing I wanted to do as well while we have some time is kind of create a little color gradient along the grid. 09:18.460 --> 09:28.740 So at the top of the draw function here, let's declare i and j values, let's say. 09:28.740 --> 09:37.140 And let's fill here based upon the i and j. 09:37.180 --> 09:52.900 And then at the end of our y loop, every time we change our x, let's change the i so that it plus equals 30 and the j plus equals 50. 09:55.860 --> 09:58.900 And now we kind of get this beautiful little color gradient along the side. 10:01.020 --> 10:04.700 So I heard some people experimenting with randomness a little bit. 10:05.700 --> 10:09.740 Let's do it in a slightly different way than what we've done before. 10:09.740 --> 10:17.820 So first off, I'm just going to change our angle here from a const to a variable using let. 10:17.820 --> 10:21.620 And then we're going to play around with this a little bit. 10:21.620 --> 10:28.100 So we're going to declare a z-axis variable. 10:28.780 --> 10:37.940 And for that, we'll do the frame count divided by 100. 10:37.940 --> 10:45.780 And then we're going to change up our angle by doing times equal noise. 10:45.780 --> 10:54.380 So this function, similar to the random function, except it tends to feel more organic is how it's described. 10:54.380 --> 11:06.180 So we can put in our x divided by 100, a y value, y divided by 100, and then our z value as well. 11:06.180 --> 11:11.340 So we're going to create noise in every single axis, I guess. 11:11.340 --> 11:21.980 So when we do that and press play, we'll see we have not perfect waves at all, but something a little more interesting, I think. 11:24.380 --> 11:41.380 But if we go to the center of the canvas here, they all synchronize yet again. 11:41.380 --> 11:41.880 I think. 11:48.860 --> 11:57.460 OK, and then I wanted to do one more thing with this to go a little further than the example. 11:57.460 --> 12:03.820 So let's change up the diameter a little bit, but again, with a new kind of function. 12:03.900 --> 12:12.300 So at bottom here, let's declare a variable called distance. 12:12.300 --> 12:15.420 And that's going to equal dist. 12:15.420 --> 12:23.060 And this function, this new one, basically just gets the distance, the total distance between two points that you give it. 12:23.060 --> 12:27.420 So the first two variables are going to be the x, y of the first point. 12:27.420 --> 12:32.620 So in this case, we'll make it our mouse x and mouse y value. 12:32.620 --> 12:42.620 And then we'll have it be the distance between that and then the current x and y value of our dot that we're looking at, basically. 12:42.620 --> 12:47.100 And then we're going to declare a diameter variable. 12:47.140 --> 12:56.500 And we're going to map the distance of our mouse from the current dot from 0 12:56.500 --> 13:09.220 to the maximum of the width or the height to a value between 40 and 10. 13:09.220 --> 13:15.220 And when we do that and then replace our 6 with the diameter variable, 13:15.220 --> 13:22.540 you can see that the closer our mouse is to certain circles, the bigger that they get. 13:22.540 --> 13:25.460 And the ones up here on the other corner are smaller. 13:25.460 --> 13:27.740 And I can't show you on my mouse because it actually gets bigger. 13:27.740 --> 13:32.820 But yeah, it kind of just creates another random effect. 13:32.820 --> 13:34.700 Again, all gets put towards the middle. 13:34.700 --> 13:36.620 They're all pretty much the same. 13:36.620 --> 13:41.420 And then they start to desynchronize once you move around the canvas a bit. 13:41.420 --> 13:45.100 Let's say we don't want to use our circles anymore. 13:45.100 --> 13:48.540 And we want to create our own shape this time. 13:48.540 --> 13:55.540 So let's create a new function down here. 13:55.540 --> 14:00.860 And I'm just going to call it makePolygon. 14:00.860 --> 14:12.900 On makePolygon, we're going to give it two variables, the number of sides and the radius of the polygon. 14:12.900 --> 14:21.780 So we're going to start off by declaring a constant array of points. 14:21.780 --> 14:27.340 And the number of radians per step here, because we're going to be using a for loop. 14:27.340 --> 14:31.940 So let's do radians per step. 14:31.980 --> 14:43.980 That's going to equal two times five, divided by the number of sides of our polygon. 14:43.980 --> 14:50.300 So once we have that, we're going to have a for loop here. 14:50.300 --> 14:52.500 And that's going to cycle through our angle. 14:52.500 --> 14:54.620 Going to start off at zero. 14:54.620 --> 14:59.100 Going to make sure the angle is less than two pi. 15:02.460 --> 15:09.500 And we're going to have our angle plus equal the number of radians per step. 15:14.340 --> 15:17.060 That make sense to everyone? 15:17.060 --> 15:17.860 Cool. 15:17.860 --> 15:18.500 All right. 15:18.540 --> 15:24.580 So from there, we're going to, in the loop, declare our x and y values for our shape, 15:24.580 --> 15:26.580 for our points, for our shape, I guess. 15:26.580 --> 15:41.620 So let's let the x value equal the radius times cosine of the angle. 15:41.620 --> 15:46.100 Oops. 15:46.100 --> 15:47.380 Oh, I didn't declare x. 15:47.380 --> 15:47.860 My bad. 15:51.540 --> 15:58.860 And then y equal to radius times sine of the angle. 16:01.500 --> 16:03.860 Oh, probably, yeah. 16:03.860 --> 16:06.700 All right. 16:06.700 --> 16:10.180 And then we're just going to, oh yeah, sorry. 16:10.180 --> 16:10.900 Wrong place. 16:10.900 --> 16:21.780 We're going to push that point into here just with simple xy array. 16:21.780 --> 16:26.300 Then at the end of our loop, we're going to return the points. 16:33.540 --> 16:34.300 Great. 16:34.300 --> 16:39.820 OK, so now all that's left to do is to actually draw our polygon. 16:39.860 --> 16:49.100 So instead of the circle down here, we're going to use this function called begin shape. 16:49.100 --> 16:55.380 And this just allows us to kind of draw more complicated figures, I guess. 16:55.380 --> 17:01.340 So let's do for, well, actually, first off, we need to get our points. 17:01.380 --> 17:10.220 So let's do const points equal to make polygon, give it a number of sides. 17:10.220 --> 17:15.660 And our radius is going to be our diameter divided by 2. 17:18.700 --> 17:20.340 So we have those points. 17:20.340 --> 17:22.220 We're beginning our shape. 17:22.220 --> 17:28.420 So we're just going to do point dot for each. 17:28.540 --> 17:31.380 Then point. 17:31.380 --> 17:33.300 And then this little arrow thing, in case you didn't know, 17:33.300 --> 17:37.660 this is just kind of shorthand for function, the function expression. 17:37.660 --> 17:46.060 So for every point in our points array, we're going to do this. 17:46.060 --> 17:48.340 Going to create a vertex. 17:48.340 --> 17:52.740 And this vertex is how the shape, the begin shape, 17:52.740 --> 17:58.220 knows what values that we're actually going to draw the shape with. 17:58.220 --> 18:01.500 So point 0 and point 1. 18:06.700 --> 18:08.820 And that's all that really needs to happen. 18:08.820 --> 18:11.980 And now it has all the vertexes, basically. 18:11.980 --> 18:14.340 And then we need to end our shape. 18:14.340 --> 18:18.180 And then we're going to pass in this close in all caps keyword. 18:18.180 --> 18:21.620 And that makes sure the shape is completely closed. 18:21.620 --> 18:25.900 And the function up here, we're just going to pass, 18:25.900 --> 18:30.100 I'm just calling it old x and old y into here. 18:30.100 --> 18:34.580 And then passing our x and y values from our for loop up here 18:34.580 --> 18:38.460 into the make polygon function. 18:38.460 --> 18:42.660 And then we're just doing radius times the cosine of the angle. 18:42.660 --> 18:45.380 And then you're adding plus old x to it. 18:45.380 --> 18:48.700 And the same for y, adding the old y. 18:48.700 --> 18:54.220 And then you get our array of polygons. 18:54.220 --> 18:58.620 My x and my y should be on make polygon, actually. 18:58.620 --> 18:59.740 Then you can keep it moving. 19:07.420 --> 19:13.940 I want to focus on this thing right here, the noise orbit. 19:13.940 --> 19:14.740 Yes, OK. 19:14.740 --> 19:21.540 So here is another example of some generated art on P5 19:21.540 --> 19:23.060 that looks pretty complicated. 19:23.100 --> 19:26.420 But everything that we've done so far today, 19:26.420 --> 19:29.980 we can use to create this as well. 19:29.980 --> 19:37.820 So let's go back here to our previous section here. 19:37.820 --> 19:40.740 We can get rid of everything in the draw function. 19:40.740 --> 19:44.860 But keep your make polygon function. 19:44.860 --> 19:49.340 Just get rid of the old x and old y. 19:49.340 --> 19:52.820 And just a couple changes we want to make 19:52.820 --> 19:55.660 to the x and the y for later. 19:55.660 --> 20:01.900 So this is where we're going to have 0.5 here. 20:01.900 --> 20:07.220 And this is just going to center circles in our canvas. 20:07.220 --> 20:08.100 Same here. 20:08.100 --> 20:10.460 I should mention, the first part of this, what we actually 20:10.460 --> 20:14.220 need to do is create these circles that 20:14.220 --> 20:17.340 are completely static, that go inward or outward 20:17.340 --> 20:18.700 or however you want to make it. 20:19.580 --> 20:25.740 We'll get rid of the old x and the old y. 20:25.740 --> 20:28.180 And as long as you add 0.5 to this, 20:28.180 --> 20:30.860 everything should be fine. 20:30.860 --> 20:37.300 So let's just go to the setup here and call a few things. 20:37.300 --> 20:42.460 First off, we want to do no fill instead of no stroke. 20:42.460 --> 20:44.780 These should probably get rid of this. 20:44.780 --> 20:46.740 These are all just strokes right here. 20:46.740 --> 20:48.060 You don't need to fill those in. 20:48.140 --> 20:50.860 So we're going to do no fill. 20:50.860 --> 20:54.260 We're going to set our stroke to black. 20:54.260 --> 20:55.660 It can be whatever color you want. 20:55.660 --> 20:56.900 I'm just doing black. 20:56.900 --> 21:03.180 And then the stroke weight to 0.001 times 21:03.180 --> 21:04.900 the width of our canvas. 21:07.940 --> 21:09.340 Cool. 21:09.340 --> 21:11.060 Now that we have that out of the way, 21:11.060 --> 21:13.700 we're just going to go to our draw function 21:13.700 --> 21:16.500 and do basically the same thing we did before 21:16.500 --> 21:19.140 with the circle shapes, but this time 21:19.140 --> 21:21.140 using increasing radiuses. 21:21.140 --> 21:25.900 So let's start with a for loop here. 21:25.900 --> 21:32.940 And let's let our radius equal 0.05. 21:32.940 --> 21:35.100 Again, I'm doing this as kind of like a percentage 21:35.100 --> 21:35.900 of the canvas. 21:35.900 --> 21:40.500 So this is going to be 0.05 of the width of the canvas. 21:40.500 --> 21:45.020 And then we're going to do that until the radius is 21:45.060 --> 21:51.660 less than 0.5. 21:51.660 --> 21:56.140 And then we want to increase our radius by some number. 21:56.140 --> 21:59.860 I'm just going to do 0.5 every single time. 21:59.860 --> 22:05.860 So let's make our points array like before. 22:08.340 --> 22:09.780 And you know what? 22:09.780 --> 22:13.260 Actually, I'm going to call it just polygon instead 22:13.260 --> 22:15.300 for the sake of consistency. 22:15.300 --> 22:19.140 And then go to make polygon, give it a number of sides. 22:19.140 --> 22:21.860 I'm going to say 20. 22:21.860 --> 22:26.700 And then our radius that we've declared here. 22:26.700 --> 22:29.140 And then just the exact same thing 22:29.140 --> 22:33.260 we did before with begin shape. 22:33.260 --> 22:38.940 Points dot for each point. 22:38.980 --> 22:48.020 We create a vertex for that point, 0.0, 0.1. 22:48.020 --> 22:50.660 And we want to multiply 0.0 and 0.1 22:50.660 --> 22:58.620 by the width and the height of the canvas respectively. 22:58.620 --> 23:03.380 And then make sure you put a semicolon at the end of that. 23:03.380 --> 23:07.020 And then finally, we end our shape with a close. 23:09.940 --> 23:11.060 Oh, yes, that's right. 23:11.060 --> 23:14.300 I called it polygon, not points. 23:14.300 --> 23:15.540 There we go. 23:15.540 --> 23:18.020 And now we have a series of circles 23:18.020 --> 23:19.980 that get bigger as they go out. 23:19.980 --> 23:21.620 We can change our number of sides 23:21.620 --> 23:26.020 to as many or as few as you want. 23:26.020 --> 23:28.620 I'll say that with our future results, 23:28.620 --> 23:30.980 the more sides you have, the cooler this ends up looking. 23:30.980 --> 23:34.500 So somewhere around 15 or 20 is usually a good way to go. 23:35.380 --> 23:43.140 And also change up the spacing so we have more circles 23:43.140 --> 23:45.580 as we go outwards as well. 23:45.580 --> 23:47.300 So basically, the way we're going 23:47.300 --> 23:51.580 to get all these cool little wave-like motions right here 23:51.580 --> 23:55.100 is going to be by distorting our polygons. 23:55.100 --> 23:59.340 So let's go down here and declare a new function 23:59.340 --> 24:02.580 that I'm fittingly going to call distort polygon. 24:05.300 --> 24:11.220 We're just going to pass our polygon in as the only parameter. 24:11.220 --> 24:18.540 Then in here, we're immediately just going to return polygon.map. 24:18.540 --> 24:21.420 This is different than the p5.js map. 24:21.420 --> 24:23.660 This is the JavaScript array map. 24:23.660 --> 24:26.940 And it basically just makes sure that every single, 24:26.940 --> 24:28.740 it returns a new array. 24:28.740 --> 24:30.860 And every single point in that array 24:30.860 --> 24:34.380 is going to be affected by a certain function, 24:34.380 --> 24:38.900 which is what we're going to create right now. 24:38.900 --> 24:42.900 So for the sake of simplicity, I'm 24:42.900 --> 24:56.820 just going to make x and y are 0.0 and are 0.1. 24:56.820 --> 25:03.660 And then first things first, I want to get a distance value. 25:05.380 --> 25:11.260 From the center of the canvas, 0.5 and 0.5 25:11.260 --> 25:16.380 to wherever our current x and y values are. 25:19.060 --> 25:25.580 And that is going to affect the noise of our noise orbit, 25:25.580 --> 25:26.940 I guess. 25:26.940 --> 25:30.780 And how we're going to calculate that is through a function. 25:30.820 --> 25:35.380 So we're going to declare this constant function, noiseFn. 25:35.380 --> 25:41.620 Going to set that equal to when we pass in an x and y value. 25:45.420 --> 25:49.980 I'm going to create a new function right here. 25:49.980 --> 25:53.940 And we need some noiseX and noiseY values. 25:53.940 --> 26:03.260 So our noiseX is going to be equal to x plus some number. 26:03.260 --> 26:07.220 It could be anything, but ideally not a whole number, 26:07.220 --> 26:09.380 because the noise values are going 26:09.380 --> 26:15.340 to be 0 when the x or y values are whole numbers. 26:15.340 --> 26:18.620 So I'm just going to do this times the distance. 26:19.220 --> 26:22.940 And same thing over here. 26:22.940 --> 26:28.900 It can be any decimal number, basically, times the distance. 26:28.900 --> 26:37.700 And then our noise function will return the noise of noiseX, 26:37.700 --> 26:38.220 noiseY. 26:41.300 --> 26:43.140 And then close that off. 26:43.140 --> 26:45.580 Now we have a function to calculate 26:45.620 --> 26:48.020 how much we're going to distort each of these vertexes, 26:48.020 --> 26:48.540 basically. 26:51.500 --> 26:53.940 Cool. 26:53.940 --> 26:54.460 Good, good. 26:54.460 --> 26:55.260 All right. 26:55.260 --> 26:58.220 So we'll move on a little more then. 26:58.220 --> 27:02.780 Going to declare an angle, or a theta value, 27:02.780 --> 27:04.900 with our noise function. 27:04.900 --> 27:09.380 And we just pass in our x and y values we declared up there. 27:09.380 --> 27:11.580 And we multiply by 2 pi. 27:16.420 --> 27:21.820 And then we need to create some new x and new y 27:21.820 --> 27:24.340 values for our vertexes. 27:24.340 --> 27:26.500 To do that, I'm going to first start off 27:26.500 --> 27:32.380 with a nudge constant, to nudge our vertexes off its axis. 27:32.380 --> 27:35.820 So we'll start with a really low number, 0.05, 27:35.820 --> 27:38.060 something like that. 27:38.060 --> 27:41.620 Something lower than 0.2. 27:41.620 --> 27:43.740 Ideally, we don't need to distort that much. 27:45.620 --> 27:51.140 And then we're going to have our new x value equal to x 27:51.140 --> 27:58.740 plus our nudge value times cosine of our angle. 28:01.540 --> 28:08.180 And our new y value equal to y plus our nudge constant 28:08.180 --> 28:13.740 times sine of our angle. 28:13.740 --> 28:16.340 And once we have those new x and new y values, 28:16.340 --> 28:24.820 we return new x, new y as our new points. 28:24.820 --> 28:28.220 And then we close off this whole function right here, 28:28.220 --> 28:29.460 semicolon. 28:29.460 --> 28:33.020 And that is our function to distort our polygon. 28:33.020 --> 28:36.340 And then the only other thing we need to change now 28:36.340 --> 28:38.500 is actually calling this function. 28:38.500 --> 28:42.420 So we're going to go back up to our draw function. 28:42.420 --> 28:45.300 Then underneath our generated polygon, 28:45.300 --> 28:52.460 we're going to create a distorted polygon, which 28:52.460 --> 28:58.620 is equal to distort polygon, polygon. 28:58.620 --> 29:01.020 I'm a genius. 29:01.020 --> 29:05.260 Oh, and then we also need to replace our polygon.foreach 29:05.260 --> 29:10.540 with distorted polygon. 29:10.580 --> 29:13.820 And then if everything goes right, we'll regenerate this. 29:13.820 --> 29:16.980 And every time we regenerate, it's 29:16.980 --> 29:19.220 all off its axis in different ways 29:19.220 --> 29:21.860 that look a little like a speaker, 29:21.860 --> 29:25.980 I guess, when you play some music. 29:25.980 --> 29:29.260 So I'd like to apologize for the last section 29:29.260 --> 29:30.580 when I said the z-axis. 29:30.580 --> 29:34.380 It's the zed axis, if I remember correctly. 29:34.380 --> 29:38.900 So basically, we're going to get this to move along the zed 29:38.900 --> 29:42.820 axis in the same way as the last one. 29:42.820 --> 29:46.220 We're going to declare a zed value. 29:46.220 --> 29:49.140 Feels very strange coming out of my mouth. 29:49.140 --> 29:54.220 Frame count divided by 500, let's say. 29:54.220 --> 29:58.940 And let's also declare a second zed value 29:58.940 --> 30:03.340 that goes a bit faster, frame count divided by 200. 30:03.340 --> 30:07.980 So we have the C2 value, zed 2 value. 30:08.060 --> 30:12.940 We'll move down here, add it to our noise function. 30:15.860 --> 30:20.020 Same with noise y as well. 30:20.020 --> 30:25.380 And then our noise function will also pass the zed 30:25.380 --> 30:26.740 into there as well. 30:26.740 --> 30:30.380 So now we have some motion along the zed axis. 30:30.380 --> 30:33.620 And when we load this, my bad. 30:33.620 --> 30:34.700 OK, here we go. 30:38.980 --> 30:39.940 Thank you. 30:39.940 --> 30:41.180 That's what I was looking for. 30:45.500 --> 30:50.740 So now we have the waves, kind of similar to this. 30:50.740 --> 30:55.060 Now we need to work on nudging this guy a bit more. 30:55.060 --> 30:59.580 So we have this right here. 30:59.580 --> 31:04.140 Let's actually, let's keep that number right there, 0.05. 31:04.220 --> 31:11.060 And let's subtract it from cosine of zed. 31:11.060 --> 31:16.580 And then multiply that by the same number here. 31:16.580 --> 31:19.020 So when we do this, we'll kind of 31:19.020 --> 31:22.020 make the nudge cyclical instead of static. 31:22.020 --> 31:25.220 So it starts off pretty still. 31:25.220 --> 31:27.100 And as it goes on more and more, we're 31:27.100 --> 31:31.700 going to get more noise, more of a nudge. 31:31.700 --> 31:33.460 And you can start seeing those little waves 31:33.500 --> 31:37.020 forming more and more as the center circle moves 31:37.020 --> 31:38.100 more and more off its axis. 31:51.820 --> 31:54.380 So as you can see right here, this 31:54.380 --> 31:56.100 is just basically animation. 31:56.100 --> 31:58.100 You can't really interact with it at all. 31:58.100 --> 32:00.780 There's plenty of constants here and different ways 32:00.780 --> 32:03.700 to change it to make it interactive. 32:03.700 --> 32:09.660 Just an example here, I can make this my mouse x value divided 32:09.660 --> 32:13.220 by the width of the canvas, and then the same value over here. 32:13.220 --> 32:16.060 So we nudge more and more as we move more 32:16.060 --> 32:18.460 towards the right of the canvas with our mouse. 32:22.780 --> 32:27.780 So if we do this, we can see how different nudge values affect 32:27.780 --> 32:29.060 this orbit more and more. 32:29.060 --> 32:33.220 So we can get it really extreme over here if we want to. 32:37.140 --> 32:40.220 So extreme it goes off the screen a little bit, 32:40.220 --> 32:45.940 but you can create some really cool effects with this.