1 00:00:00,000 --> 00:00:10,760 Hello Harloms, good morning. Today we are going to continue with processing and we are 2 00:00:10,760 --> 00:00:27,960 going to work with a image, ok? I'm going to share my screen. Ok, share my screen. Ok, 3 00:00:27,960 --> 00:00:39,480 you can see my screen now. Ok. For today's project we are going to use some images, ok? 4 00:00:39,480 --> 00:00:46,600 I have the two images I'm going to use here, ok? This one, Harlom, is an image from your 5 00:00:46,600 --> 00:00:55,200 school and an image from me, ok? Let's begin with the project. It's very easy and you will 6 00:00:55,200 --> 00:01:05,760 like the results and if you have the chance to practice you will like it, ok? First of 7 00:01:05,760 --> 00:01:21,800 all I have to begin a project and I have to save the project, ok? So, save as. Background 8 00:01:21,800 --> 00:01:39,720 will be the name of the first project, ok? Ok. If I go to my desktop, I should have here 9 00:01:39,720 --> 00:01:56,680 the, oh, I didn't put it in the desktop. Background, ah, ok, I want it in the desktop, ok? Ok. 10 00:01:56,680 --> 00:02:04,160 Here is my project, ok? If I open this folder, I have just the program, ok? I have to include 11 00:02:04,160 --> 00:02:10,800 the image that I'm going to use here, inside the folder. So, how can I do that? I have 12 00:02:10,800 --> 00:02:22,080 to go to the program, to the menu Sketch, Add File, ok? And I will add the two files 13 00:02:22,080 --> 00:02:36,640 that I'm going to use, ok? I'm going to use Gonzalo and Sketch, Add File, I'm going to 14 00:02:36,640 --> 00:03:00,920 use Hadlen, ok? Ok, if I go to the folder now, inside the folder there is another folder called 15 00:03:00,920 --> 00:03:07,240 Data and with the two pictures that I'm going to use here. Let's see, I'm going to put this 16 00:03:07,240 --> 00:03:15,560 picture of background, so I have to see the dimension of the pictures, ok? Let's see the 17 00:03:15,560 --> 00:03:35,360 properties, this, I didn't see the size, so, ok, 397 by 240, ok, I'm going to put this in the paper 18 00:03:35,760 --> 00:03:50,480 to remember it, 397 by 240, ok, the size, ok. Let's begin, ok? First thing I have to do is 19 00:03:53,040 --> 00:04:01,200 I have to write that I'm going to use two images, ok? The way of saying that is similar 20 00:04:01,200 --> 00:04:11,040 that the way of using variables, ok? It's called components, ok? I'm going to use two components to 21 00:04:11,040 --> 00:04:29,920 the image, ok? So, I'm going to define the component F, ok? And the component E, ok? That's the name that I will 22 00:04:29,920 --> 00:04:56,800 give to my image, ok? Let's go with the setup, alright, setup, ok, size, the size will be 23 00:05:00,880 --> 00:05:13,840 397 by 240, ok. I'm going to load a long picture of background, so this will be the same size, ok? 24 00:05:15,440 --> 00:05:27,200 I'm going to load the images in the components F and G that I defined here, ok? So, F will be load image 25 00:05:29,920 --> 00:05:49,280 Harlem.gpg, ok? And I have to load the other image, load image 26 00:05:49,280 --> 00:05:55,280 that's called 27 00:05:57,040 --> 00:06:10,960 don'thallow.gpg, ok? The same name, remember, ok? You have to respect capital letters, ok? If you have 28 00:06:10,960 --> 00:06:18,160 the capital letters in your name you have to put here capital letters, ok? And I'm going to load 29 00:06:18,160 --> 00:06:32,560 the background here, background, ok? The background I'm going to put Harlem picture, ok. 30 00:06:32,560 --> 00:06:51,040 I will draw, for the moment nothing in the ballroom, ok? Let's see what's happened, oh 31 00:06:53,600 --> 00:06:58,960 stream constant, oh what's happened here? I have an error in my program 32 00:07:03,120 --> 00:07:20,960 ah, background, so background is indeed, ok? Let's see, oh the same, another error, ok? Let's see load image 33 00:07:23,200 --> 00:07:28,960 F load image Harlem.gpg, ah, ok 34 00:07:32,640 --> 00:07:38,160 and the same here, ok? That's my error, let's see now 35 00:07:40,160 --> 00:07:47,280 ok? Here is the result of my project, ok? I define it at the size of the 36 00:07:49,520 --> 00:07:57,680 frame and I put the background of the image, ok? Of Harlem image, ok? Let's see 37 00:07:57,680 --> 00:08:00,640 ok, let's do something interesting here 38 00:08:03,760 --> 00:08:09,760 ok, here in my image I'm going to put some pictures of me, ok? 39 00:08:12,560 --> 00:08:20,080 And I'm going to put the picture by the mouse release function that I learned last day, ok? 40 00:08:20,080 --> 00:08:29,680 Ok, point, mouse, release, ok 41 00:08:35,600 --> 00:08:41,920 if button equal right 42 00:08:41,920 --> 00:08:50,960 I'm going to put my picture, my own picture, ok? 43 00:08:55,360 --> 00:09:01,760 Keymatch, picture G, ok? Beginning in 44 00:09:01,760 --> 00:09:20,880 mouse X, mouse Y, and the dimension 30 by 30, ok? Ok, perfect, and I'm going to put this image in 45 00:09:21,840 --> 00:09:30,560 red color for example, so I will use a function for giving color to the image, ok? So it will be 46 00:09:30,560 --> 00:09:34,720 255, ok 47 00:09:42,800 --> 00:09:47,280 and I'm going to put the same image in other color when I press the button 48 00:09:47,280 --> 00:09:55,920 left of the mouse, ok? I'm going to copy and paste, it's easy, it's easiest way to do that, button left 49 00:09:55,920 --> 00:10:14,160 ok, I think will be a different one, ok? So what's happening here? If I stop pressing button right 50 00:10:15,680 --> 00:10:25,440 the color of my image will be blue, will be red and I will put the image G on the position mouse 51 00:10:25,440 --> 00:10:32,560 X, mouse Y and the dimension 30 by 30, ok? And if I stop pressing button left the same but with 52 00:10:32,560 --> 00:10:40,480 other color, ok? Let's see what happens. Oh, another error, ah, ok, I have to close the mouse release 53 00:10:40,480 --> 00:10:51,440 function, ok? Let's see now. Button cannot resolve for a variable. I don't know the name of button 54 00:10:52,080 --> 00:10:59,760 maybe I, let's see, is not button, mouse button, ok 55 00:11:02,960 --> 00:11:08,640 mouse button, ok 56 00:11:12,720 --> 00:11:14,080 ok and the same here 57 00:11:14,080 --> 00:11:26,640 mouse button, ok, let's see what happens 58 00:11:26,640 --> 00:11:35,200 and 59 00:11:36,560 --> 00:11:44,080 ok, I press left button, appears my image on green and if I press right button 60 00:11:44,640 --> 00:11:48,480 appears my image in red, ok, did you like the project? 61 00:11:50,160 --> 00:11:55,280 ok, hmm, ok 62 00:11:58,400 --> 00:12:03,600 that made me think about a way, one picture, one famous picture of Marilyn Monroe 63 00:12:04,240 --> 00:12:09,680 I'm going to do that with my own image, ok? Do you understand the project? I 64 00:12:10,480 --> 00:12:17,440 define two components, F and G, to load the images Harlan and Gonzalo. I put Harlan for 65 00:12:17,440 --> 00:12:28,240 background, ok, and Gonzalo will be put by the mouse release, ok, in different colors using this 66 00:12:28,240 --> 00:12:39,360 function, ok? Ok, I'm going to start a new project to make this famous picture of Marilyn Monroe 67 00:12:39,360 --> 00:12:50,480 with my own face, ok, a new project, ok, I'm going to save to load the image inside the folder, ok 68 00:12:51,600 --> 00:13:03,360 so I have to save fast, I'm going to call this project Marilyn, ok, in the desktop, ok 69 00:13:03,360 --> 00:13:08,320 and inside my project I'm going to use 70 00:13:11,520 --> 00:13:18,400 a file, ok, the file will be my own image, ok 71 00:13:21,280 --> 00:13:23,440 ok, let's see where is it 72 00:13:23,440 --> 00:13:34,480 Marilyn, here it is, ok, so inside there will be a data folder with my image, ok 73 00:13:38,480 --> 00:13:48,000 let's begin with a, I'm going to use just one image here, ok, I put one component, image 74 00:13:48,960 --> 00:13:51,840 will be called F, ok 75 00:13:57,120 --> 00:13:57,920 voice setup 76 00:14:03,440 --> 00:14:03,840 ok 77 00:14:09,600 --> 00:14:16,800 I will define my picture is a square picture, so my size will be a square, ok, size 78 00:14:18,000 --> 00:14:34,000 for example 400x400, ok, and I'm going to load my image into this component, F, ok, F equal load image 79 00:14:34,000 --> 00:14:42,880 image, unfollow.apg 80 00:14:44,640 --> 00:14:49,920 ok 81 00:14:52,480 --> 00:14:55,840 so, photo 82 00:15:04,000 --> 00:15:12,320 I'm going to put my image in four different images with four different tints, ok? 83 00:15:13,760 --> 00:15:26,960 ok, first one will be a tint, for example red, 145. If you want to see a color, the code of a 84 00:15:26,960 --> 00:15:37,360 color you can go here, and tools, color selectors and you can select a color here and you can see 85 00:15:37,360 --> 00:15:52,000 here the code F, G and B, ok? 245.0.0, ok? and I'm going to 86 00:15:52,000 --> 00:16:09,680 put my image, it was called F, in the left right corner, so it will be 0, 0, and the dimension 200 by 200, ok? 87 00:16:11,680 --> 00:16:12,180 ok 88 00:16:12,180 --> 00:16:24,180 copy and paste four different times, ok? three and four, ok? 89 00:16:25,860 --> 00:16:36,740 first color will be this one, the second color will be green, for example, ok? 90 00:16:36,740 --> 00:16:51,220 so it will be 0, and it will be in the position 200, ok? 91 00:16:53,380 --> 00:17:04,340 the third color will be blue, ok? so it will be 0, 0, 2, 4, 5, 2, 5, 5, it will be in the position 92 00:17:04,420 --> 00:17:10,820 0, 200, and the yellow 93 00:17:14,500 --> 00:17:18,020 it will be, the yellow is a combination of green and red, ok? 94 00:17:18,420 --> 00:17:30,500 145, ok? and it will be in the position 200, 200, ok? 95 00:17:32,020 --> 00:17:41,060 ok, so four different things, and four different positions of the image, ok? all the images are the same size 96 00:17:41,140 --> 00:17:46,340 remember, these two last parameters are the size of the image, and this is the 97 00:17:48,020 --> 00:17:54,100 left top corner of the image, ok? the coordinates, ok? let's see what happens 98 00:17:54,100 --> 00:18:01,220 oh, wow, Marilyn, ok? did you like it? you can do it with your own image 99 00:18:03,300 --> 00:18:08,260 it's funny, ok? so you can reproduce a lot of pictures like that 100 00:18:11,540 --> 00:18:19,620 I like it, ok? maybe if you use your own image it will be better than with my image 101 00:18:20,500 --> 00:18:25,220 ok, I hope you like it, I'm going to stop sharing my screen, ok? 102 00:18:29,540 --> 00:18:34,500 I hope you like it, ok? we will continue next week with another interesting project 103 00:18:35,060 --> 00:18:42,740 and today we learned about how to use image in processing and to make funny things, ok? 104 00:18:43,860 --> 00:18:46,180 bye, headlamps, bye!