WEBVTT 00:00.000 --> 00:13.080 Yeah, so we're going to be handling some advanced animation today for the last workshop of the 00:13.080 --> 00:14.400 semester. 00:14.400 --> 00:18.080 Starting off with something with a lot of the techniques that we've learned in the previous 00:18.080 --> 00:24.520 few workshops and then the last half we're going to be focusing on some more 3D animations. 00:24.520 --> 00:29.120 So let's just get started right away with these connected vertices. 00:29.120 --> 00:31.440 So we have an example right here. 00:31.440 --> 00:35.680 If you were on campus you might have seen our advertisements that had something like 00:35.680 --> 00:38.120 this going right here. 00:38.120 --> 00:41.680 Basically just kind of like an interactive little canvas where a bunch of particles are 00:41.680 --> 00:46.320 floating around and you can affect how many particles appear on the screen and how many 00:46.320 --> 00:50.840 connections there are between them. 00:50.840 --> 00:53.540 So yeah, we're going to try to replicate that right now. 00:53.540 --> 01:02.660 So let's get started on a blank sketch and let's start off by making the particle class 01:02.660 --> 01:04.200 first. 01:04.200 --> 01:10.820 So first off we're going to declare an array of particles. 01:10.820 --> 01:11.820 Pretty simply. 01:11.820 --> 01:18.580 And now our class particle. 01:18.620 --> 01:23.940 And of course first we need our constructor. 01:23.940 --> 01:30.780 And we're going to just pass in as a parameter just the radius of our particles. 01:30.780 --> 01:40.780 So let's declare V as a vector, create vector with a random width and a random height so 01:40.780 --> 01:51.380 that all of our particles start off in different places on the canvas. 01:51.380 --> 01:55.620 And of course the radius, we'll call that R, is just going to be equal to the radius 01:55.620 --> 01:59.360 that we pass in. 01:59.360 --> 02:03.100 And then we just need some speed for the particles. 02:03.100 --> 02:13.540 So speed in the x direction will be a random number from negative one to one. 02:13.540 --> 02:24.500 And speed in the y direction is going to be also a random number from negative one to one. 02:24.500 --> 02:29.740 So that's a pretty simple way just to get all of the variables in here. 02:29.740 --> 02:36.180 So let's just create a draw function first. 02:36.180 --> 02:40.540 Again very simple, just doing a no stroke for our circles. 02:40.540 --> 02:46.020 We're going to fill it with white. 02:46.020 --> 02:55.380 And then draw our circle with our declared x value from our vector. 02:55.380 --> 03:00.020 As well as our declared y value as well. 03:00.020 --> 03:05.060 And finally our radius value. 03:05.060 --> 03:08.740 So this is all we need just to draw our particles. 03:08.740 --> 03:13.020 So let's just do that real quick. 03:13.020 --> 03:20.820 On our setup we're just going to, actually yeah we don't really need anything right there. 03:20.820 --> 03:22.820 We're just going to go straight to draw. 03:22.820 --> 03:28.540 I'm going to change the background to black to more closely replicate the example over here. 03:28.540 --> 03:30.900 You can do whatever you want of course. 03:30.900 --> 03:37.260 And then all we're going to do is, well actually first off we need to create all the particles. 03:37.260 --> 03:41.460 So let's create a function for that too. 03:41.460 --> 03:44.700 Just call it create particles. 03:44.700 --> 03:52.540 And then we need the amount of particles as well as the radius of the particles. 03:52.580 --> 03:58.420 And then all we're going to do for let i equal zero. 03:58.420 --> 04:06.060 i is less than the, excuse me, i is less than the amount of particles. 04:06.060 --> 04:08.500 And then plus plus i. 04:08.500 --> 04:15.860 We're just going to push new particles into the particle array. 04:15.860 --> 04:27.700 particles.push a new particle with the given radius. 04:27.700 --> 04:35.380 And then all we need to do at the setup is call create particles with however many that we want. 04:35.380 --> 04:42.420 So let's do 10 particles with a radius of five pixels. 04:42.420 --> 04:46.660 All right, everyone generally on the same page right now? 04:46.660 --> 04:47.940 Cool, cool. 04:47.940 --> 04:51.740 So for when we're drawing our particles, pretty simple. 04:51.740 --> 04:57.780 We just call the particle array, do dot for each. 04:57.780 --> 05:09.500 So for each p particle in the array, going to call a little function to draw the particle. 05:09.500 --> 05:11.740 Put a semicolon over there. 05:11.740 --> 05:18.180 And now when we run it, particles, excuse me. 05:18.180 --> 05:27.900 Now when we run it, every time we get 10 different particles in random locations. 05:27.900 --> 05:32.140 And then pretty simply, all we need to do is get these moving now. 05:32.140 --> 05:40.380 So let's go back up to the particle class and let's declare a couple other functions. 05:40.380 --> 05:44.260 First, we'll call it the update function. 05:44.260 --> 05:51.660 And we're just going to update the values of our vector with the speed values that we declared before. 05:51.660 --> 06:02.540 So let's do this dot v dot x plus equals this dot speed x. 06:02.580 --> 06:13.580 And the exact same thing for the y value of our vector as well. 06:13.580 --> 06:21.380 So now when we do this, oh, we also need to p dot update. 06:21.380 --> 06:26.980 When we do that, our particles move, but then they move off the screen slowly but surely. 06:26.980 --> 06:30.420 So let's do something about that. 06:30.420 --> 06:35.580 I'm going to call another function just to handle the wall issue, I guess. 06:35.580 --> 06:40.700 And unlike our smileys that would bounce, we're just going to have it go off the edge of the screen 06:40.700 --> 06:45.300 and then come back right on the other end of the screen, both in the forwards, 06:45.300 --> 06:50.220 I'm sorry, in the up and bottom locations of the right and left locations. 06:50.220 --> 07:00.980 So let's just do if this dot v dot x is less than or equal to negative this dot radius four, 07:00.980 --> 07:08.340 I would use zero for this, but this actually works better because now we know when the circle hits the radius value, 07:08.340 --> 07:14.420 not the zero value, then it goes to the end of the screen and makes it a lot more seamless looking, which we'll see in a second. 07:14.420 --> 07:28.420 So if our X value is equal to negative the radius, then we're going to do this dot v dot x equal to width to return it on the other end of our canvas. 07:28.420 --> 07:45.340 And similarly, else if this dot v dot x is greater than or equal to the width plus the radius of our particle, 07:45.340 --> 07:56.300 we're going to set this dot v dot x equal to negative this dot r. 07:56.300 --> 08:04.420 So that'll handle our vertical walls, but now our horizontal walls, we just need to do the exact same thing. 08:04.420 --> 08:17.980 But in the y direction, if v dot y is less than or equal to negative this dot r, 08:17.980 --> 08:23.900 this dot v dot y is equal to height. 08:23.900 --> 08:37.300 Else if this dot v dot y is greater than or equal to the height plus this dot r, 08:37.300 --> 08:45.100 this dot v dot y is equal to negative this dot r. 08:45.100 --> 08:56.540 And assuming I typed everything correctly, we just need to go back down to our for each and now update the walls. 08:56.540 --> 09:09.980 Actually, probably before the draw would be the best option, so should be p dot update, p dot walls, 09:09.980 --> 09:15.020 then p dot draw to make sure it looks a bit more seamless. 09:15.020 --> 09:17.540 So now. 09:17.540 --> 09:22.580 Oh, called it wall walls. 09:22.580 --> 09:28.340 Now, when it hits any of the walls, it will return in the opposite direction. 09:28.340 --> 09:32.180 So we keep all 10 of our particles there. 09:32.180 --> 09:42.380 Great. OK, so the next part of this is we need to figure out how we're going to draw the connection between all of these particles. 09:42.380 --> 09:49.420 So all that we have to do there is just compare the distances between all the particles to each other. 09:49.420 --> 09:53.340 And we accomplish that by going in our draw loop. 09:53.340 --> 09:59.540 And after we draw our particles, we're going to do nested for loop. 09:59.540 --> 10:11.580 So for I equals zero and then I is less than the number of our particles, particles dot length. 10:11.620 --> 10:21.660 Increase I every time and for let J equal I plus one. 10:21.660 --> 10:30.460 Because we don't need to compare the first particle to itself, of course, J is less than particles dot length as well. 10:30.460 --> 10:34.020 Plus plus J. 10:34.020 --> 10:41.260 Now we just need to get the particles into consts here. 10:41.260 --> 10:52.500 So let's just call particles I and particles J into P1 and P2. 10:52.500 --> 11:01.460 Make it a lot easier for us to type. We're going to set our stroke to to white. 11:01.460 --> 11:08.300 For. And now we just need to calculate our distance, 11:08.300 --> 11:11.540 which is where having the vectors comes in handy. 11:11.540 --> 11:17.940 So our distance is going to be equal to. We're going to floor it. 11:17.940 --> 11:26.740 So it's a whole number. P1 dot V dot dist, the built in vector distance function. 11:26.740 --> 11:32.340 And then we just need to do P2 dot V. 11:32.340 --> 11:35.860 Compares point one and point two next to each other. 11:35.860 --> 11:46.260 So we'll say if distance is less than some arbitrary number, let's just say 200. 11:46.260 --> 11:56.380 Then we'll draw a line connecting the two particles and that line is going to be from P1 dot V dot X. 11:56.380 --> 12:09.820 And P1 dot V dot Y to P2 dot V dot X and P2 dot V dot Y. 12:09.820 --> 12:13.700 So if we refresh this now. 12:13.700 --> 12:18.980 So you can see now they're all connected when they move farther away from each other, 12:18.980 --> 12:24.460 they lose that connection and when they get closer, they gain that connection. 12:24.500 --> 12:32.540 So again, back to here, as you can see, we have some random radiuses on all these particles. 12:32.540 --> 12:35.860 It kind of gives it a bit of an illusion of death, I guess. 12:35.860 --> 12:44.740 And then also you can see that the connections between all the different particles sort of get more intense as you get closer together and fade away as they move further apart. 12:44.740 --> 12:52.140 Let me see if I can make that more apparent. Kind of like that. 12:52.140 --> 12:56.340 So pretty easy trick to do both of these. 12:56.340 --> 12:59.980 So first off, I'll start with the fading connections. 12:59.980 --> 13:08.460 So I instead of just declaring a number here, I'm going to declare a const that I'm just calling max distance. 13:08.460 --> 13:10.420 I'm going to set that equal to 100. 13:10.420 --> 13:16.860 And then if distance is less than max distance, then it'll do the same thing. 13:16.900 --> 13:32.980 But now instead of just drawing a line like this, I am going to first off get rid of my stroke value up here and declare my stroke value down here instead. 13:32.980 --> 13:41.020 And I still want it to be white, but then I want to change the alpha value, the transparency value between the two particles. 13:41.020 --> 13:53.460 So with that, I'm just going to map our distance value from 0 to 100 because that will actually max distance. 13:53.460 --> 13:57.980 We want to stay consistent with our variables there. 13:57.980 --> 14:03.780 And I am just going to have that be from 255 to 0. 14:03.820 --> 14:17.700 So once that happens, as you can see, when they're right up next to each other, they're the brightest, I guess, the least transparent, and then they slowly fade away as they move away from each other. 14:17.700 --> 14:25.180 And of course, we can change our max distance now, and then that affects everything. 14:25.180 --> 14:30.620 So you can just go with whatever number you like best, whatever looks nicer. 14:30.660 --> 14:36.860 And then we just need to deal with the random radius solution pretty easily. 14:36.860 --> 14:47.020 You could just pass a random number in there, or you can go up here to our constructor where we have our radius. 14:47.020 --> 14:55.900 And if a radius isn't found, you can do radius or some random number. 14:55.900 --> 15:08.900 So if we want, you can just get rid of the radius here completely, and it will handle that undefined behavior of not receiving a radius by just doing this. 15:08.900 --> 15:15.140 I didn't know that before, so I thought that would be fun to pass on. 15:15.140 --> 15:22.540 So now we have something pretty similar to what's over here, and all we need is some user interaction. 15:22.580 --> 15:28.900 So let's just do that right now, I guess. 15:28.900 --> 15:38.020 So as you can see here, when we move along the y-axis, we affect the number of particles on our canvas. 15:38.020 --> 15:44.500 And when we move along the x-axis, we affect the strength of the connections, basically. 15:44.500 --> 15:50.860 So all the way on the corners, that's where we have the most connections and most particles. 15:50.860 --> 15:56.620 So let's start out by changing the connection value. 15:56.620 --> 16:09.100 So if we go down here, right above our for loop, let's just create a mouseDistance constant. 16:09.100 --> 16:20.380 That's just going to be the absolute value of our mouseX value minus the width. 16:20.380 --> 16:28.420 And we just need to replace a few instances with a mouseDistance, and yeah, that'll actually just be the maxDistance. 16:28.420 --> 16:39.100 So instead of maxDistance, just say mouseDistance, you can get rid of that. 16:39.100 --> 16:52.420 Then once you do that, refresh, you should see as you move along the x-axis, you get more connections and less connections. 16:52.420 --> 16:56.620 More and less. 16:56.620 --> 16:58.820 Great, so that's fairly simple. 16:58.820 --> 17:02.820 Now we just need to affect the number of particles. 17:02.820 --> 17:06.900 And first things first, you can see here we are only creating 10 particles. 17:06.900 --> 17:10.620 So let's bump that number up to, let's say, 300. 17:10.620 --> 17:19.300 We're not going to have all 300 on the screen at once, but this is just kind of like a fail-safe so you don't get an error because of what we're going to see in a second here, actually. 17:19.300 --> 17:27.180 So let's create a constant for mouseAmount. 17:27.180 --> 17:33.060 That is just going to be mouseY minus mouseHeight divided by the height, and then multiplied by 100. 17:33.060 --> 17:38.020 And then we need to replace a few instances with the mouseAmount. 17:38.020 --> 17:41.660 Well, first off, actually, we need to make sure we create the right number of particles. 17:41.660 --> 17:55.620 So in our forEach function, we're just going to put p and then i, and this i is just going to enumerate the forEach function that we're doing right here. 17:55.620 --> 18:13.620 So I'm going to say at the top here, if i is less than the mouseAmount, then we're going to draw our particle. 18:13.620 --> 18:17.620 And then if not, it just stays in the particle array. 18:17.620 --> 18:25.460 And then we also need to make sure that we replace our connections, particle.length, with mouseAmount. 18:25.460 --> 18:32.220 Because if we don't do that, then the connections will stay there, but the particles won't be drawn. 18:32.220 --> 18:35.540 So it'll look fairly weird. 18:35.540 --> 18:37.300 Now, if we press play. 18:37.300 --> 18:47.300 So to everyone, start a new sketch right now. 18:47.300 --> 18:51.300 And like I said before, we're going to be focusing on 3D graphics now. 18:51.300 --> 18:57.300 And in order to enable that, first things first, we have to go up to our createCanvas function. 18:57.300 --> 19:05.300 And then after the width and the height, we have to declare in all caps WebGL. 19:05.300 --> 19:11.300 For people that aren't familiar, this is the Web Graphics Library. 19:11.300 --> 19:19.300 It's a JavaScript API for rendering 2D and 3D graphics in web browsers, and you don't need any additional plugins or anything. 19:19.300 --> 19:24.300 So as long as you don't have Internet Explorer, everything should be fine. 19:24.300 --> 19:28.300 So let me just show you a few things that we can do with the graphics library. 19:28.300 --> 19:32.300 Just a very, very basic. 19:32.300 --> 19:38.300 Let's start off with a push. 19:38.300 --> 19:44.300 And let's just draw a box to start off with. 19:44.300 --> 19:50.300 And then end with a pop. 19:50.300 --> 19:53.300 So it looks like a square right now, right? 19:53.300 --> 20:02.300 But if we want to see the whole box, we can use the rotateX, Y, and Z function. 20:02.300 --> 20:06.300 So let's rotate according to the frame count. 20:06.300 --> 20:13.300 I'm sorry, frame count times 0.01. 20:13.300 --> 20:22.300 Do the exact same thing for Y and Z. 20:22.300 --> 20:32.300 And now we can show off our 3D box circling around here. 20:32.300 --> 20:39.300 You can also put on no stroke if you want the box to be clear, but I want to see the edges. 20:39.300 --> 20:43.300 And then there's plenty of different objects you can use for this. 20:43.300 --> 20:58.300 So here's a cone, cylinder, my favorite, the torus. 20:58.300 --> 21:02.300 We can beef it up a little bit more too. 21:02.300 --> 21:05.300 We can look more like a donut. 21:05.300 --> 21:10.300 So as you can see, you can see all of the different edges and everything right here. 21:10.300 --> 21:22.300 So if you don't want it to be affected by light, you can also call this normal material function. 21:22.300 --> 21:26.300 And you get this really beautiful rainbow design here. 21:26.300 --> 21:31.300 But yeah, so this is the basics of 3D. 21:31.300 --> 21:38.300 Let's do something a little bit more fun with that now. 21:38.300 --> 21:44.300 So keeping the same setup, just the Create Canvas with our Web Graphics Library, 21:44.300 --> 21:49.300 let's just get rid of everything besides our background. 21:49.300 --> 21:59.300 And so first off, let's declare a radius equal to width times 1.5. 21:59.300 --> 22:03.300 Oh, I should probably mention what we're attempting to do right here. 22:03.300 --> 22:16.300 So we're going to kind of create this little palace of 3D objects that we can interact with, look around in. 22:16.300 --> 22:23.300 So the radius of our little palace, I guess, is going to be 1.5 times the width of our canvas. 22:23.300 --> 22:30.300 And then in order to get this drag option going right here, it's a pretty simple function. 22:30.300 --> 22:34.300 It's just orbit control. 22:34.300 --> 22:39.300 And that allows us to interact with it like we saw over there. 22:39.300 --> 22:46.300 So like before, I'm going to call normal material as well. 22:46.300 --> 22:53.300 And then the tricky thing about spacing out 3D graphics is that we have to use the translate function. 22:53.300 --> 22:59.300 There's nothing in the actual box or cone functions where you can affect where it's drawn on the canvas. 22:59.300 --> 23:10.300 So we have to translate it. So let's translate immediately minus 400 in the Z axis. 23:10.300 --> 23:15.300 And now we're going to create a couple of for loops so we can actually draw our shapes. 23:15.300 --> 23:22.300 So let's let i equal zero. 23:22.300 --> 23:28.300 i is less than or equal to 12 plus plus i. 23:28.300 --> 23:40.300 And let's let this do the same thing rather for j. 23:40.300 --> 23:44.300 It's not doing that for some reason. 23:44.300 --> 23:52.300 OK, cool. So once we're in the nested for loop, start off immediately with a push. 23:52.300 --> 24:03.300 And now we're going to declare some A and B values for our inevitable translation to draw the circles around our palace. 24:03.300 --> 24:10.300 Is there a better name for this? I think of it as a palace. I don't know why. 24:10.300 --> 24:18.300 All right. So it's about the A equal to J divided by 12 times pi. 24:18.300 --> 24:26.300 And let's let our B equal i divided by 12 times pi. 24:26.300 --> 24:36.300 Now, in order to translate. And of course, after we're done here, you can see you can make your own value, see how it affects it. 24:36.300 --> 24:48.300 But I am just using the ones in the example. So in the X direction, we're going to do sine of two times a. 24:48.300 --> 24:57.300 Times the radius. Times sine of B. 24:57.300 --> 25:05.300 Then in our Y direction, we're going to do cosine of B times the radius. 25:05.300 --> 25:16.300 And divide that by two. And in the Z direction, cosine of two times a. 25:16.300 --> 25:24.300 Times the radius times again, sine of B. 25:24.300 --> 25:34.300 So that's going to give us the shape of our palace. 25:34.300 --> 25:39.300 So once we have that, now we can actually draw our shapes. 25:39.300 --> 25:50.300 So if J modulo two is equal to zero, let's draw a cone. 25:51.300 --> 25:58.300 And otherwise, let's draw a box. 25:58.300 --> 26:02.300 Then at the end of everything, we need to pop. 26:02.300 --> 26:16.300 And with just that simple bit of code right here, now we have our interactive environment. 26:16.300 --> 26:21.300 And if you want, we can play around with our values here. 26:21.300 --> 26:24.300 Cut it in half. 26:24.300 --> 26:29.300 Change the radius. 26:29.300 --> 26:36.300 I'm going to start a new file now. And now we're going to be looking at shaders, 26:36.300 --> 26:40.300 which are basically just programs that allow you to process many pixels at once. 26:40.300 --> 26:48.300 And it's good to apply some blur or noise or some additional shading to polygons or three-dimensional polygons. 26:48.300 --> 26:54.300 So to give you an introduction right now, we're just going to do a very basic gradient using shaders. 26:54.300 --> 27:00.300 So let's start off at the top of our function by just declaring a shader. 27:00.300 --> 27:05.300 I'm just going to call it the shader. 27:05.300 --> 27:12.300 And then in our setup function, again, we need WebGL on our Create Canvas. 27:12.300 --> 27:20.300 We're going to set our pixel density to one. 27:20.300 --> 27:24.300 This basically just disables the scaling for retina screens. 27:24.300 --> 27:29.300 So everyone's working with the same thing, no matter what monitor you're using. 27:29.300 --> 27:33.300 Then put a no stroke on here as well. 27:33.300 --> 27:41.300 Then we're going to assign the shader to create shader. 27:41.300 --> 27:48.300 And then this function, we're going to pass a vertex shader and a fragment shader. 27:48.300 --> 27:55.300 So a vertex shader is affecting the 3D geometry of the objects on the screen. 27:55.300 --> 27:59.300 And a fragment shader is going to affect the color output. 27:59.300 --> 28:05.300 We're just going to do very, very basic vertex and fragment shaders down here just to give you a feel for it. 28:05.300 --> 28:08.300 And then the next section, we have some that are already defined. 28:08.300 --> 28:11.300 So you can just use those. 28:11.300 --> 28:16.300 So let's start off by declaring our vertex shader. 28:16.300 --> 28:20.300 And then it's going to be all enclosed in these grave accents. 28:20.300 --> 28:25.300 If you're using a Mac, it's on the upper left next to the tilde. 28:25.300 --> 28:31.300 If not, you can probably just Google grave accent and then put it in here. 28:31.300 --> 28:33.300 I always find these special characters to be hard. 28:33.300 --> 28:37.300 But anyway, so let's start off. 28:37.300 --> 28:44.300 So the language that these shaders use is the GLSL, the Graphics Library Shading Language. 28:44.300 --> 28:46.300 So it's different than this. 28:46.300 --> 28:50.300 It's going to be more similar to C, I guess. 28:50.300 --> 28:52.300 But yeah, I'll walk you through it. 28:52.300 --> 28:53.300 It'll only be a few lines. 28:53.300 --> 28:57.300 Let's start off by declaring an attribute. 28:57.300 --> 29:02.300 And this just shares the vertex positions with all the shaders. 29:02.300 --> 29:06.300 And then a vector containing three components. 29:06.300 --> 29:10.300 So in our case, we're declaring a position vector. 29:10.300 --> 29:17.300 So this is going to be the X, Y, and Z components. 29:17.300 --> 29:27.300 Then we're going to make a main function here. 29:27.300 --> 29:37.300 So in our main function, let's declare four position vector. 29:37.300 --> 29:45.300 And then our vec4 is just going to contain our a position vec3. 29:45.300 --> 29:56.300 And then along with 1.0, our W parameter, it's just going to scale all the other vector components, basically. 29:56.300 --> 29:58.300 So we can play with that if you want. 29:58.300 --> 30:02.300 But right now, it's just going to be one. 30:02.300 --> 30:24.300 So in our position vector4.xy, we're going to have that equal to position vec4.xy times 2.0 minus 1.0. 30:24.300 --> 30:29.300 It's going to scale it to make the output fit the canvas. 30:30.300 --> 30:44.300 And then predefined variable gl underscore position is going to be equal to our position vec4. 30:44.300 --> 30:48.300 And then that is it for the vertex shader. 30:48.300 --> 30:56.300 Yes, I did. Thank you. 30:56.300 --> 31:02.300 So now we'll also declare the fragment shader as well. 31:02.300 --> 31:06.300 Again, we use our grave accents here. 31:06.300 --> 31:11.300 First off, we have to declare a precision. 31:11.300 --> 31:15.300 I'm going to do medium precision. 31:15.300 --> 31:25.300 If you want, you can do low P or high P, but medium should work for most cases, including right now. 31:25.300 --> 31:36.300 And then we're going to declare a uniform, basically just a way to connect our draw file to our shaders. 31:36.300 --> 31:39.300 So we're going to declare a vec2. 31:39.300 --> 31:45.300 We're going to call it u resolution. 31:45.300 --> 31:52.300 OK, then again, we're going to have a main function. 31:52.300 --> 31:57.300 In our vec2, we're calling st. 31:57.300 --> 32:04.300 We're going to have that equal to the position of the pixel. 32:04.300 --> 32:12.300 That's GL, excuse me, underscore frag chord dot xy. 32:12.300 --> 32:18.300 And then divide that by our u resolution. 32:18.300 --> 32:24.300 And this is just going to give us normalized positions on the canvas. 32:24.300 --> 32:34.300 And then our fragment color, we're going to have that equal to a vec4. 32:34.300 --> 32:50.300 And then our st.x as our red value, then 0.0 for green, 0.0 for blue, 1.0 for alpha. 32:50.300 --> 32:54.300 And that is the entirety of our fragment file. 32:54.300 --> 33:02.300 So now when we pass it into the shader, we'll have an actual gradient that will work, hopefully. 33:02.300 --> 33:07.300 So now we go down to the draw function. We can get rid of the background function here. 33:07.300 --> 33:15.300 First things first, we need to set our shaders u resolution uniform. 33:15.300 --> 33:30.300 Set uniform u resolution to the width and the height of our canvas in an array. 33:30.300 --> 33:37.300 Then the shader function is going to set our shader. 33:37.300 --> 33:42.300 And then finally, all we need to do is declare a rectangle. 33:42.300 --> 33:48.300 It starts at 0.0, ends at the width and the height of the canvas. 33:48.300 --> 33:56.300 And if everything goes according to plan, we have a very basic gradient red shader. 33:56.300 --> 34:01.300 So and then we can also play around with the fragment color right here as well. 34:01.300 --> 34:11.300 So we can change this 0 to st.y, produce all sorts of different color combinations, divided by 2. 34:11.300 --> 34:16.300 2.0, we need to use floats. 34:16.300 --> 34:25.300 This is going to be what we're going to be working on right here, using a blur with the frame buffer def for our polygons. 34:25.300 --> 34:34.300 So if everyone has the link to the workshop for segment 8 starter code, is everyone good on that right now? 34:34.300 --> 34:40.300 Cool. So yeah, like I said before, we have the vertex and the fragment shaders. 34:40.300 --> 34:46.300 And then up here we have layers, a layer and then a blur variable. 34:46.300 --> 34:56.300 So let's just start off in the setup by setting the layer equal to create frame buffer. 34:56.300 --> 35:01.300 That's a frame buffer. The B is lowercase. So it's one word. 35:01.300 --> 35:09.300 It's going to return a frame buffer object so that you can draw to and then read as a texture. 35:09.300 --> 35:12.300 We'll get more into that when we get to the draw function. 35:12.300 --> 35:22.300 And then our blur is just going to be equal to the shader with the vertex and the fragment shaders here. 35:22.300 --> 35:30.300 And like before, we just add a no stroke to the setup. And that's it for the setup function. 35:30.300 --> 35:42.300 Now we just need to draw our circles. So let's start off the draw by doing layer dot begin. 35:42.300 --> 35:50.300 And first things first in our layers, we need to set the background. I'm just doing white. 35:50.300 --> 35:53.300 And then we're going to be playing around with the lighting as well. 35:53.300 --> 35:58.300 As you can see with the example I showed you before, it's kind of like shiny, I guess. 35:58.300 --> 36:01.300 So we need some directional light and some ambient light to account for that. 36:01.300 --> 36:08.300 So we're going to start off by declaring pretty simply ambient light. 36:08.300 --> 36:19.300 100 is just the color, grayscale color value here of the ambient light and then some directional light as well. 36:19.300 --> 36:28.300 It's going to take six parameters. This is the color 255, 255, 255 RGB, 36:28.300 --> 36:38.300 and then just the direction that the color is coming or the directional light is coming in rather in the XYZ coordinates. 36:38.300 --> 36:43.300 So it'll be a negative one, one and negative one. 36:43.300 --> 36:56.300 Cool. Now we're going to declare the ambient material function 255, 0, 0. 36:56.300 --> 37:07.300 The ambient material, it's the components of the ambient light that light that the better objects are actually going to reflect just the ambient light. 37:07.300 --> 37:15.300 On the other end, we have this specular material. This is kind of what is going to make our polygon shiny. 37:15.300 --> 37:26.300 We're going to set that to 255. And this is the color that all light reflects, including the directional light. 37:26.300 --> 37:38.300 So we need to set a, oh yeah, also we need to set our shininess as well to make sure our polygons are shiny. 37:38.300 --> 37:49.300 And then we need to set a fill value of our polygons. It's going to be orange, 255, 255, 100. 37:49.300 --> 37:56.300 And that's just our basic housekeeping for the draw function. Now we need to actually draw our polygons. 37:56.300 --> 38:00.300 So first off, as you saw in the example, it needs to rotate around the Y axis. 38:00.300 --> 38:09.300 And as I showed you before, we can do rotate Y. This time around, we'll use the millisecond function instead, millis. 38:09.300 --> 38:19.300 And then 0.001 as a multiplying factor. And now we're going to actually draw our spheres. 38:19.300 --> 38:29.300 So let's do for I equals zero, I is less than five plus plus I. 38:29.300 --> 38:34.300 And this part's fairly simple. We're going to start off with a push. 38:34.300 --> 38:40.300 And then we need to translate to make sure that all of our spheres are in the correct position. 38:40.300 --> 38:48.300 So in the X direction, we're going to translate it I minus two times 100. 38:48.300 --> 38:53.300 And this basically just guarantees that there's always going to be a sphere in the middle that's not going to move. 38:53.300 --> 38:58.300 And then the other ones kind of just rotate around it. 38:58.300 --> 39:03.300 And then we don't need to translate it in the Y or the Z direction. 39:03.300 --> 39:10.300 And then we draw a sphere. And then we pop. And then that's it. 39:10.300 --> 39:17.300 Once we get out of this, we end our layer. And now we need to just apply our blur. 39:17.300 --> 39:23.300 So like before, we call the shader function to apply our shader. 39:23.300 --> 39:28.300 And this time we have two uniforms to set. 39:28.300 --> 39:36.300 First uniform, I M G is going to be the color of the layer. 39:36.300 --> 39:45.300 And the other uniform, the depth is going to be layer dot depth. 39:45.300 --> 39:54.300 You can see in the file where that's set over here. It's in the fragment file. 39:54.300 --> 40:00.300 Again, you can figure out how that works after the workshop. 40:00.300 --> 40:04.300 And then we can do the exact same thing as before. 40:04.300 --> 40:12.300 Make a rectangle with zero zero to the width and the height of the canvas. 40:12.300 --> 40:16.300 And once we do that, we have our beautiful circles. 40:16.300 --> 40:22.300 They're coming right at the screen. 40:22.300 --> 40:26.300 And of course, there's a million ways we can play around with this. 40:26.300 --> 40:37.300 Can change the rotation in the X and Z direction as well. 40:37.300 --> 40:42.300 Give the ball some new behavior. 40:42.300 --> 40:46.300 Maybe add some new ones as well.