WEBVTT 00:00.000 --> 00:12.460 In this workshop, we're going to be working a little bit more with our smiley guy here, 00:12.460 --> 00:17.100 teaching a little bit more of the basics and then getting into using images as well as 00:17.100 --> 00:20.840 sound in p5.js. 00:20.840 --> 00:24.980 So without further ado, I guess we'll just start off then. 00:24.980 --> 00:30.660 So what I want to do first is our smiley guy is looking a little lonely up there. 00:30.660 --> 00:33.460 So we're going to add some friends. 00:33.460 --> 00:36.780 One way to do that we can work with some parallel arrays. 00:36.780 --> 00:43.740 So up here where we declare all of our variables, we're going to replace equals just a normal 00:43.740 --> 00:46.900 number or function or something like that. 00:46.900 --> 00:50.580 We're going to replace that with an array instead. 00:50.580 --> 00:52.220 So let's just get rid of that. 00:52.220 --> 00:55.740 Let's make our face color an array as well. 00:55.740 --> 00:59.020 I color is equal to an array. 00:59.020 --> 01:00.500 Diameter is an array. 01:00.500 --> 01:06.420 Now 50 x speed as well as y speed. 01:06.420 --> 01:12.740 And the only other thing we need to declare up here is the number of smileys we want to 01:12.740 --> 01:15.020 draw. 01:15.020 --> 01:17.900 I'm going to start off with five. 01:17.900 --> 01:22.860 So now we can get into the setup function. 01:22.860 --> 01:27.460 So going to want to create all of our smileys in the setup function right here. 01:27.460 --> 01:29.380 So we're going to start with a for loop. 01:29.380 --> 01:34.900 So for i is equal to zero. 01:34.900 --> 01:44.500 And if i is less than the number of smileys that we declared, plus plus i. 01:44.500 --> 01:51.740 Then we're going to add a new variable into each of these parameters here. 01:51.740 --> 02:02.260 So let's say x in the i index is equal to a random number between zero and the width. 02:02.260 --> 02:12.820 Same with y, the random number between zero and the height of our canvas. 02:12.820 --> 02:18.100 Our face color for i is still going to be make color. 02:18.100 --> 02:24.960 I'm going to get rid of these two right here as well so we don't get an error. 02:24.960 --> 02:26.900 And our i color as well. 02:26.900 --> 02:32.280 It's going to be equal to make a random color. 02:32.280 --> 02:40.560 Then finally, we need our x speed to be a random number between, say, 110 and our y 02:40.560 --> 02:46.120 speed to be the exact same thing. 02:46.120 --> 02:55.400 And our diameter of our smiley to be a random number between, say, 20 and 100. 02:55.400 --> 02:57.200 Well, maybe 200. 02:57.200 --> 02:59.320 How about that? 02:59.320 --> 03:05.840 So this is going to declare as many smileys as we said for it to. 03:05.840 --> 03:10.240 And the only other thing we need to do now is go down to the draw function. 03:10.920 --> 03:15.880 And instead of having all of these just be variables, they need to be indexes of arrays. 03:15.880 --> 03:21.120 So we're going to take just the same for loop up here. 03:21.120 --> 03:25.520 Move that right above the draw smiley. 03:25.520 --> 03:29.860 Put that all in our for loop. 03:29.860 --> 03:30.860 Take the i index. 03:30.860 --> 03:33.320 I'm just going to copy and paste this over and over again. 03:33.320 --> 03:34.320 It's a little annoying. 03:34.320 --> 03:44.680 But it'll be worth it when we have friends for our smiley guy. 03:44.680 --> 03:50.520 So we're just going to paste over everything that we used previously. 03:50.520 --> 04:00.320 And then ideally, we should be able to refresh our browser and get an error, of course. 04:01.320 --> 04:05.680 Yes, it's because I did not. 04:05.680 --> 04:10.480 Oh, yeah, add the i indexes up here. 04:10.480 --> 04:12.040 That makes sense. 04:12.040 --> 04:16.120 And now we have all of our smiley guys smiling and bouncing together, 04:16.120 --> 04:18.840 all in random configurations. 04:18.840 --> 04:23.520 Can increase the number here, make it even more filled. 04:23.520 --> 04:26.480 Can have 100 smileys, kind of. 04:27.480 --> 04:30.760 Wonderful, wonderful. 04:30.760 --> 04:37.720 So this is an option if you want to, say, have different kinds of objects with the same 04:37.720 --> 04:38.720 kind of behavior. 04:38.720 --> 04:43.120 So for instance, if we want a frowny face and a smiley face to have the same kind of 04:43.120 --> 04:45.680 bounce characteristics. 04:45.680 --> 04:48.400 But we only have one object here, we have the smiley face. 04:48.400 --> 04:56.120 So the other way we can go about doing that is by creating a class in p5.js. 04:56.760 --> 04:59.240 So I'm just going to show you how that gets done down here. 04:59.240 --> 05:05.560 So anywhere you want, you can start writing our class function for our smiley. 05:05.560 --> 05:13.880 And of course, all classes need to have a constructor. 05:13.880 --> 05:24.480 And all we're going to do for that is just take what we had up here and apply it to our 05:24.480 --> 05:25.480 constructor. 05:25.840 --> 05:30.320 And we're going to have arrays of smileys inside of our class smiley. 05:30.320 --> 05:38.560 So also, an easy way to do this is just go to our edit for the code here, go to replace, 05:38.560 --> 05:44.320 then anywhere that you've indexed with i, just replace it with nothing, replace all. 05:44.320 --> 05:49.800 We don't need that anymore, because we're getting away from parallel arrays. 05:49.800 --> 05:53.240 And the only thing you need to add now, this constructor, because it's a class, we're going 05:53.240 --> 05:59.040 to add a this dot to make them class variables. 05:59.040 --> 06:02.880 So you can access them in different functions. 06:02.880 --> 06:09.520 So this dot y, this dot face color, this dot eye color, this dot x speed, this dot y speed, 06:09.520 --> 06:11.840 and this dot diameter. 06:11.840 --> 06:13.320 Cool. 06:13.320 --> 06:19.600 Alright, so now we have our smiley constructor here. 06:19.600 --> 06:25.900 So we can do a little bit of surgery up here, get rid of this. 06:25.900 --> 06:31.280 So for the number of smileys we have, we just need to create a new smiley. 06:31.280 --> 06:39.840 So and also all of these parallel arrays can go because we're only doing an array of smileys 06:39.840 --> 06:42.560 now. 06:42.560 --> 06:43.560 Really saves on code. 06:43.560 --> 06:46.560 It's very nice. 06:46.560 --> 06:50.940 And now we're going to declare new smileys in our smiley array. 06:50.940 --> 06:58.400 So we're going to call smileys, i is equal to a new smiley. 06:58.400 --> 07:09.440 And this in turn will provide it with all of the numbers that we have coded for it here. 07:09.440 --> 07:13.440 These are squares. 07:13.440 --> 07:14.440 Interesting. 07:15.320 --> 07:17.720 Anyway, so we're going to move on. 07:17.720 --> 07:22.680 And we're going to kind of clean up our draw function, as well as get rid of our get smiley 07:22.680 --> 07:26.940 function, put them all inside of the smiley class instead. 07:26.940 --> 07:34.600 So let's go down here, create a new class function, call it move. 07:34.600 --> 07:41.680 And this is going to do everything that's currently in our draw function. 07:41.680 --> 07:47.120 So we're moving it by the x speed and the y speed and then bouncing if it's a wall. 07:47.120 --> 07:48.640 So we're pasting that in there. 07:48.640 --> 07:53.280 And like before, because we are editing these class variables, we need to add a the stop 07:53.280 --> 07:57.680 beforehand. 07:57.680 --> 08:03.640 Okay. 08:03.640 --> 08:07.400 And then all of these should work to move our smiley. 08:07.400 --> 08:15.040 And then the last thing we can do is draw our smiley as well. 08:15.040 --> 08:20.360 I'll say draw smiley, actually. 08:20.360 --> 08:32.640 So like before, we can just take everything from our draw smiley function, copy it, and 08:32.640 --> 08:40.880 I'm just getting rid of it and pasting it back into here. 08:40.880 --> 08:46.400 And as a little cheat this time, because there'd be a lot of instances of class variables to 08:46.400 --> 08:56.280 use, I am just going to do a pretty simple let x equal this dot x, let y equals this 08:56.280 --> 09:00.700 dot y, it's a little bit of a hack, but because it would take a lot more time to recode this 09:00.700 --> 09:03.780 whole thing anyway, this is much faster. 09:03.780 --> 09:15.340 So let the x speed equal this dot x speed, let y speed equal to this dot y speed, let 09:15.340 --> 09:22.740 the face color, actually, it's not an equal sign at all, but the face color equal to this 09:22.740 --> 09:35.620 dot face color, let the eye color equal to this dot eye color, and let the diameter equal 09:35.620 --> 09:39.300 to this dot diameter. 09:39.300 --> 09:42.840 Cool. 09:42.840 --> 09:49.300 So after all that, you can just completely get rid of the draw smiley function. 09:49.300 --> 09:56.780 And we'll need to slightly edit our draw function now, getting rid of all this. 09:56.780 --> 10:00.500 And now we can use the same for loop from up here. 10:00.500 --> 10:12.380 For the number of smileys that we have up here, we're just going to call the smileys 10:12.380 --> 10:17.620 eye dot move first. 10:17.620 --> 10:28.420 And then smileys eye dot draw smiley is that yes, that's what I called it. 10:28.420 --> 10:32.820 So it's doing all the same thing as before, but in a slightly different way, slightly 10:32.820 --> 10:37.140 better organized way, still giving me this error. 10:37.140 --> 10:41.260 I believe that might be because I have an unmatched. 10:41.260 --> 10:43.860 Yes, here we go. 10:43.860 --> 10:45.740 That's why. 10:45.740 --> 10:49.580 And works the same as before, but it's just a little bit cleaner now. 10:49.580 --> 10:55.040 Now that we have the smileys all in class, it makes it a lot easier to add more things 10:55.040 --> 10:56.040 to the smileys. 10:56.040 --> 11:00.060 So what I want to do now is add a little bit of a tail to it, kind of like what you do 11:00.060 --> 11:02.180 with your mouse right here. 11:02.220 --> 11:07.740 So you can see where the smileys came from, basically. 11:07.740 --> 11:12.180 So let's get started down here in the constructor. 11:12.180 --> 11:19.500 First off, so we're going to declare an array called trail. 11:19.500 --> 11:20.980 Make that an array. 11:20.980 --> 11:24.420 And then however long you want your trail to be. 11:24.420 --> 11:34.980 So for me, I'm going to call this trail size equal to, say, 50. 11:34.980 --> 11:40.900 And then we can create an entirely new function for this. 11:40.900 --> 11:49.180 And let's call it draw trail. 11:49.180 --> 11:58.700 So we're going to start off draw trail by taking our trail array and then pushing inside 11:58.700 --> 12:04.700 of it a new P5 vector. 12:04.700 --> 12:08.420 And a vector is just normal Euclidean vector. 12:08.420 --> 12:14.180 You can put x, y and z coordinates in it and can get magnitude and direction with that 12:14.180 --> 12:15.460 if you go down deeper. 12:15.460 --> 12:17.540 I'm just going to show you how to use it right now. 12:17.540 --> 12:27.980 So this dot x and this dot y are going to be our vector x, y coordinates for right now. 12:27.980 --> 12:39.100 And then we're going to say if our trail, I'm sorry, this dot trail, if the length of 12:39.100 --> 12:48.900 that is greater than the size of the trail that we've declared, then we're going to call 12:48.900 --> 12:52.460 this dot trail dot shift. 12:52.460 --> 13:00.380 And the shift function just takes the first element in the array and pops it out. 13:00.380 --> 13:04.820 And then also, if you wanted to, you could return it into a variable. 13:04.820 --> 13:08.920 So you put that into dummy, but we don't need that this time. 13:08.940 --> 13:16.360 So we're just going to take the first value, first vector out, rather, excuse me. 13:16.360 --> 13:30.880 And then for every value in the trail, so I equals zero, I is less than the trail length, 13:30.880 --> 13:37.560 whatever the current length of the trail is, plus plus I. 13:37.560 --> 13:46.960 Then we're going to let our point equal to this dot trail I, the index currently of the 13:46.960 --> 13:48.960 trail. 13:48.960 --> 13:54.440 And then we're going to make the size of our trail, it's going to want to go increasingly 13:54.440 --> 13:55.440 down. 13:55.440 --> 13:57.520 So the first element, or actually, it's going to go increasingly up. 13:57.520 --> 14:01.000 So the first element of the array, it's going to be a really small circle, then it's going 14:01.000 --> 14:04.240 to keep increasing as you go closer to the smiley. 14:04.240 --> 14:11.960 So the way we're going to do that is we're going to take the diameter of the smiley and 14:11.960 --> 14:21.760 multiply that by our I index divided by this dot trail dot length. 14:21.760 --> 14:25.880 Cool. 14:25.880 --> 14:34.280 So once we have the point that we're using and the size of that point, we're going to 14:34.280 --> 14:41.080 first off, call the push function from before, I'm going to do a no stroke, because we're 14:41.080 --> 14:43.200 going to be drawing circles the entire way up. 14:43.200 --> 14:53.200 So we're going to no stroke, then fill with whatever the face color of our smiley is. 14:53.200 --> 15:00.280 And then create a circle with the x index and the y index of our point that's just point 15:00.280 --> 15:02.240 dot x and point dot y. 15:02.240 --> 15:07.120 And then finally, our size. 15:07.120 --> 15:10.280 And actually, finally, we're going to pop that so the settings don't apply over and 15:10.280 --> 15:11.280 over again. 15:11.280 --> 15:17.680 So now that we have this function, the only other change we need to make is up in our 15:17.680 --> 15:18.680 draw function. 15:19.200 --> 15:30.280 We move the smiley, we draw the smiley, and we also need to draw the trail. 15:30.280 --> 15:36.920 So once you put all of that together, well, actually, you should probably put this before 15:36.920 --> 15:40.160 you draw the smiley so you can see their faces. 15:40.160 --> 15:41.160 There we are. 15:41.160 --> 15:48.440 And now all of our smileys have little trails attached to them as well. 15:49.200 --> 15:51.120 And you can do other fun things with that as well. 15:51.120 --> 16:06.200 So instead of maybe using this dot x and this dot y, we're using mouse x and mouse y instead. 16:06.200 --> 16:11.800 So yeah, what you need to do right now is go back to the collection that came with the 16:11.800 --> 16:14.520 link. 16:14.520 --> 16:16.120 And there's more starter code. 16:16.800 --> 16:19.880 So there is a starter code for segment four right here. 16:19.880 --> 16:26.720 If you can open that, and it'll do the exact same thing as the previous segment, except 16:26.720 --> 16:29.960 I have some wave files that I've loaded in here. 16:29.960 --> 16:33.160 So you can load your own wave files or something like that. 16:33.160 --> 16:38.400 But we're going to take a slight detour now into the P5 sound library. 16:38.400 --> 16:40.920 This is going to be very simple right now. 16:40.920 --> 16:44.080 We're just going to be playing and stopping sounds. 16:44.080 --> 16:48.440 And then a little bit later, we're going to go into actually generating some sounds. 16:48.440 --> 16:53.360 But for right now, we have five wave files, each of them representing a different kind 16:53.360 --> 16:54.360 of drum. 16:54.360 --> 17:01.960 So we have a clap, a hi-hat, a kick, a snare, and a rim shot. 17:01.960 --> 17:07.160 So what I'm going to do right now is have it so all of the smileys, whenever it hits 17:07.160 --> 17:12.160 one of the edges of the canvas, it's going to play one of the samples. 17:12.240 --> 17:17.320 So to start off, I'm just going to declare an array. 17:17.320 --> 17:25.800 Let's call them sound files, and then just put the names of all the sound files in there. 17:25.800 --> 17:29.160 And you can put as many or as few as you want. 17:29.160 --> 17:43.400 So clap.wave, hi-hat.wave, kick.wave, rim.wave, and snare.wave. 17:43.400 --> 17:53.980 Okay, so now that we have that declared globally, we can load those files into P5.js. 17:53.980 --> 17:58.600 And the best way to do that, if you have any kind of external file, is you want to create 17:59.040 --> 18:04.640 a new function all the way at the top that we're going to call preload. 18:04.640 --> 18:08.520 And preload runs before the setup function does. 18:08.520 --> 18:12.000 So the order of operations is preload, setup, draw. 18:12.000 --> 18:17.520 And as it says in the title, preload will load anything before you actually get to the 18:17.520 --> 18:19.720 setup. 18:19.720 --> 18:23.360 And if you try loading files in the setup, you have some undefined behavior I can show 18:23.360 --> 18:24.440 you a little bit later. 18:24.440 --> 18:28.960 But this is the most consistent way to do it, at least. 18:28.960 --> 18:34.400 So we're going to actually move our for loop where we create our new smileys. 18:34.400 --> 18:40.560 We're going to take those, put them in the preload instead. 18:40.560 --> 18:48.120 And now we're going to go down to our smiley constructor and add this.sound, which is going 18:48.120 --> 18:50.280 to equal to load sound. 18:50.280 --> 18:52.720 This is a built-in function. 18:52.760 --> 18:57.800 And we need some way to pass in what sound we want each of these smileys to play. 18:57.800 --> 19:08.960 So what I'm going to do is make a constructor variable, make that sound files, and then 19:08.960 --> 19:13.040 the index mod five. 19:13.040 --> 19:17.420 So that's because I have five smileys, and there's five files, each of those smileys 19:17.420 --> 19:20.840 is going to correspond to one of those samples. 19:20.840 --> 19:24.360 So we're passing in the name of the sound file. 19:24.360 --> 19:31.440 And then down here in the constructor, we're just going to declare sound file name here. 19:31.440 --> 19:39.640 And then when we load in our sound, we're just going to call sound file name. 19:39.640 --> 19:46.600 And now every smiley should have a sound file in its function variables. 19:46.600 --> 19:53.360 So now the only other thing we need to do is go down to our move function and change 19:53.360 --> 20:01.640 this up a little bit, because we're going to add a couple other lines here. 20:01.640 --> 20:08.800 So anytime that the smiley decides to bounce, we're going to play its sample. 20:08.800 --> 20:11.880 So we're going to do this dot sound. 20:11.880 --> 20:14.960 And first off, stop the sample in case it's still playing. 20:14.960 --> 20:19.280 And that's as easy as doing this dot sound dot stop. 20:19.280 --> 20:23.640 And then this dot sound dot start. 20:23.640 --> 20:26.720 That'll play the sample in its entirety until it's told to stop. 20:26.720 --> 20:31.760 So put this here, put this down here. 20:31.760 --> 20:38.440 Then when we reload, yeah, error, yes. 20:38.440 --> 20:41.240 No, I'm sorry, it's not start, it's play. 20:41.240 --> 20:42.240 My bad. 20:43.120 --> 20:45.040 My apologies, everyone. 20:45.040 --> 20:48.200 This dot sound dot play, play and stop. 20:48.200 --> 20:53.000 So now when we load it in, there it is. 20:53.000 --> 20:57.360 So we're going to be picking up now on the segment 5 starter 20:57.360 --> 21:00.040 code in our collection. 21:00.040 --> 21:03.120 So we're going to be doing pretty much a fresh start now. 21:03.120 --> 21:08.160 We're not going to be working with our smiley guys anymore. 21:08.160 --> 21:14.400 So the only difference between this and a normal default canvas 21:14.400 --> 21:19.320 is that I have the C2HO logo right here. 21:19.320 --> 21:21.680 And we're going to be working with images now. 21:21.680 --> 21:24.720 So let me switch to my paper here. 21:28.320 --> 21:35.080 So like before, we're going to add a preload function up here. 21:39.160 --> 21:44.040 And instead of loading sound files, now we're going to load an image. 21:44.040 --> 21:50.200 So actually, let's declare a global variable first called IMG. 21:50.200 --> 21:59.760 And then let's let our image equal load image and whatever our image is called. 21:59.760 --> 22:04.080 So this one, C2HO logo. 22:04.440 --> 22:09.120 Feel free to put whatever image you would like in there. 22:09.120 --> 22:13.760 And then let's put the image in the canvas. 22:13.760 --> 22:19.280 So if we just do, well, actually, let's put it in the draw function. 22:19.280 --> 22:26.600 So image IMG 0, 0. 22:26.600 --> 22:29.880 0, 0 right here represents the x and y coordinates 22:29.880 --> 22:31.840 for where we're drawing our image. 22:31.840 --> 22:35.280 And let's see what happens when we load the canvas. 22:35.280 --> 22:36.880 And it's completely cut off. 22:36.880 --> 22:39.720 So how can we fix that? 22:39.720 --> 22:43.320 So when we create the canvas, we can access variables 22:43.320 --> 22:46.640 that the image loading the image gives us. 22:46.640 --> 22:56.320 So we can resize the canvas to image.width and image.height. 22:56.320 --> 22:59.480 And when you do that, now we have our full logo. 22:59.480 --> 23:02.640 It's actually zoomed in a little too much here. 23:02.640 --> 23:03.960 There we go. 23:03.960 --> 23:08.840 Now we have our full logo against a blank background. 23:08.840 --> 23:12.520 And let's say we want to resize the image. 23:12.520 --> 23:14.360 We can do that as well. 23:14.360 --> 23:18.680 Image.resize, pretty simple. 23:18.680 --> 23:22.680 And let's just resize it to 100 by 100. 23:22.680 --> 23:26.320 So now it gets drawn but smaller and squished a little bit. 23:27.040 --> 23:29.760 And then let's have a little fun with this. 23:29.760 --> 23:33.720 So instead of just having 0, 0 in our x and y, 23:33.720 --> 23:37.080 let's make it so our mouse follows 23:37.080 --> 23:40.480 where we are on the screen with the image. 23:40.480 --> 23:47.000 So before mouse x, except we want that to be subtracted 23:47.000 --> 23:50.040 by image.width divided by 2 so that we're 23:50.040 --> 23:52.800 in the center of our image. 23:52.800 --> 23:54.320 Same thing on the y. 23:54.640 --> 23:56.280 Same thing on the y. 23:56.280 --> 24:04.640 Mouse y minus the image height divided by 2. 24:04.640 --> 24:08.400 Now we want to get rid of the background function as well. 24:08.400 --> 24:12.800 Add that to the setup so that it doesn't refresh. 24:12.800 --> 24:17.120 And then as you can see now, we have kind of a bleeding C2HO 24:17.120 --> 24:17.840 logo here. 24:18.200 --> 24:20.640 And let's say we want to reset the canvas. 24:20.640 --> 24:23.640 We can do the draw function. 24:23.640 --> 24:31.480 If our mouse is pressed, going to set the background back 24:31.480 --> 24:34.000 to 220. 24:34.000 --> 24:37.960 So now when we reload, we can add as many of our logos 24:37.960 --> 24:38.520 as we want. 24:38.520 --> 24:40.920 And then when we click on the screen, it disappears. 24:41.880 --> 24:43.160 Yeah, so sorry. 24:43.160 --> 24:47.600 We just got asked how to add an image or another file 24:47.600 --> 24:49.200 into the Sketch files. 24:49.200 --> 24:53.240 So you're just going to click this arrow right here, go down, 24:53.240 --> 24:55.520 and then you can create either new folders 24:55.520 --> 24:59.000 or create a new file or upload a file. 24:59.000 --> 25:02.000 OK, we're just going to go a little bit further now, 25:02.000 --> 25:04.000 show you another small thing that we can do. 25:04.000 --> 25:05.960 So we can go to the Sketch file. 25:05.960 --> 25:07.760 And we can go to the Sketch file. 25:07.760 --> 25:09.120 And we can go to the Sketch file. 25:10.040 --> 25:14.320 Show you another small thing you can do when editing the image. 25:14.320 --> 25:19.160 So let's get rid of our resize function here 25:19.160 --> 25:25.640 and set the image back to 0.00. 25:25.640 --> 25:27.880 Get rid of this mouse is pressed here. 25:27.880 --> 25:30.000 So very basic now. 25:30.000 --> 25:35.080 We're just loading the C2HO logo. 25:35.080 --> 25:38.880 So what I want to show now is that you have the ability 25:39.640 --> 25:42.920 to get the colors of the image after you load it. 25:42.920 --> 25:45.000 So we can do something like if you 25:45.000 --> 25:50.440 want to draw something with the colors of the C2HO logo, 25:50.440 --> 25:51.880 there's a function for that. 25:51.880 --> 25:57.160 So let's declare a pen color up here in the globals. 25:57.160 --> 26:01.000 And then in our setup function, let's just 26:01.000 --> 26:06.640 declare that to color 0, just black. 26:08.960 --> 26:12.760 And actually, let's move this up to the setup function as well. 26:12.760 --> 26:15.760 So now in actually, we're not going 26:15.760 --> 26:18.120 to be using a draw function at all. 26:18.120 --> 26:22.480 We're only going to want to draw when our mouse is clicked. 26:22.480 --> 26:25.400 So we can just add our mouse clicked function. 26:28.240 --> 26:31.880 So what I want to do now is when you click on a color, 26:31.880 --> 26:34.360 you retrieve that color and then draw with it. 26:34.360 --> 26:40.960 So we're going to let our color C equal to image.get. 26:40.960 --> 26:46.320 And that's going to be our mouseX, mouseY coordinate. 26:46.320 --> 26:48.360 And then after we get that color, 26:48.360 --> 26:55.720 we're going to set the pen color equal to C. 26:55.720 --> 26:59.800 And now when we drag our mouse, we want to draw with that. 26:59.800 --> 27:07.400 So mouseDragged, we're going to fill with the pen color 27:07.400 --> 27:08.560 that we currently have. 27:11.480 --> 27:15.440 Add a no stroke. 27:15.440 --> 27:18.560 And then draw some circles. 27:18.560 --> 27:23.880 Wherever our current mouseX and mouseY is, 27:23.880 --> 27:27.200 let's say of 20 pixel diameter. 27:27.200 --> 27:29.520 And now when we put that all together, 27:30.240 --> 27:32.760 we should be able to click on this purple 27:32.760 --> 27:35.480 and then draw with the same purple. 27:35.480 --> 27:39.160 Click on this blue, draw with the same blue. 27:39.160 --> 27:42.520 Orange, other blue. 27:42.520 --> 27:43.280 You get the picture. 27:46.040 --> 27:46.800 OK. 27:46.800 --> 27:48.960 We're going to move on real quick. 27:48.960 --> 27:51.520 Just one more section about things 27:51.520 --> 27:52.560 you can do with images. 27:52.560 --> 27:56.640 So as you can see right here with the get function, 27:56.640 --> 27:59.720 we're working on a pixel by pixel basis for these images. 27:59.720 --> 28:01.440 So what I'm going to do right now 28:01.440 --> 28:04.160 is an example of what you can do with that. 28:04.160 --> 28:08.480 I'm going to invert the colors of the whole image. 28:08.480 --> 28:10.800 So let's create a new function. 28:10.800 --> 28:14.560 We'll call it, well, let's spell function right first. 28:14.560 --> 28:15.960 We'll call that invertPixels. 28:21.560 --> 28:25.040 So we're going to traverse the entire image 28:25.040 --> 28:27.520 and grab each pixel and invert its color. 28:27.520 --> 28:29.520 So because of that, we're probably 28:29.520 --> 28:33.400 going to want to resize our image first, actually. 28:33.400 --> 28:35.920 The image we have right now is a little too big. 28:35.920 --> 28:38.920 We'll take up a little too much time to do it. 28:38.920 --> 28:44.280 So I'm just immediately going to resize this thing on setup 28:44.280 --> 28:47.680 to 250 and 200. 28:47.680 --> 28:50.440 Recommend you do that as well. 28:50.440 --> 28:53.000 So for our invertPixel function, we're 28:53.000 --> 28:59.720 going to start off on the x equal to 0. 28:59.720 --> 29:03.920 x is less than the image width. 29:03.920 --> 29:07.600 And then plus plus x. 29:07.600 --> 29:12.680 Then another for loop, same thing but for y. 29:12.680 --> 29:20.560 y is less than the image height this time, plus plus y. 29:20.600 --> 29:24.480 And now we're going to want to read the color. 29:24.480 --> 29:28.080 So this time, instead of the mouse x and mouse y, 29:28.080 --> 29:33.960 we're just going to let the original color equal image.get 29:33.960 --> 29:38.160 our x and y indexes. 29:38.160 --> 29:40.760 Now we want to invert our colors. 29:44.320 --> 29:47.920 So we can do that by declaring some RGB values. 29:47.920 --> 29:56.080 So let's make r equal to 255 minus the red 29:56.080 --> 29:57.320 of the original color. 30:01.320 --> 30:02.960 This function right here just extracts 30:02.960 --> 30:05.880 whatever the red value is. 30:05.880 --> 30:11.760 Same for the green, 255 minus the green 30:11.760 --> 30:12.880 of the original color. 30:18.920 --> 30:20.920 And the same for the blue. 30:28.080 --> 30:28.600 Cool. 30:28.600 --> 30:36.280 So once we have all of that, we can image.set whatever 30:36.280 --> 30:41.160 the current x and y is to an output color. 30:41.160 --> 30:43.560 But we need to declare the output color first, actually. 30:43.720 --> 30:50.720 So let's let the output color equal 30:50.720 --> 30:56.600 to color of our R, G, and B values. 30:56.600 --> 30:59.400 And then when we set our image pixel value, 30:59.400 --> 31:01.560 it'll be to the output color. 31:06.960 --> 31:12.920 Now, this only works if at the end of our two for loops, 31:12.920 --> 31:14.880 we call image.updatePixels. 31:20.080 --> 31:24.360 Updates all of our pixels, as the name implies. 31:24.360 --> 31:29.720 So now, before we call to display our image using 31:29.720 --> 31:34.400 the setup function, we are going to add invertPixels. 31:38.320 --> 31:41.320 And press our Play button. 31:41.320 --> 31:45.000 And you should see an inverted C2HO logo. 31:45.000 --> 31:47.200 If you kept everything in the mouseClicked function 31:47.200 --> 31:48.780 and the mouseDragged function, you'll 31:48.780 --> 31:50.920 get the same kind of functionality 31:50.920 --> 31:53.880 with different colors. 31:53.880 --> 31:55.360 So that's pretty cool. 31:55.360 --> 31:57.840 And then you can also play around with this 31:57.840 --> 31:58.840 as much as you want. 31:58.840 --> 32:01.720 So for instance, you can replace the blue values 32:01.720 --> 32:04.200 with red values. 32:04.200 --> 32:07.400 You can switch the x and the y. 32:07.400 --> 32:11.440 And you can end up with some pretty trippy new combinations 32:11.440 --> 32:12.320 of things. 32:12.320 --> 32:15.680 We're going to wrap this up with one more section here 32:15.680 --> 32:18.080 about P5 Sound. 32:18.080 --> 32:24.040 So p5.js has a pretty extensive sound library right here. 32:24.040 --> 32:26.600 You can find this on a whole different reference page. 32:26.600 --> 32:28.600 We're going very, very surface level with this. 32:28.600 --> 32:30.040 Don't worry about all this. 32:30.040 --> 32:33.400 We're doing some very basic sound generation stuff 32:33.400 --> 32:34.600 that I think is pretty cool. 32:34.600 --> 32:38.920 So let's start off by just creating a sine wave oscillator. 32:38.920 --> 32:43.800 So let's let osc, declaring an osc variable. 32:43.800 --> 32:47.680 And then in our setup, we're going 32:47.680 --> 32:54.360 to have that osc equal a new p5.Sine, 32:54.360 --> 33:01.280 sorry, capital S, Sine osc, which is a sine wave. 33:01.280 --> 33:05.840 So now we're going to set the amplitude, the volume 33:05.840 --> 33:10.280 of our oscillator to 0.5. 33:10.280 --> 33:12.000 It's on a scale from 0 to 1. 33:12.000 --> 33:14.320 So we have half volume. 33:14.320 --> 33:17.120 And then in our setup, we're just going to call osc.start. 33:21.080 --> 33:27.760 So if we press play, we get a pretty basic sine wave there. 33:27.760 --> 33:29.600 Cool, now let's do something fun with that. 33:29.600 --> 33:38.280 So we're going to change our frequency of the oscillator 33:38.280 --> 33:39.960 using some mouse inputs. 33:39.960 --> 33:44.240 So let's let our frequency equal a map. 33:44.240 --> 33:47.120 So you can see here, if you have some auto assist on, 33:47.120 --> 33:49.760 our map is going to take a value. 33:49.760 --> 33:53.640 And it's going to take it from the range of start 1 33:53.640 --> 33:57.760 and stop 1 and map it to the range start 2 and stop 2. 33:57.760 --> 34:01.520 So in this case, the value we're going to want to map 34:01.520 --> 34:05.960 is mouseX, x-axis of the mouse. 34:05.960 --> 34:13.120 And we want to map from 0 to the width of the canvas, to 40, 34:13.120 --> 34:18.720 to 880, which is a pretty acceptable range for frequency. 34:18.720 --> 34:25.920 And then make our osc.freq equal to the frequency. 34:28.760 --> 34:33.480 Now when we press play, it's going to immediately start 34:33.480 --> 34:34.480 on a really low note. 34:34.480 --> 34:36.520 And then as we move across the x-axis, 34:36.520 --> 34:41.360 we get something that sounds a little bit like a theremin. 34:44.760 --> 34:48.520 So now let's also play with the amplitude a little bit. 34:48.520 --> 34:55.800 So let our amplitude equal a map of the y-axis this time. 34:55.800 --> 35:00.920 So mouseY from 0 to height. 35:00.920 --> 35:05.760 And change that instead from 1 to 0.01. 35:05.760 --> 35:08.400 We need to reverse this time because the y-axis works 35:08.400 --> 35:10.400 the opposite way of the x-axis. 35:10.400 --> 35:12.200 So if we want to go higher on the canvas, 35:12.200 --> 35:14.240 we want to raise the volume and not lower it. 35:14.240 --> 35:17.360 So then it's as simple as letting 35:17.360 --> 35:20.760 osc.amp equal to the amplitude. 35:26.240 --> 35:27.440 And then we press play. 35:30.680 --> 35:33.120 And now it gets quieter when we go down the y-axis 35:33.120 --> 35:34.640 and louder when we go up. 35:42.240 --> 35:44.240 So just for a little bit of feedback, 35:44.240 --> 35:45.960 we can also add some text on here. 35:45.960 --> 35:52.720 So let's let text equal frequency. 35:56.320 --> 35:57.840 Equals. 35:57.840 --> 36:00.320 Then add our frequency. 36:03.760 --> 36:06.480 And then I'm going to add this toFixed function here 36:06.480 --> 36:12.120 so that it always displays in 0 decimal points. 36:12.120 --> 36:22.040 And then add to that comma amplitude equal to. 36:22.120 --> 36:30.360 And then our amplitude, which is fixed to 3 decimal points. 36:30.360 --> 36:32.960 And then we need to put that text on the screen. 36:32.960 --> 36:35.640 So text. 36:35.640 --> 36:36.160 I'm sorry. 36:36.160 --> 36:38.080 I probably shouldn't call this text actually. 36:38.080 --> 36:43.360 Let's call this freak amp message. 36:46.440 --> 36:49.600 Then we're going to take that text. 36:49.600 --> 36:54.200 And I want to put it right in the middle of the canvas. 36:54.200 --> 36:58.560 Width divided by 2 and height divided by 2. 36:58.560 --> 37:06.000 And then in the setup, let's declare a text size of 20. 37:06.000 --> 37:10.360 And we need to, just to make it look good, align the text. 37:10.360 --> 37:17.680 Text align to the dead center of the canvas on x and y. 37:17.720 --> 37:21.160 So now when we press play, we'll get a little bit of feedback. 37:25.280 --> 37:27.360 And as you can see by this, you are also 37:27.360 --> 37:29.280 allowed to go off the canvas. 37:29.280 --> 37:30.360 So be careful with that. 37:36.640 --> 37:37.920 I like hearing that in the room. 37:37.920 --> 37:40.280 All right. 37:40.280 --> 37:42.560 And then, so like I said, there's 37:42.560 --> 37:46.560 plenty of stuff in the reference that you can do to edit this. 37:46.560 --> 37:49.040 And I think the easiest one to work with right now 37:49.040 --> 37:50.360 is the reverb. 37:50.360 --> 37:52.560 So we're going to add a little bit of reverberations 37:52.560 --> 37:54.720 to our sine wave. 37:54.720 --> 37:58.000 So at the top here, let's declare 37:58.000 --> 38:01.080 just a variable called reverb. 38:01.080 --> 38:02.440 And then in our setup, we're going 38:02.440 --> 38:07.800 to declare it in a very similar way to the oscillator. 38:07.800 --> 38:16.520 Reverb is equal to new p5.reverb with a capital R. 38:16.840 --> 38:19.240 And then in order to turn on a reverb, 38:19.240 --> 38:23.560 we need to reverb.process and set some parameters. 38:23.560 --> 38:26.240 So first off, what exactly we want to process, 38:26.240 --> 38:29.600 we want this to be the reverb of our oscillator. 38:29.600 --> 38:36.800 And then I'm going to set a 5-second reverb time and 3% 38:36.800 --> 38:37.960 decay rate. 38:37.960 --> 38:39.960 Basically, the higher those values are, 38:39.960 --> 38:43.760 the more reverb you'll have, the lower the less. 38:43.760 --> 38:48.760 Then we'll set our reverb amplitude to 1. 38:48.760 --> 38:50.080 And now when we press play, you'll 38:50.080 --> 38:53.600 hear the oscillator a lot more reverberated. 39:02.760 --> 39:05.320 We can play with that a little bit more, too. 39:05.320 --> 39:09.560 Let's make this 0 in the setup. 39:09.560 --> 39:16.480 And let's go down here and use our mousePressed function 39:16.480 --> 39:23.320 to turn the amplitude back to 1. 39:23.320 --> 39:29.000 And then our mouseReleased function 39:29.000 --> 39:31.960 to turn the amplitude back to 0. 39:31.960 --> 39:34.680 And this is just going to turn on the reverb only 39:34.680 --> 39:37.880 when we have our mouse pressed. 39:37.880 --> 39:40.960 So now you can hear it's normal. 39:40.960 --> 39:41.920 And then I click my mouse. 39:46.280 --> 39:48.880 And it turns back off when I release.