WEBVTT 00:00.000 --> 00:15.200 Great. All right. Thank you everyone for coming out again. So, yeah, like Stefano said, we're 00:15.200 --> 00:20.180 going to be learning about p5.js today. So, as I said before, it's a beginner-friendly 00:20.180 --> 00:25.600 JavaScript library with a full set of drawing and sound making functionalities, kind of 00:25.600 --> 00:29.880 similar to processing in case you've used something like that before. Today, we're going 00:29.880 --> 00:35.280 to cover just some basics, getting started on the application, as well as later on getting 00:35.280 --> 00:41.440 into some more advanced stuff like animation and interaction. But, yeah, I think the first 00:41.440 --> 00:49.040 thing we need to do is everyone got the links that have the eight sections, right? Did anyone 00:49.040 --> 00:56.240 not receive that? Okay. Perfect. So, I just want to show you guys how to make a duplicate 00:56.240 --> 01:04.160 here. So, is the text okay? Oh, there I am again. Is the text size okay for everyone? 01:04.160 --> 01:12.320 Can everyone see it here? Great. Okay. So, if you open up like a workshop one, part one 01:12.320 --> 01:16.520 right here, the eight sections, they're meant to be used as guide posts. I'm going to be 01:16.520 --> 01:21.040 live coding every single section. So, if you want, you can follow along with me in case 01:21.040 --> 01:25.840 you ever get sidetracked or anything. You can open this back up and then get back on 01:25.840 --> 01:31.840 the same page as everyone else. If you want to create a duplicate, so this one is owned 01:31.840 --> 01:36.880 by me right here. But if you guys open this, you won't have the ability to save. So, what 01:36.880 --> 01:42.400 you want to do is go to this duplicate function right here. And as you can see, it automatically 01:42.400 --> 01:49.840 makes a new file and a copy right here. So, you can name it whatever you want. Test. And 01:49.840 --> 01:55.520 then I have auto save enabled, but then you can save the sketch, go to your account right 01:55.520 --> 02:00.240 here, go to my sketches, and the test will appear right here like normal. So, you can 02:00.240 --> 02:07.720 edit around as much as you want. Okay. So, I guess without further ado, I'll get started. 02:07.720 --> 02:12.360 Just introducing to you some of the basics. Again, people that have used processing or 02:12.360 --> 02:17.680 IDEs like Arduino or things like that, this setup and draw functions might be familiar 02:17.680 --> 02:24.400 with you. This is what you get on like a blank sheet normally. It comes with these two functions 02:24.400 --> 02:29.920 and in those functions, we have the create canvas function and the background function. 02:29.920 --> 02:35.600 So, create canvas, fairly simple. It gives us the width and the height of the pixels 02:35.600 --> 02:41.200 for the canvas that we're using. And the background, this is going to be a color value. So, right 02:41.200 --> 02:47.680 now, this is only one input. So, it's going to be in grayscale. If you press play, you 02:47.680 --> 02:55.280 just get this kind of gray background. We can change the width and the height here, 02:55.280 --> 03:00.240 make it a little bit bigger. And so, the grayscale value is perfectly fine. If you want, you 03:00.240 --> 03:07.600 can also add RGB values, red, blue, green values here to make it whatever color you 03:07.600 --> 03:14.720 want. And you can also specify with strings. So, if you just want yellow, you can say yellow 03:14.720 --> 03:22.560 and P5.js will interpret that for you. So, in this workshop one part one file, I listed 03:22.560 --> 03:29.360 out a few of the most common shapes that we could use to draw. We can go over a few of 03:29.360 --> 03:36.160 them right now. If you want to play around a little more, I recommend going to this P5.js.org 03:36.160 --> 03:43.760 reference and you can see all the different functions, variables, everything that P5 has. 03:44.480 --> 03:46.880 Excuse me. You can see all the shapes here as well. 03:49.600 --> 03:53.360 But I figured I would list out a few of the most common ones because they all have different 03:53.360 --> 04:02.080 behaviors, too. So, for instance, the square, you can do a three variable or three input 04:02.640 --> 04:08.480 in the function, make the left corner X, the left corner Y, and the width and the height, 04:08.480 --> 04:12.880 those are going to be the three variables you're using. Same for the rectangle, except you need 04:12.880 --> 04:18.480 to specify the width and the height separately. You have circles and ellipses where instead of 04:18.480 --> 04:22.960 the upper left corner, because circles and ellipses don't have upper left corners, you use 04:22.960 --> 04:30.000 the centroid as your X and Y values, followed by the diameter of the circle or the width and height 04:30.000 --> 04:40.640 of the ellipse. And there are also lines, which you just specify the X1, Y1, and X2 and Y2 coordinates, 04:40.720 --> 04:45.840 and then that draws the line for you. And then some more advanced ones such as triangles, 04:46.400 --> 04:53.360 quadrilaterals, so like trapezoids and things like that, as well as arcs. So if you hit play on here, 04:53.360 --> 04:59.600 you can see all the different shapes. If you need to go back to this file at any point, just keep 04:59.600 --> 05:05.600 the tab open. But yeah, that's the end of the first part. Does anyone have any questions about this so 05:05.600 --> 05:14.400 far? We're all good? Excellent. Okay, so we'll move on to making something a bit more fun now. 05:14.400 --> 05:20.080 We'll get into actually drawing something. So I figured an easy enough thing to draw would be a 05:20.080 --> 05:27.520 smiley face like this guy right here. Reminds me to be happy. I like that. So we're just going to 05:27.520 --> 05:34.800 start off. I'll make the background pink on the canvas. I'll keep the same size here. Then so 05:34.800 --> 05:42.880 first, obviously, we need a circle to draw on the canvas. So now let's say you want to make everything 05:42.880 --> 05:50.080 proportional to what the canvas size is. We already declared that the canvas was going to be 500 by 500 05:50.080 --> 05:58.560 pixels. And because of that, p5.js automatically has width and height variables. So if you do a 05:58.560 --> 06:10.000 console.log of the width, as well as a console.log of the height, you'll see on the console that it is 06:10.720 --> 06:16.160 always 500. I forgot to mention that the draw function also runs in a continuous loop. The 06:16.160 --> 06:21.760 setup function only runs once. The draw function runs in a continuous loop, ideally, 60 times every 06:21.760 --> 06:28.800 second. I'll show you how to edit that a little bit later. So I'll stop that right now. And we 06:28.800 --> 06:36.160 need to draw a circle in the middle. So in that case, we have our x, which is going to be the width 06:36.160 --> 06:45.200 divided by the two. The height divided by the two is the y. And then a diameter, let's say, of 300 pixels. 06:46.000 --> 06:53.760 All right, here's our circle, nice white circle. We need a yellow circle for the smiley face. So we 06:53.760 --> 07:00.720 have a function called fill to accomplish that. We're going to fill it with yellow. And then 07:00.720 --> 07:06.240 personally, I just want the smiley face not to have a border around here. And there's another 07:07.200 --> 07:17.760 function we can use for that called no fill, or no stroke, excuse me. And there we have our 07:17.760 --> 07:27.200 beautiful strokeless circle. So we'll move on from there. First off, I want to add eyes and mouth. 07:27.200 --> 07:32.720 And we want to make all this proportional to the diameter of the smiley face. So I'm going to 07:32.720 --> 07:39.600 declare a variable called diameter for the smiley face first. JavaScript, for those unfamiliar, it's 07:39.600 --> 07:43.920 a weakly type language. So you don't need to specify if it's a number, if it's a string, 07:43.920 --> 07:49.120 whatever you just say let, or I guess in our case, it'll be const because we're not changing the 07:49.120 --> 07:57.040 diameter right now. So we're going to put that here, it's going to behave the same way. And now 07:57.040 --> 08:04.400 let's draw some eyes. Put some comments here for people to follow along. Here's the face 08:05.520 --> 08:12.080 and our eyes. So first off, we need to create a new fill color. Let's make that black. 08:14.960 --> 08:21.920 And we're going to need two ellipses to accomplish these eyes. So I did some math before this. And I 08:21.920 --> 08:28.080 came up with the values that I thought looked good on here. So it's going to be the diameter 08:28.960 --> 08:34.000 divided by eight, the negative diameter divided by eight, and then another negative diameter 08:34.800 --> 08:42.960 divided by eight. And then for the length and the width, diameter divided by 10. 08:44.000 --> 08:51.200 And diameter divided by three. I guess now's a good time to teach you the push and pop functions. 08:52.080 --> 08:57.440 So push, you're going to get rid of all the previous formatting, which includes the fill 08:57.440 --> 09:06.640 function here, no stroke, no fill. So it just basically sets you back to default state. And pop, 09:06.640 --> 09:12.800 you get all of the previous values that you put in back, essentially, if you're doing different 09:12.800 --> 09:18.000 shapes, I recommend doing push and pop for each of them so that you start off with a fresh thing, 09:18.000 --> 09:24.320 and then you move on. So probably best practice for this, because I want to have my smiley face 09:24.320 --> 09:31.760 central on the canvas, there's a function called translate here. So what that does is it sets where 09:31.760 --> 09:40.720 the new 00 on the canvas is. So right now 00 is going to be on the upper left corner. And if I do 09:41.520 --> 09:47.520 translate to width divided by two and height divided by two, then change these values to zero, 09:47.520 --> 10:00.400 hey, there's our eye. Voila. So this is actually, so because we took the diameter values, 10:00.960 --> 10:05.680 now that it's actually centered on the canvas, it's now put exactly where I wanted it. So 10:06.400 --> 10:14.000 we're just going to copy this ellipse over here and just change this from negative to positive. 10:14.000 --> 10:17.600 Now we have two eyes perfectly symmetrical on our little smiley guy. 10:19.600 --> 10:26.160 So all that's missing now is a mouth. So let's add push and pop functions, the push function. 10:27.200 --> 10:30.720 So to get rid of all the formatting, all the fills and the strokes, 10:30.720 --> 10:35.600 the pop function to pop it back to its original state. 10:35.760 --> 10:41.680 So we're going to add a mouth now to our smiley and we're going to accomplish that with an arch. 10:43.040 --> 10:49.040 Again, I did some calculations. We're going to stay right in the middle of the smiley, 10:49.040 --> 10:54.560 so it's going to be zero for the x value, the y value of diameter divided by five. 10:55.920 --> 11:03.920 And then we have the width and height, diameter divided by three for both of those. 11:05.600 --> 11:11.840 So we're going to do both. And then for the arch, we have a start and end point because we can draw 11:11.840 --> 11:19.120 any variety of semicircles that we want, basically. So we're going to start at zero and then end at 11:19.120 --> 11:24.640 pi. These are in radian, so we always want to do it in relation to pi. So now we have a little 11:24.640 --> 11:34.880 mouth for our guy. I want to fill it black. And I'll put a push and a pop right here as well. 11:36.240 --> 11:44.000 And let's say that I don't want it filled as well. I can do a no fill function right here. 11:45.120 --> 11:52.560 And now it just has the outline of the smiley. I can also adjust the stroke weight so that the 11:53.280 --> 11:58.320 smile doesn't look so small, I guess. We can actually see it. Stroke weight, again, 11:58.720 --> 12:05.040 needs to be in relation to the diameter. So let's say divided by 40. I think that gives us a pretty 12:05.040 --> 12:10.320 good smile there. We can adjust that however we want if we want the smile to be really big. 12:12.480 --> 12:21.040 So yeah, after that, we have our smiley face. So let's say we want to add some new features 12:21.040 --> 12:27.600 for our smiley, different face colors, different eye colors. First things first, what I want to do 12:27.840 --> 12:35.680 is put all this code into a function because I want to draw multiple smileys. 12:37.520 --> 12:43.760 I'm going to cut that out. I'm going to create a new function down here called makeSmiley. 12:49.600 --> 12:56.000 Here we go. And then in our draw function, I'm going to call that makeSmiley function 12:56.000 --> 13:04.160 over and over again. And we have it exactly the same as before. So now that allows us to be a bit 13:04.160 --> 13:11.040 more creative with what we're going to do with Mr. Smiley here. So for instance, let's change up 13:11.040 --> 13:23.440 his diameter. So let's move the diameter over here. P5.js also gives a random function here, 13:23.440 --> 13:27.760 takes many variables. But for this one, I'm just going to pick a random number between 13:28.640 --> 13:34.800 0 and 400. And that's all you need to do is just put a number in here to change the random value. 13:36.160 --> 13:42.320 And then, so now we don't have a diameter variable here, as you can see by this error. So we're going 13:42.320 --> 13:50.240 to make this a function variable diameter. And we're going to put the diameter in here. And then 13:50.240 --> 13:55.760 it should function exactly the same way, except that is going to upset some people that are prone 13:55.760 --> 14:04.160 to epilepsy. So I'm going to change the frame rate as well in case that is affecting you. So as I 14:04.160 --> 14:12.080 said, the draw function runs 60 times every second. So we can choose a number between 1 and 60. For 14:12.080 --> 14:18.400 us, I'll choose 5 this time so that the draw function only runs 5 times every second. So it 14:18.400 --> 14:24.720 should look much nicer now. 5 times every second, we're getting a new smiley generated, 14:24.720 --> 14:33.680 getting progressively closer to us and back. It's mesmerizing. So yeah, so let's change up the 14:33.680 --> 14:41.120 colors. Oh, actually, let's change up the positions first. So we can also change our x and y values. 14:41.120 --> 14:48.640 So let's make x a random number between 0 and 500. And let's make y a random value 14:49.840 --> 14:56.000 between 0 and 500. Let's add those to the makeSmiley function as well. 14:58.480 --> 15:08.960 x and y. And then let's translate based on the x and the y that we have given our makeSmiley function. 15:09.680 --> 15:16.800 And now our smiley is shrinking and inflating and moving all over the place like a small child with 15:16.800 --> 15:28.640 ADD. Yeah, so now let's change up the color too while we're at it. So we're going to need to 15:28.640 --> 15:36.240 change the fill color here to a random number between 0 and 255 in case you didn't know how 15:36.240 --> 15:43.600 the RGB values work. They'll change with values ranging from 0 to 255. So 15:45.440 --> 15:48.000 we'll put three of those in there for the eyes. 15:50.800 --> 15:56.720 So every time we draw a new smiley, we have a new eye color. We can do the same thing for the face. 16:01.200 --> 16:05.920 And we have different face colors, different eye colors, different sizes, different positions. 16:06.880 --> 16:15.680 All fairly simply using the random keyword. Wonderful. Okay, cool. So next part of the 16:15.680 --> 16:20.400 workshop is going to be the last part about just purely drawing. We're going to, instead of making 16:20.400 --> 16:26.000 something completely random, we'll make something a little more structured. So in this case, 16:26.000 --> 16:33.360 I want to create a dynamically sized grid of smiley faces. So whatever logo that you've chosen, 16:33.360 --> 16:36.880 smiley faces, whatever, we're going to keep this makeSmiley function, 16:36.880 --> 16:42.240 but we're going to remove all of the random variables that we've had so far. 16:43.600 --> 16:47.840 We'll keep diameter because we need to have diameter, but that's going to be different. 16:49.360 --> 16:54.800 Okay, so we have a grid. So obviously, we're going to need some columns and some rows. So I'm going 16:54.800 --> 17:08.080 to columns equal to 10 columns, and rows equal to 10 rows to start off with. So for each grid, 17:08.080 --> 17:13.040 we're going to need a cell. And we need to know the length and the width of those cells as well. 17:13.920 --> 17:20.720 So let's let the cell width equal to the total width of the whole canvas, 17:21.680 --> 17:27.520 divided by the number of columns. And the same thing for the cell height, 17:28.560 --> 17:33.840 we're going to make that the height divided by the number of rows. 17:36.480 --> 17:45.120 All right. So if everyone's on the same page, now we can move on to defining our x's and y's. And 17:45.120 --> 17:50.640 because I want to have a whole grid of smileys on the screen at a time, we're going to need to add 17:50.640 --> 17:54.800 a for loop into our draw loop. Now we need to be a little bit careful with this. And I'll show you 17:54.800 --> 18:00.400 why a little later. But for now, we're just going to add a couple of nest for loops in here. 18:01.360 --> 18:09.200 Fairly simple. We're going to let i equals zero, i is going to be less than the width of the can, 18:09.200 --> 18:14.240 I'm sorry, yeah, the width of the canvas. Yes. Yeah. Oh, I'm sorry. No, no, no, I'm sorry. The 18:14.240 --> 18:23.600 number of columns, that's what it is. And plus plus i, add one to i every time, then we're going 18:23.600 --> 18:31.120 to let j equals zero and do the same thing for the number of rows as well, plus plus j. 18:34.160 --> 18:42.080 So first off, actually, before we get into the for loop, we need to define our diameter variable, 18:42.080 --> 18:47.200 because that's going to be the same for each of our cells. And that is simply going to be 18:48.160 --> 18:59.360 the minimum of the cell width and the cell height. In our case, it's going to be both, 18:59.360 --> 19:05.280 I forgot to put an equal sign there. So it's just going to be the exact same value. But if 19:05.280 --> 19:08.880 we change this around, we want to make sure the diameter is adjusted as such. 19:10.960 --> 19:17.040 All right, wonderful. Let's make our smileys. So we need to define our x and y variables like before, 19:17.760 --> 19:20.480 except this time, we're not making it random needs to be 19:22.480 --> 19:31.520 defined with some purpose, I guess. So let's make the x value equal to i times the cell width. 19:36.240 --> 19:43.360 Plus the cell width divided by two, because we want to put it in the middle of our cell. 19:45.360 --> 19:53.680 And let's do the same thing for our y value as well, except we're going to have j times the cell 19:54.000 --> 20:01.360 height. Add that to the cell height, divided by two. 20:04.400 --> 20:10.560 And there we have our x and y values. Is that clear to everyone? Wonderful. 20:13.120 --> 20:18.960 So now we have all of the variables that we need for our make smiley function. 20:18.960 --> 20:26.480 So all that's left to do is to take that line and put it inside the for loop here. 20:27.600 --> 20:32.880 And we're going to press play. And then we're going to see our smileys are not in a grid. 20:34.800 --> 20:40.320 And that is because we translate here at the start of the make smiley function, 20:40.320 --> 20:46.640 the translate function resets every time we go through a draw loop. So because we've decided 20:46.640 --> 20:52.400 to draw all these smileys in these nested for loops, we need to actually reset the translation 20:52.400 --> 20:59.600 every single time if that is the route that you're going down. So we'll translate by negative x and 20:59.600 --> 21:10.480 negative y to reset it. And here we have our smiley friends. Mesmerizing. You can change the 21:10.480 --> 21:18.800 column variable. Let's have 20 columns instead. And let's have five rows now. And as you can see, 21:18.800 --> 21:22.880 it dynamically allocates space for all the different smileys here so that there isn't 21:22.880 --> 21:25.920 any overflow and you get the exact number of columns and rows you need. 21:27.920 --> 21:32.240 I still have the random colors on as well. So they kind of look like Christmas lights. 21:32.880 --> 21:36.880 Feel free to change that up too if you feel necessary. 21:38.720 --> 21:44.480 So yeah, that's the end of part four. Is there any questions right now? 21:47.440 --> 21:52.320 Okay, so for those that are online, we're asking about creating a random color function. 21:54.160 --> 21:59.840 And I believe that's just as easy as creating a function down here. We'll call it make color. 22:03.120 --> 22:09.440 And we're going to return, I believe there's just a color of, 22:10.240 --> 22:16.080 and it's the same thing as before, basically random 255, random 255, random 255. 22:21.520 --> 22:26.080 So instead of typing 255 every time, ideally, you can just call 22:26.080 --> 22:29.920 the make color function, and I think it'll work. Let's see. 22:32.960 --> 22:36.000 Yes, it works exactly the same. So you can do that with the eyes as well. 22:41.440 --> 22:45.120 And it works exactly the same. If anyone wants that, you can have this, 22:45.120 --> 22:49.040 it makes your code a little bit neater. But yeah, thank you for the question. 22:51.440 --> 22:59.920 All right, amazing. So does everyone remember when they were a kid and used to watch this for hours, 22:59.920 --> 23:06.080 right? Sometimes it was better than the movie itself. So I think we're going to do the same 23:06.080 --> 23:14.240 thing right now, but with our smiley guy. And that'll kind of teach us how to do some basic 23:14.240 --> 23:24.880 animation on p5.js. So let's get rid of our grid. Goodbye. Let's hard code the diameter again, 23:24.880 --> 23:30.960 let's say 200 this time. Let's get rid of our columns and rows. 23:33.280 --> 23:44.400 So all we have left is this. So the easiest way to do animation with p5.js is just to run the 23:44.400 --> 23:51.280 draw function over and over and over again, and then just say, plus plus an x or y variable, 23:51.280 --> 23:58.720 add by one. So let's create some global variables first off. Let x equals zero, 23:58.720 --> 24:09.040 and let y equal zero as well. And let's call the make smiley function with our x, y, and diameter. 24:11.200 --> 24:20.800 Oops, sorry. And let's, every time the draw function is run, let's y plus plus, add one to y. 24:20.880 --> 24:30.240 So, oh, we need to get rid of our frame rate here. And then also, I'd recommend again, for the 24:30.240 --> 24:36.160 epilepsy prone, maybe don't do the make color here. Maybe let's make this a solid color. Let's 24:36.160 --> 24:47.040 go back to yellow and black. Great. Get rid of our frame rate, so it runs as fast as possible. 24:47.680 --> 24:55.600 And our smiley guy is slowly falling off the screen. Let's center him on the x-axis too, 24:55.600 --> 25:02.320 so you can see all of them falling, falling, falling. So let's speed it up a little bit. 25:02.320 --> 25:13.920 Let's declare some x speed and y speed values as well. So it'll be five pixels every time it's 25:13.920 --> 25:21.120 called instead of just one. So we'll have y plus equals y speed instead of just adding one every 25:21.120 --> 25:26.080 single time. Now he falls five times as fast. And there he goes off the side of the screen, 25:26.080 --> 25:35.040 never to be seen again. Unless, of course, we want to see him. So we're going to create 25:35.040 --> 25:49.680 just a small reset function down here. So let's say if y is greater than the height of our canvas, 25:49.680 --> 25:56.320 going to get rid of the auto refresh first, then we're just going to set y equal to zero. 25:57.760 --> 26:02.480 You're going to start this, and right before he's about to fall off, he goes back up to the top. 26:03.440 --> 26:09.360 So this is probably the easiest way to do our continuous animation. While we're here, 26:09.360 --> 26:15.840 I'll do the same thing for x as well. We're going to plus equal the x speed, 26:18.800 --> 26:21.920 and it goes off the side as well. So we need to reset this one as well. 26:22.560 --> 26:31.120 If x is greater than the width of the canvas, then we set x back to zero. So now our smiley guy is 26:31.120 --> 26:39.120 going diagonally, but resetting back to the top every single time. And like before, we can add 26:39.120 --> 26:46.960 some randomness to this as well. So we can make the speed random number between, let's say, zero 26:46.960 --> 26:56.800 and 10. Maybe not zero. Let's do one in 10. Oh, yes, I'm sorry. You can't declare random right 26:56.800 --> 27:02.560 here because it's in the global. So you actually need to put that in the setup function. My bad. 27:03.600 --> 27:11.120 So you're going to have x speed is equal to random from 1 to 10, and y speed 27:12.320 --> 27:19.920 equal to random 1 to 10 as well. So now every time this generates, 27:19.920 --> 27:22.960 there should be different speeds for both the x and the y axis, 27:23.280 --> 27:26.480 giving you different kinds of animations every time you refresh. 27:29.040 --> 27:37.760 Okay, so I think we'll move on a little bit then. Getting from instead of resetting at the top every 27:37.760 --> 27:44.880 time, we're actually going to bounce now. And that's not too hard, honestly. So we're going to 27:44.880 --> 27:50.480 need to add an extra if statement here. So we'll say if x is greater than the width, 27:51.200 --> 28:00.000 if x is greater than the width, or x is less than zero, instead of resetting it back to zero, 28:00.000 --> 28:10.480 we need to set x speed to x speed times negative one. 28:12.960 --> 28:16.560 So as you can see, now it bounces along the x axis when it hits the wall. 28:17.520 --> 28:25.760 And we can do the exact same thing for the y axis. But replace that with 28:27.760 --> 28:36.480 y speed instead of x speed. So now our smiley guy bounces all around, 28:37.920 --> 28:46.160 just like the good old DVD logo. Something else that I think is fun just for artistic reasons, 28:46.240 --> 28:54.960 I guess, so we can put the make color back here, actually. So we can generate different faces and 28:54.960 --> 29:04.400 oh, maybe not. Let's slow it down. Let's go 40. And let's up the speed a bit. 29:06.080 --> 29:09.200 So can be nicer. No, it just looks worse. 29:09.360 --> 29:14.480 Anyway, I'll just I'll show you what I mean here. So let's, instead of having the background 29:14.480 --> 29:20.320 function in the draw function, we're going to move the background up to the setup instead. 29:22.000 --> 29:28.560 So we still draw a pink background to start, but our smiley faces stay persistent on here. And I 29:28.560 --> 29:36.000 think that creates a pretty cool effect. Wonderful. All right. So, 29:36.400 --> 29:42.320 now that we've got some animation under our belt, we can start off with some interaction 29:42.880 --> 29:50.000 instead. So we can interact with our canvas. So there's a bunch of event functions and variables 29:50.000 --> 29:59.360 that we can use to assist in that. So the easiest one, let's say for our make smiley, we only want 30:00.080 --> 30:08.880 to draw our smileys if the mouse is pressed on the canvas. So fairly simple. If mouse is pressed. 30:09.760 --> 30:14.400 First off, you see, if you have the auto assist on like I do, if you right mouse, 30:14.400 --> 30:19.040 you can see all the different things you can do right here. So I'm just going to walk you 30:19.040 --> 30:25.360 through a few of them right now. So mouse is pressed. And if that's the case, we're going to 30:25.840 --> 30:31.280 And if that's the case, we're going to make a smiley. So let's see what happens now. We have 30:31.280 --> 30:37.040 a blank background. Nothing's being drawn until I click the canvas and our smileys get drawn. 30:38.160 --> 30:45.200 Then I let go and smiley stop. Click again, smileys come back. I think you guys get the point. 30:45.280 --> 30:58.880 Okay, so let's say forget the speed, forget the bounce for right now. Let's only draw the smiley 31:00.400 --> 31:08.560 where we put the mouse on the screen. So instead of our x and y variables, we have predefined 31:09.360 --> 31:18.320 mouse x and mouse y variables that we can pass directly into here. So now our smiley. 31:18.320 --> 31:22.160 Oh, let me get rid of that again. I apologize. 31:25.440 --> 31:34.880 And our eyes back to black. And now our smiley gets drawn wherever we whenever we click our mouse 31:34.880 --> 31:40.640 and wherever our mouse is. So now we can do something fun like make smileys with our smileys. 31:48.160 --> 31:53.280 Okay, so now that we have a few variables under our belts, we can also look at some functions. 31:54.080 --> 32:01.680 So down under here, a pre determined event function, mouse pressed. 32:05.360 --> 32:08.400 Like it says, whenever the mouse is pressed, this function will get called. 32:08.400 --> 32:13.680 So let's do that. And let's change the background to a random color. 32:18.880 --> 32:22.640 So now mouse gets pressed, new color, mouse gets pressed, new color. 32:26.320 --> 32:29.680 Easy enough. We also have a function for 32:30.400 --> 32:36.480 the mouse being released. Works exactly the same way. 32:40.080 --> 32:45.280 So now new color when the mouse is pressed, new color when the mouse is released. 32:51.120 --> 32:56.320 One more function. Mouse dragged. 33:00.480 --> 33:06.560 And this gets called every time you drag the mouse so it can be called multiple times every second. 33:06.560 --> 33:13.440 It's not just when you drag it once. So in that case, I'm just going to change the background to 33:14.800 --> 33:24.560 blue. So now we have these three functions defined, our mouse is clicked, our mouse is dragged, 33:24.560 --> 33:29.040 and our mouse is released. Random color, blue, random color. 33:32.000 --> 33:38.800 All right, let's continue on here. So in the same way that we had some mouse functions before, 33:38.800 --> 33:46.720 we also have some key functions and variables as well. A little bit less here, but I'll show 33:46.720 --> 33:52.960 you how to use a few of them right now. So let's first off, let's get rid of if mouse is pressed. 33:54.640 --> 34:02.480 And let's make our smiley x and y again. We should still have x and y declared up here. 34:03.920 --> 34:11.440 So first things first, there is a key is down function. 34:14.320 --> 34:22.080 So we'll say if our key is down, and then there are different codes for all the different keys. 34:22.080 --> 34:31.280 So for instance, up arrow. So if our up arrow is pressed, we want our smiley to go up, obviously. 34:31.280 --> 34:39.680 So that's going to be done by doing y minus equal the y speed, subtracting the y speed. 34:41.440 --> 34:49.520 So if you click on our canvas now, there he goes. Let me bring the background back over here. So you 34:49.520 --> 35:03.680 can see that a bit better. There he goes. Else if he is down is the down arrow. 35:05.040 --> 35:12.320 Can we see where this one's going? Y plus equals the y speed. 35:12.320 --> 35:20.080 Click the canvas again, there he goes, up, down, up, down, up, down. 35:20.960 --> 35:24.720 I'm going to change the speed a little bit because that's way too fast for my taste. 35:32.160 --> 35:37.360 And we can do the same thing for our x speed as well. 35:42.640 --> 35:54.000 So if the key is down for the left arrow, we want our x minus equal the x speed. 35:55.840 --> 35:58.800 Test to see if that works. Oh, I'm sorry, capital X, my bad. 36:02.960 --> 36:10.080 There he goes. Much faster that way. Oh, it's because we still have random speed zone. That's why. 36:12.720 --> 36:17.840 There he goes. And for our right arrow. 36:22.720 --> 36:32.160 Our x plus equals the x speed. So now we are in control of all four different directions, 36:33.200 --> 36:40.240 but we can't go diagonal. And that can be fixed pretty easily by just removing these else's. 36:43.280 --> 36:45.280 If you feel like going diagonal, that is. 36:46.320 --> 36:50.240 So now if you hold down two arrows at the same time, our smiley can go diagonal. 36:55.680 --> 36:57.200 Cool. All right. 37:02.720 --> 37:08.400 So I also want to show you how to add text and messages and stuff to the canvas as well. 37:08.720 --> 37:16.720 So we can go up to our global variables here. And let's declare a message variable equal to 37:16.720 --> 37:23.520 an empty string right now. So we want to display our message. Let's just call it hello world right 37:23.520 --> 37:33.920 now. So if we want to display our message on the canvas, all we need to do is add a little bit of 37:33.920 --> 37:45.840 code here. We'll create the text size. Let's call it 70 right now. And then this text function 37:45.840 --> 37:54.400 right here, we're going to have our message followed by the width and or the sorry, the 37:54.400 --> 38:02.640 height and the width of the function with night excuse me again. I'm sorry, not within the height, 38:02.640 --> 38:09.920 the position of where the function is on the canvas. So down a little bit more to the right 38:09.920 --> 38:15.920 a bit more. Hello world and our smiley can dance around it. 38:19.680 --> 38:25.680 If we want to dynamically change this text as well, we have some functions that allow that. 38:26.640 --> 38:30.560 So let's do the function key type. 38:35.680 --> 38:42.960 So as you would guess, function gets called every time a key gets typed. And all you need to do here 38:42.960 --> 38:52.000 is message plus equals the key the variable key. So now when you have Hello World, and you type an 38:52.080 --> 38:58.560 exclamation point, it adds on here. But you can't backspace that's because the key type function 38:59.120 --> 39:07.040 doesn't look at spaces backspaces any auxiliary keys typed. So for that you need a new function 39:08.720 --> 39:18.960 called key pressed. And when you press a key like a backspace or a space, 39:18.960 --> 39:26.160 then it'll actually be added to the message. So instead of key this time around, we have 39:26.160 --> 39:35.760 if the key code is equal to an all caps backspace, we're going to pop off the end of the message 39:37.120 --> 39:47.920 by doing this. And now we can backspace our string, add new text, get rid of it, like so. 39:49.920 --> 39:57.920 So that's message equals message dot slice, and then zero and negative one as the variables. 39:59.360 --> 40:04.400 Okay, everyone, thank you very much for attending the first workshop here. 40:05.840 --> 40:09.840 Yeah, we'll be doing more of these workshops throughout the semester as Stefano is about to 40:09.840 --> 40:14.880 explain. And it's going to be building off of this. So feel free to play around more of this 40:14.880 --> 40:25.840 after the workshop. And yeah, I hope to see you back here next month.