1 00:00:01,250 --> 00:00:02,550 So never come again. 2 00:00:02,560 --> 00:00:04,340 We use transformations. 3 00:00:04,340 --> 00:00:07,340 You know I was for doing three things in particular. 4 00:00:07,340 --> 00:00:09,180 One of them is translation. 5 00:00:09,360 --> 00:00:13,030 The other one is rotation and the third one is a scaling an object. 6 00:00:13,080 --> 00:00:20,220 Now transformations can be applied on almost any type of outlet and you can do any of these three particular 7 00:00:20,220 --> 00:00:23,500 types of transformations on those outlets. 8 00:00:23,520 --> 00:00:26,640 So let's have a quick look at how we do it in court. 9 00:00:26,720 --> 00:00:30,350 I'm going to jump into excuse making your application. 10 00:00:30,390 --> 00:00:31,350 I'm going to call it. 11 00:00:31,380 --> 00:00:33,180 This is from Nation's 12 00:00:35,880 --> 00:00:40,760 and as usual I'm going to go and have myself a great view. 13 00:00:40,780 --> 00:00:45,620 I'm going to make a view which is going to be like that 14 00:00:51,790 --> 00:00:57,580 and that I'm going to make a point because I want to be able to apply different types of transformations. 15 00:00:57,820 --> 00:01:02,570 It's going to be set up by shrine's formation. 16 00:01:02,800 --> 00:01:06,610 I'm going to go with a slightly different back on the caller. 17 00:01:06,730 --> 00:01:10,310 Let's have the outlet as well as the action. 18 00:01:10,720 --> 00:01:19,370 So the outlet is the red box and the action is I don't need to view that lot. 19 00:01:19,500 --> 00:01:31,900 I'm going to say the option is here apply transform ish and that's all I have to do in the interface 20 00:01:31,900 --> 00:01:39,110 builder so I'm going to jump back to our view that lot swift fine and in here for a month everything 21 00:01:39,130 --> 00:01:40,610 a little bit better. 22 00:01:41,140 --> 00:01:47,860 And the first piece of core they want to write is this I want to say when I pressed the I apply transformation 23 00:01:48,220 --> 00:01:52,620 I want to move this object by let's say 100 pixels. 24 00:01:52,840 --> 00:02:00,730 So it's going to be set red box which is the object that I have thought transform becomes a red box 25 00:02:00,830 --> 00:02:05,140 that transform DOD translated by. 26 00:02:05,680 --> 00:02:12,660 And I want it translated by let's say 100 and 0 on the Y. 27 00:02:12,940 --> 00:02:14,100 So let's see what you have. 28 00:02:14,100 --> 00:02:21,560 What we're doing is you're saying that the transform of red box that's like the pivot point of it. 29 00:02:21,640 --> 00:02:28,330 For those of you come with the background of our computer graphics the pivot of it becomes the current 30 00:02:28,330 --> 00:02:34,290 pivot plus 100 pixels on the X as simple as that. 31 00:02:34,540 --> 00:02:38,680 So let's run that on my simulator. 32 00:02:38,770 --> 00:02:44,560 We will see something that is actually important and that is let me actually show it to you and then 33 00:02:44,560 --> 00:02:51,410 explain to you so here if I press apply it it jumps to the right and the things are interesting and 34 00:02:51,410 --> 00:02:59,720 I want to show you is that if I press again it jumps another 100 simply because it's saying every time 35 00:03:00,010 --> 00:03:08,660 I replace this transform with whatever is the transform and the hundred to it's so simply if we do multiple 36 00:03:08,660 --> 00:03:13,060 you know runs of this action the object completely goes out of the screen. 37 00:03:13,310 --> 00:03:18,730 Now we can do similarly the same thing for scale and rotation. 38 00:03:18,830 --> 00:03:28,040 And then I actually do those say red marks that transform becomes very boxtops transformed not rotated 39 00:03:28,070 --> 00:03:31,620 by now the rotation is a radiant value. 40 00:03:31,790 --> 00:03:38,520 So as you can imagine a radian value is based on PI number. 41 00:03:38,540 --> 00:03:48,150 So for that I would simply say give me CGU float float dot pi. 42 00:03:48,560 --> 00:03:54,280 And that's three point one for one hundred and eighty degrees for a half circle. 43 00:03:54,500 --> 00:03:57,610 And I would say let's divide that by four. 44 00:03:57,620 --> 00:04:07,220 So now if I go in here every time I press we rotate 45 degrees as well as moving 100 pixels. 45 00:04:07,360 --> 00:04:10,770 If we make this a little bit less so we can see it easier. 46 00:04:10,760 --> 00:04:15,060 And if these numbers are difficult for you you can actually contradict them. 47 00:04:15,240 --> 00:04:23,910 So you can simply say if I want to find what's the value of 45 degrees essentially I would take 45. 48 00:04:23,910 --> 00:04:28,880 Divide it by one hundred and eighty and then want to play by 2.1 four. 49 00:04:29,130 --> 00:04:35,550 Or if you want to do with a lot more scientifically you could simply say well flawed fish ship fruit 50 00:04:35,550 --> 00:04:42,510 of Pi and then multiply it by the number that you are interested in 45 degrees divided by one hundred 51 00:04:42,510 --> 00:04:48,390 and eighty and this would be a most accurate calculation of it that the machine automatically finds 52 00:04:48,390 --> 00:04:56,110 the absolute value of pi up to a certain number of decimal places and then multiply it by that number. 53 00:04:56,310 --> 00:05:00,470 Or if I were to be turtle it is for instance not before this game. 54 00:05:00,480 --> 00:05:08,660 Let's just go ahead and say red box start transform becomes red monks transform dot scale the VI and 55 00:05:08,670 --> 00:05:12,060 the scale has two different arguments. 56 00:05:12,060 --> 00:05:20,760 This scale on the horizontal level X on the vertical I want someone to say undie x make it up 8 or 80 57 00:05:20,760 --> 00:05:27,070 percent of its kind size and under Y make it maybe 1 point zero or five. 58 00:05:27,450 --> 00:05:30,900 So let's see. 59 00:05:30,920 --> 00:05:36,640 So every time I press that button up here we should rotate by 30 degrees. 60 00:05:36,740 --> 00:05:43,660 We should move 20 pixels and we have to shrink on the X and it's slightly increase on the vine. 61 00:05:46,090 --> 00:05:50,010 And that's kind of what we expected to see. 62 00:05:50,270 --> 00:05:56,190 Now let me show you what would happen if we only applied a scale and when I explained to you why I want 63 00:05:56,190 --> 00:06:02,990 you to see that so this time and we do the transformation we only apply the scale. 64 00:06:02,990 --> 00:06:10,100 Part of the transformation on aardvarks and that's exactly what you were hoping to see to see that it 65 00:06:10,190 --> 00:06:16,600 shrinks and the X becomes point eight times at times and increases by one point zero or five. 66 00:06:16,790 --> 00:06:23,840 Now the reason the last time we saw some sort of rescue happening as if the shape of the rectangle was 67 00:06:23,840 --> 00:06:28,700 changing simply because the transformation was rotated. 68 00:06:28,700 --> 00:06:35,060 So the object wasn't the same people with anymore as it is here right now. 69 00:06:35,060 --> 00:06:39,780 So let's look at that once again. 70 00:06:39,880 --> 00:06:47,100 So we assume by default that the object has a veto on a height but when it rotates that actually changes. 71 00:06:47,170 --> 00:06:54,040 Now our pivot is not the pivot that has an XT was the right of the screen and white was the top of the 72 00:06:54,040 --> 00:06:54,850 screen. 73 00:06:54,850 --> 00:07:02,890 If we try that again now if rotation that was there in the first attempt is being considered in the 74 00:07:02,890 --> 00:07:05,940 transformation that happens this time. 75 00:07:06,100 --> 00:07:13,140 And that's essentially why we get this askew type of type of transformation. 76 00:07:13,150 --> 00:07:16,950 Now let's go back in you know I want to show you a few more things. 77 00:07:17,050 --> 00:07:24,160 One of them is that all of these transforms are essentially subclasses of another class quad core graphics 78 00:07:24,300 --> 00:07:28,040 aften transform sounds for. 79 00:07:28,320 --> 00:07:37,320 And one of the things that you could do it would say red box that transform becomes C.G. aften transforms 80 00:07:37,320 --> 00:07:40,230 that identity entity. 81 00:07:40,510 --> 00:07:44,230 And that's essentially like your resetting your transformations. 82 00:07:44,290 --> 00:07:50,890 So anytime you call the identity is going to push everything back to their default was based on what 83 00:07:50,890 --> 00:07:57,670 the storyboard has generated or where the view was originally initialized. 84 00:07:57,670 --> 00:08:05,700 So that's one thing to keep in mind and I'm going to actually comment all of these out now so that you 85 00:08:05,720 --> 00:08:06,020 get 86 00:08:10,670 --> 00:08:13,160 so that's commented out all. 87 00:08:13,180 --> 00:08:24,380 So is this guy I don't want perfect and these guys will all play three types of transformations. 88 00:08:24,590 --> 00:08:30,700 Now the first group of transformations would replace that transformation with a new one. 89 00:08:30,850 --> 00:08:34,120 And as a result they were concatenating themselves. 90 00:08:34,130 --> 00:08:40,940 Now I'm going to go ahead and say You've me in your transformation let's call it the rotation Trout's. 91 00:08:41,330 --> 00:08:48,370 And that's going to be a C G F and transform and then transform station has different types. 92 00:08:48,370 --> 00:08:53,960 And when I say rotation by an angle of let's say 1.2. 93 00:08:54,190 --> 00:08:58,280 I don't know exactly what 1.2 years but you could easily calculate it. 94 00:08:58,280 --> 00:08:59,830 I'm going to save 1.2. 95 00:08:59,990 --> 00:09:01,380 Divided by two. 96 00:09:01,430 --> 00:09:04,160 One for one place by one hundred and eighty. 97 00:09:04,160 --> 00:09:07,630 It's about 65 68 degrees. 98 00:09:07,700 --> 00:09:19,060 So rotation transformation and then I'm going to say say red box dot transform becomes rotation transformation. 99 00:09:19,460 --> 00:09:28,360 And if you run this one now it rotates it by 68 or 70 degrees or whatever the number was for the fire 100 00:09:28,360 --> 00:09:28,800 brigade. 101 00:09:28,850 --> 00:09:36,670 Wartimes nothing is going to happen simply because the CGF untransformed is not adding on top of the 102 00:09:36,670 --> 00:09:37,710 previous one. 103 00:09:37,750 --> 00:09:45,700 It's simply saying make it this whatever disvalue is we can similarly have the same thing for scale 104 00:09:45,730 --> 00:09:47,810 or for translations. 105 00:09:47,810 --> 00:09:58,740 So let the scale rounds to become CEG and transform a scale by again is asking me for some values of 106 00:09:58,740 --> 00:09:59,680 1.5. 107 00:09:59,680 --> 00:10:01,430 One point one one point one. 108 00:10:01,780 --> 00:10:08,040 And here's the thing you can only apply one of these guys to your the box that transform. 109 00:10:08,200 --> 00:10:15,100 So my read books that transform either can be rotation trines or it can be scaled trons And if you want 110 00:10:15,100 --> 00:10:19,780 to add them together I have to do what we call a concatenation. 111 00:10:19,810 --> 00:10:27,950 So you have to say rotation transformation just concatenates scale translation. 112 00:10:27,970 --> 00:10:30,700 And this is a process that you can continue for ever. 113 00:10:30,700 --> 00:10:35,420 You can have hundreds of them being sequentially added together. 114 00:10:35,520 --> 00:10:42,340 I like that you can end up having a combination of all the transformations being applied at once. 115 00:10:42,430 --> 00:10:47,070 Perhaps not usually the case for what you want but there is a way for it. 116 00:10:47,390 --> 00:10:50,270 Let's run this application once again. 117 00:10:50,360 --> 00:10:55,980 Yet if I press apply we get a rotation and skate at the same time. 118 00:10:56,450 --> 00:11:03,520 OK and so this was a quick introduction to applying transformations in the next few lessons we'll be 119 00:11:03,520 --> 00:11:11,010 using them more often to do more advanced stuff and a combination of them with touch and gestures. 120 00:11:11,260 --> 00:11:12,440 And I see.