1 00:00:00,860 --> 00:00:01,550 ‫Hey, there. 2 00:00:01,700 --> 00:00:08,870 ‫Welcome back, Shabangu, the site now in this lecture, let us discuss about this 3-D that is scalable 3 00:00:08,870 --> 00:00:09,980 ‫vector graphics. 4 00:00:10,550 --> 00:00:16,760 ‫Now why this topic is important since when we work with any type of image, maybe we are working with 5 00:00:16,760 --> 00:00:25,160 ‫any type of background image, any type of logo, or maybe any type of dog jpg or not being image. 6 00:00:25,970 --> 00:00:28,990 ‫Now all these type of image depend on pixels. 7 00:00:29,000 --> 00:00:34,730 ‫So maybe if I zoom in, maybe if I zoom out, chances are they will be affected. 8 00:00:35,540 --> 00:00:38,480 ‫So we have a type called not a 3D. 9 00:00:39,030 --> 00:00:45,290 ‫Now, these scalable vector graphics can be zoomed in, zoomed out without getting affected. 10 00:00:45,740 --> 00:00:51,920 ‫Now one thing you need to understand that these switches are basically code that create the image. 11 00:00:52,160 --> 00:01:00,170 ‫For example, if I copy as we go right now, I can save this one and see the demo. 12 00:01:00,650 --> 00:01:03,200 ‫Hey, you can see we design our circle. 13 00:01:03,980 --> 00:01:07,430 ‫So that means this is the code which design this stuff. 14 00:01:08,210 --> 00:01:11,520 ‫Now, this can get complicated to design logos. 15 00:01:11,540 --> 00:01:17,180 ‫So if you talk about Google, if you talk about Twitter, they don't use not being you are not jpg. 16 00:01:17,600 --> 00:01:19,430 ‫They utilize these sweeties. 17 00:01:19,550 --> 00:01:20,030 ‫Why? 18 00:01:20,390 --> 00:01:22,070 ‫Because they are scalable. 19 00:01:22,070 --> 00:01:26,990 ‫That means if I want to the Google logo, it is not going to get pixelated. 20 00:01:27,440 --> 00:01:30,590 ‫Also, the second thing is they are easy to load. 21 00:01:30,740 --> 00:01:36,470 ‫That means Google is serving millions of views out on, I should say, billions of user every single 22 00:01:36,470 --> 00:01:36,770 ‫day. 23 00:01:37,340 --> 00:01:39,950 ‫So it's easy to solve the logo part. 24 00:01:40,190 --> 00:01:46,160 ‫But as we do, instead of not being our dog body, I hope you got the best idea. 25 00:01:46,760 --> 00:01:52,790 ‫Now there are certain things that are by default, or I should say, that are sold in common ships that 26 00:01:52,790 --> 00:01:55,160 ‫are heavily well with SPG code itself. 27 00:01:55,490 --> 00:02:01,460 ‫Now remember, this is a code part how you design this image with the help of this code itself. 28 00:02:01,970 --> 00:02:03,020 ‫So if I jump here. 29 00:02:04,860 --> 00:02:09,780 ‫This is the cold part which help us grow to find a different type of shape now. 30 00:02:09,800 --> 00:02:13,620 ‫Currently, I'm utilizing so-called but there are ellipse. 31 00:02:13,620 --> 00:02:18,510 ‫There is a line that has polygon that is rectangle and few others as well. 32 00:02:19,140 --> 00:02:22,260 ‫So there are a few different things that we can utilize. 33 00:02:22,430 --> 00:02:27,330 ‫Now, if you jump onto this whole cone, you will see we have defined width height. 34 00:02:28,200 --> 00:02:32,670 ‫Then there is radius for this particular circle that is border color. 35 00:02:32,940 --> 00:02:35,100 ‫There is weight of border as well. 36 00:02:35,100 --> 00:02:37,650 ‫As defined is basically the background color. 37 00:02:38,190 --> 00:02:40,770 ‫So this is the yellow, this is border. 38 00:02:41,040 --> 00:02:47,520 ‫Then there is word for a border and also there are certain other properties like six and Zeevi, which 39 00:02:47,520 --> 00:02:51,510 ‫refers to a center point of the circle on X and Y coordinate. 40 00:02:52,200 --> 00:02:54,270 ‫So the default values zero zero. 41 00:02:54,660 --> 00:02:56,790 ‫So if I talk about 50-50. 42 00:02:57,060 --> 00:02:59,730 ‫So that's the center point for ourselves concurrently. 43 00:03:00,300 --> 00:03:02,670 ‫Now you don't need to remember this again. 44 00:03:02,670 --> 00:03:08,670 ‫I'm telling you you are not going to draw shapes directly, as we do in real life, my work base. 45 00:03:09,030 --> 00:03:14,580 ‫So as a beginner, you don't need to remember that our dances that, OK, for example, you can create 46 00:03:15,180 --> 00:03:15,870 ‫the tango. 47 00:03:15,870 --> 00:03:20,640 ‫So if I copy the code for a rectangle here, save this one midmarket. 48 00:03:21,030 --> 00:03:23,190 ‫You can see I created a rectangle. 49 00:03:23,790 --> 00:03:25,500 ‫So that's how this is going to work. 50 00:03:25,500 --> 00:03:28,710 ‫But this is some basic stuff that you should be aware of. 51 00:03:29,370 --> 00:03:36,660 ‫Now how to utilize this 3D things to do some difficult tasks because we are not going to do this red 52 00:03:36,660 --> 00:03:37,900 ‫circle rectangle. 53 00:03:37,920 --> 00:03:39,300 ‫We have tons of resources. 54 00:03:39,300 --> 00:03:44,340 ‫We already read enough of CIUSSS to just carry on these basic stuff. 55 00:03:44,850 --> 00:03:49,590 ‫What we can do is we can design some views like this. 56 00:03:49,950 --> 00:03:57,630 ‫It's pretty hard to do this type of stuff with the help of CSS directly or if you see the dividers that 57 00:03:57,630 --> 00:04:00,120 ‫you see with the header part. 58 00:04:00,720 --> 00:04:02,850 ‫So if I just zoom out a bit. 59 00:04:04,280 --> 00:04:09,980 ‫This is pretty common design like waves that you see with different type of website, it's pretty popular 60 00:04:09,980 --> 00:04:16,130 ‫on the header part or I should say, the banner part of our website or maybe different type of shape 61 00:04:16,340 --> 00:04:21,200 ‫we can utilize either border radius or we can utilize as we depart. 62 00:04:21,800 --> 00:04:26,120 ‫So there are a lot of things that we can utilize Swedish port. 63 00:04:27,230 --> 00:04:34,130 ‫Remember, it basically utilized the common images like logo or any type of water content, which we 64 00:04:34,130 --> 00:04:35,900 ‫utilized again and again. 65 00:04:36,290 --> 00:04:43,760 ‫So on the repetitive task, as with use grid or any type of difficulty that we cannot implement directly 66 00:04:43,760 --> 00:04:44,710 ‫with CSE's. 67 00:04:45,380 --> 00:04:48,950 ‫And that's where this whole video game come into picture. 68 00:04:50,320 --> 00:04:57,200 ‫Now, as we give a lot of flexibility to draw things out, currently, we are growing this whole so-called 69 00:04:57,460 --> 00:05:00,460 ‫rectangle thing and then utilizing their own attribute. 70 00:05:00,610 --> 00:05:01,630 ‫Remember this spot? 71 00:05:02,140 --> 00:05:08,860 ‫We are utilizing the fixed values like so-called rectangle line polygon poly line. 72 00:05:09,130 --> 00:05:15,270 ‫There are a few things that we can utilize, but how do you draw stuff like this view? 73 00:05:15,370 --> 00:05:19,360 ‫So if I copied this one, you can jump on to get waves start. 74 00:05:19,360 --> 00:05:22,600 ‫I'll just randomly select anyone for now. 75 00:05:23,140 --> 00:05:24,560 ‫Click here to download Download. 76 00:05:25,000 --> 00:05:27,130 ‫As we do, we will do that later. 77 00:05:27,460 --> 00:05:35,440 ‫Or just copy this stuff and let me paste it here so we can discuss a lot of things now here with as 78 00:05:35,440 --> 00:05:38,980 ‫we do when we try to have complicated structure. 79 00:05:38,980 --> 00:05:45,070 ‫You will see a view walks, then you will see this part actually by save this one. 80 00:05:45,760 --> 00:05:50,170 ‫You will see this part instead of circle or instead of rectangle. 81 00:05:50,200 --> 00:05:56,530 ‫Now we have about then you will see this film, then you will see full opacity. 82 00:05:56,950 --> 00:06:02,980 ‫Then you will see this B and this B has some value, pretty big value. 83 00:06:03,820 --> 00:06:06,430 ‫And that stands so testy. 84 00:06:06,730 --> 00:06:09,070 ‫So you see what we are trying to do now. 85 00:06:09,580 --> 00:06:10,820 ‫We have this view walks. 86 00:06:10,840 --> 00:06:15,280 ‫Basically, what this view walks is it is defining shape in general terms. 87 00:06:15,640 --> 00:06:17,740 ‫Then this bill is going to take the color. 88 00:06:18,070 --> 00:06:19,990 ‫So whatever the color we have defined. 89 00:06:20,330 --> 00:06:22,420 ‫If you jump over this, this is the color. 90 00:06:23,080 --> 00:06:25,030 ‫So this bill is going to take the color. 91 00:06:25,330 --> 00:06:27,010 ‫Then we can define the opacity. 92 00:06:27,010 --> 00:06:34,390 ‫So if you change opacity here, maybe if I see five here or maybe 50 here, you can see how this is 93 00:06:34,390 --> 00:06:34,930 ‫changing. 94 00:06:35,560 --> 00:06:36,970 ‫And if I go over 200 here. 95 00:06:37,970 --> 00:06:39,260 ‫So that's how it's changing. 96 00:06:39,680 --> 00:06:48,440 ‫So this is fairly opacity, and then this is the which is defining the part of how this whole thing 97 00:06:48,440 --> 00:06:49,130 ‫is moving. 98 00:06:49,850 --> 00:06:54,470 ‫So we have this and we have this L what are they and how this is going to work? 99 00:06:54,950 --> 00:06:56,300 ‫Don't worry, we will discuss. 100 00:06:57,080 --> 00:07:04,730 ‫So I jump back here if I utilize a tool called Ezrahi Part Ed and just clear the screen for us utilizing 101 00:07:04,730 --> 00:07:05,940 ‫this potentially path. 102 00:07:06,500 --> 00:07:09,980 ‫Now we can design any type of image with the help of this tool. 103 00:07:10,760 --> 00:07:16,460 ‫Maybe I want to draw a rectangle or maybe any type of ship shape or any other shape. 104 00:07:16,820 --> 00:07:22,160 ‫So what I have to do is I have to click here and these are the items that you are going to see. 105 00:07:22,430 --> 00:07:26,620 ‫Move line, vertical line, horizontal line go. 106 00:07:26,900 --> 00:07:31,090 ‫So these are the you can see code to draw something in SPG. 107 00:07:31,640 --> 00:07:38,240 ‫If I jump here again, you can see inside our D, we have M that has move, then you will see and then 108 00:07:38,240 --> 00:07:41,810 ‫you will see see, which is spoko L is for line. 109 00:07:42,410 --> 00:07:47,360 ‫So this is basically a code that is drawing our image, remember? 110 00:07:47,750 --> 00:07:53,120 ‫So basically, if you see this, this is code behind the scene which is drawing this image. 111 00:07:53,690 --> 00:07:57,020 ‫OK, let me get back here and let's let's practice. 112 00:07:57,870 --> 00:08:04,290 ‫So I suppose if I select the line on had I draw a line here from this point to this point, if you see 113 00:08:04,290 --> 00:08:13,520 ‫this move as zero zero, that is higher X and Y direction, but L is line, which is 0.8 Higgins's zero 114 00:08:13,530 --> 00:08:14,010 ‫to eight. 115 00:08:15,220 --> 00:08:20,080 ‫Now, I heard if I insert another line, I go from this point to this point. 116 00:08:20,800 --> 00:08:24,980 ‫Now here you can see our code is increasing, so this is the first part. 117 00:08:25,000 --> 00:08:32,320 ‫Now the second part is we are moving towards IL 17, which is the x axis and eight, which is the y 118 00:08:32,320 --> 00:08:32,860 ‫axis. 119 00:08:33,700 --> 00:08:43,920 ‫Now from here, let me draw a go and go from this point to this point, and maybe let me take this go 120 00:08:43,930 --> 00:08:44,410 ‫ahead. 121 00:08:45,370 --> 00:08:45,720 ‫OK. 122 00:08:45,760 --> 00:08:47,560 ‫You can see we just draw this. 123 00:08:48,250 --> 00:08:54,350 ‫So now this is the new part, which is go 11, seven three five zero zero. 124 00:08:54,370 --> 00:08:59,410 ‫So here we just created our direction, and these are the point which are affected indirectly. 125 00:09:00,370 --> 00:09:03,400 ‫So if I want to copy this, I can copy this whole bag. 126 00:09:04,330 --> 00:09:07,260 ‫And let me get back to my vehicle now instead of this. 127 00:09:07,600 --> 00:09:09,510 ‫Let me replace it with my only. 128 00:09:11,280 --> 00:09:12,950 ‫So let me clear this denial. 129 00:09:13,780 --> 00:09:14,460 ‫OK, great. 130 00:09:14,670 --> 00:09:17,640 ‫So now I can add my own path. 131 00:09:17,700 --> 00:09:20,310 ‫And if I save this one, this is my path. 132 00:09:20,640 --> 00:09:26,280 ‫If I get back here now, here are the top right corner you can see we have that ship. 133 00:09:26,490 --> 00:09:27,870 ‫This is the exact shape. 134 00:09:28,410 --> 00:09:33,500 ‫Now the thing is, these are small coordinates and we need to increase their size. 135 00:09:33,510 --> 00:09:39,320 ‫So let me try to use instead of equipment, try to use 80, 170, 80. 136 00:09:39,810 --> 00:09:44,070 ‫I'm doing it randomly just to increase the size and see if this one. 137 00:09:45,320 --> 00:09:45,960 ‫It back out. 138 00:09:45,980 --> 00:09:48,980 ‫You can see this is the exact ship that we created. 139 00:09:49,460 --> 00:09:51,450 ‫Remember, this is not an image. 140 00:09:51,470 --> 00:09:53,090 ‫This is a squeegee. 141 00:09:53,600 --> 00:09:56,450 ‫So if you right click here, click on to the source part. 142 00:09:56,480 --> 00:09:58,940 ‫This is as we remember this point. 143 00:10:00,550 --> 00:10:04,330 ‫And you can scale it as much as you want, according to your requirement. 144 00:10:04,660 --> 00:10:06,850 ‫And this is not going to get big, senator. 145 00:10:06,880 --> 00:10:08,940 ‫Let me go with 10x more. 146 00:10:08,950 --> 00:10:10,660 ‫That means change their size. 147 00:10:12,770 --> 00:10:17,120 ‫For just reference, what was with the save this one, get back here. 148 00:10:17,720 --> 00:10:18,990 ‫You can see it's walking. 149 00:10:19,400 --> 00:10:22,560 ‫So that's how this whole pot thing is going to work. 150 00:10:22,580 --> 00:10:25,760 ‫And in general, we can create any type of shape. 151 00:10:26,150 --> 00:10:33,830 ‫Now, if I clear this one again and increase our scale and maybe go with Ben and Ben here, how can 152 00:10:33,860 --> 00:10:35,390 ‫we have increased our scale? 153 00:10:35,450 --> 00:10:36,950 ‫Now, if I try to draw something? 154 00:10:37,340 --> 00:10:38,480 ‫Maybe use a line. 155 00:10:39,650 --> 00:10:41,810 ‫And use a line again. 156 00:10:44,980 --> 00:10:49,060 ‫Here I can also convert this line, maybe let me select this line again, this point. 157 00:10:51,560 --> 00:10:56,690 ‫And converted to go, and now I can change it. 158 00:10:56,870 --> 00:10:57,250 ‫OK. 159 00:10:59,200 --> 00:11:03,630 ‫We just try to slide it, yeah, and I can also select this line. 160 00:11:04,910 --> 00:11:06,440 ‫And try to convert it. 161 00:11:08,620 --> 00:11:09,930 ‫Change the car park. 162 00:11:10,160 --> 00:11:13,660 ‫Maybe this yeah, something like this. 163 00:11:15,810 --> 00:11:21,360 ‫And here, let me add on new line itself, so let me select the line. 164 00:11:23,070 --> 00:11:23,970 ‫Cover this one. 165 00:11:25,530 --> 00:11:27,600 ‫So this one part is clear. 166 00:11:27,660 --> 00:11:29,250 ‫Let me also draw something else. 167 00:11:29,340 --> 00:11:31,140 ‫Let me create a call. 168 00:11:33,740 --> 00:11:36,140 ‫And you can see I am designing something. 169 00:11:37,910 --> 00:11:43,760 ‫This looks fine just for the demo, Bob, but no, let me copy this one, this whole thing and it had. 170 00:11:44,930 --> 00:11:50,660 ‫In our part, again, we need to resize it, but you can understand that what we are trying to do. 171 00:11:52,120 --> 00:11:54,870 ‫Let me add them with then multiples. 172 00:12:01,060 --> 00:12:01,900 ‫Save this one. 173 00:12:01,930 --> 00:12:05,050 ‫Get back here, and if you see if we does design this. 174 00:12:06,310 --> 00:12:09,190 ‫And here you can declare whichever you want. 175 00:12:09,400 --> 00:12:16,180 ‫Also the ambassador to Iraq, so I hope you got the idea how to work with, as we did behind the scene. 176 00:12:16,540 --> 00:12:22,150 ‫Chances are you are not aware of this and more student and even the junior developers who are currently 177 00:12:22,150 --> 00:12:24,820 ‫working and feel are not aware of this. 178 00:12:25,000 --> 00:12:30,040 ‫So I hope you got the idea how to utilize this tool just for understanding purposes. 179 00:12:30,610 --> 00:12:37,690 ‫Now there are several other tools that can help us to design readymade as we do that we can use directly 180 00:12:37,690 --> 00:12:38,440 ‫on our project. 181 00:12:39,220 --> 00:12:40,300 ‫I hope you got the idea. 182 00:12:40,330 --> 00:12:41,500 ‫I'm going to clear this up. 183 00:12:41,680 --> 00:12:48,460 ‫So remember, you can either use your own custom part or there are by default values where the so-called 184 00:12:48,460 --> 00:12:50,980 ‫rectangle helps and a few other thing. 185 00:12:51,400 --> 00:12:52,660 ‫So you can utilize them. 186 00:12:54,030 --> 00:12:57,810 ‫I hope that that's the basic thing that is clear for you now. 187 00:12:58,320 --> 00:12:59,880 ‫So I'm going to remove this part. 188 00:13:01,160 --> 00:13:03,650 ‫And currently, we don't have anything with CSIS. 189 00:13:04,400 --> 00:13:10,850 ‫So what I'm going to do is I'm going to create order and design these waves, the ship dividers and 190 00:13:10,850 --> 00:13:13,730 ‫experiment things with the help of our banner. 191 00:13:14,450 --> 00:13:16,270 ‫So that's all for this lecture. 192 00:13:16,280 --> 00:13:22,700 ‫Let us continue this stuff in the next one so we can play with ships with the help of these pre-defined 193 00:13:22,700 --> 00:13:23,300 ‫builders. 194 00:13:24,270 --> 00:13:25,230 ‫Thank you for calling. 195 00:13:25,260 --> 00:13:28,680 ‫I hope this lecture was helpful, and I see you guys in the next one.