 Hello and welcome to the third lecture of the second week of the course on an introduction to programming through C++ for NPTEL. The topic of this lecture sequence is simple CPP graphics. So in simple CPP graphics a lot more is possible just besides moving turtles. So you can have other shapes also besides turtles. You can change the color and the size. You can have absolute coordinates so related to the canvas and graphical input is also possible. So to start up this more general graphics you have to use init canvas and not turtle sim. So the first form for init canvas is init canvas without any arguments and this will just open a window or the canvas for drawing. In the second form you can give a name to that window and you can also say how wide that window is going to be and how high it is going to be. So the name should be a quoted string and W and H should be numbers. Now the drawing area or the canvas has a coordinate system. So the canvas origin is in the top left corner. The x axis goes rightwards as you are normally accustomed to. The y axis on the other hand goes downward rather than upward as you might be more commonly using in math. Then the commands that you use may not all use the coordinate system but there will be some commands which will use the coordinate system. So how do you create other objects? Well let us start with how do you create many turtles rather than use just the one that is given to us. So the general form is to say something like turtle n1, n2, nk where n1, n2, nk are the names that you are going to give to the turtles that you are going to create. So this is going to create k turtles having names n1 through nk and of course any identifier can be used. See all the turtles are at the center of the canvas and all are facing right like our single turtle. But that single turtle which you got by default is no longer going to be there if you used in it canvas. You can selectively move turtle whose name is ni by writing ni.forward 50 or whatever rather than just forward 50. So since you have several turtles you have to say which turtle you are talking to. And other commands like left, right can also be used instead of forward. So just to give you a sense of what we can do here is the program and in it we have the first statement is just this in it canvas statement so that canvas is created then we are going to create three turtles and as I said they are going to be at the center and facing right. But now we are going to tell different things to the turtles. So the first T1 will leave as it is turtle T2 will ask to turn left by 120 degrees, T3 will ask to turn left by 240 degrees. And now we are going to get the turtles to move. So all of them are going to move forward and all of them are going to turn left by 365 degrees. So each one of them is going to be drawing an octagon. So let us see what happens. So this is the program that we wrote and let us now execute it. So we will compile it first. So let us execute it. See that each turtle was moving as we commanded the turtle went out but again came back in as soon as its coordinates became consistent with interior of the canvas. So we just did this. Now we are going to turn to creating other graphical objects. In general to create a graphical object you do something like what you do to create a variable, you are going to give the type, this time the shape type and then the name along with the arguments. So the shapes that you can create are circle, rectangle, line and text. So the name that we have in this basic form is the name to be given to the created object. And you can move the created object forward or in general manipulate it by writing name dot whatever operation. So if you write name dot forward then you will be moving that object forward by 100 pixels. So each object will have a current direction in which it is facing and that and forward will cause that object to move in that current direction. And we already saw this that multiple objects of the same type can be created by giving comma separated names with arguments. And all these objects also have pens but unlike turtles whose pens are down by default these other objects have their pens up. So they will not draw by default. So how do you create circles? So we are going to supply three arguments. The first two are the x-y coordinates of the center and then the radius. So for example if I write circle C1, 110 that gives me one circle at center 100 of radius 10. The second C200, 120 will give me another circle at the same center but with radius 20. So these two will be concentric circles. I can make rectangles. So I can make a rectangle called R1 and the first two numbers are going to be interpreted as the x-y coordinates of the center. So in this case 200-100 is the center of the rectangle and the width is 20 and the height is 40. I can create lines and I just have to supply the coordinates of the first end point and then the coordinates of the second end point. So for example here I have a line starting at 2020 going to 2030. So the x-coordinate remains the same, the y-coordinate goes from 20 to 30. So this is going to be a vertical line. The second line is 25-15 going to 25-25. So this also is a vertical line. It is going to be a vertical line at x-coordinate 25 and it will go from 15 to 25. I can create text if I wish. So I supply the x-coordinates of where the text is to be centered and then the text itself encodes and along with text I have these two additional commands. Text width of the text tells me how wide the entire text is going to be and text height of t tells me how high the text t is in pixels and using this I know what the shape over the size of the text is and so I know I mean I can do my layout a little bit better. So here is an example. First I am going to create the text centered at the point 100 and having the text itself being C++. So C++ will be written at 100. Then I am going to create a rectangle. This rectangle is also centered at 100 and its text width is the text width of C++4. So it is going to be 2 pixels outside on each direction and text height is also similar. So it is going to create a rectangle which sort of borders this text. So it sort of fits reasonably snugly. So this way you can sort of create nice buttons if you like. So you might have seen programs in which there are buttons. So buttons are maybe rectangles with text and this is how you might create buttons. So there are some commands allowed on shapes. So for example I can say move shape S to coordinates XY. So XY are absolute coordinates over here. The shape which was created at some other point is now moved to coordinate XY. So by the way when I say move a shape what moves is its center. So the center of the circle moves, the center of the rectangle moves and for lines also the center of the line moves. I can move by giving a relative displacement. So if I say S move DXDY then if its original position was X1, Y1 then the new position is X1 plus DX and Y1 plus DX. I can scale a shape. So if I say S dot scale 2 then that shape will become twice as big. Its center will remain where it was earlier. So around that center it will become twice as big. I can rotate it and it rotates again around the center. So here I specify the angle and this angle must be in radiance. So radiance is actually the more common measure on a computer just as it is a more common measure in scientific work. Now rotation and scaling as of today cannot happen on text but there are efforts to change that. When a graphic subject is created it has the color black except for turtles which are red but the color can be changed. So you can write if S is the graphic subject or S is the shape that you created then you can change its color by writing S dot set color to call. So notice that the spelling over here is C-O-L-O-R sort of paying homage to the American spelling which was used in the logo language from which we said this turtle graphics has been inspired. So this will change the color of S to call. Call must be specified as this text color and in parenthesis the actual name of the color red or whatever. So common color names are recognized so you can just specify them. Another way is to set the color to whatever fine shade you want and as you might know colors on a computer are obtained by mixing the primary colors red, green and blue. So you specify what fraction or what amount of red you want, what amount of green you want, what amount of blue you want and you get their mixture. And these numbers red, green and blue must be between 0 and 255. Let me just observe that if you make all of them 255 you will get the color white and if you make all of them 0 you will get the color black. If you assign a color to a shape it only really changes the border but if you wanted to change the interior then you have to fill that shape. So for this you have to say S dot set fill. So set fill you can set to true or false and true means that I want the interior filled and false means I want the interior left, right. So this is allowed only when S is a circle or rectangle and for others this does not really make sense. Once you have drawn a shape you can ask where is the shape currently and S dot get X will return the X coordinate of that shape or the X coordinate of that center and similarly S dot get Y will give you the Y coordinate of the center. Similarly S dot get orientation will return the current orientation that is the angle through which S has been rotated so far. So remember that the originally all shapes start with start facing the right direction and so from that the orientation is measured. Get scale returns to you the current scale factor. So you might have done a fair amount of scaling so the end result of that is returned if you write this command. So this command evaluates to the current scale factor used for S. So you could have known that yourself because after all you were the one who issued the scale commands but this is a way by which you do not really have to keep track of all the things that you did. One useful operation is to imprint a shape. So S dot imprint will cause an image of S to be permanently drawn on the canvas at its current position. So even after S moves the image will be present. If you wish to create a static picture involving 100 circles or some other objects then it is better to follow this procedure. So you create one circle, you move it to the appropriate positions and you imprint the circle in those positions. Other than that you could have also done create 100 circles but that usually is going to be cumbersome and that usually also takes more time because C++ will have to keep track of all those circles as it draws and things like that. So if you are not going to have circles which move then it is better to get them into your picture by imprinting them. You also have graphical input and for this you have the command get click. So this will cause the program to wait until the user clicks on the screen. This is sort of like the C in command. The C in command causes the program to wait until the user types something. Get click causes the program to wait until the user clicks. This command returns the value 65536 which is 2 raised to 16 incidentally times x plus y where x and y are the coordinates of the cursor position at the position of the click. So you can wait for the user to click and you can get the point where the user clicked. So how do you get the points? Well this is how. So you do not just issue the get click command but you say in w equal to get click. So that expression 65536 times x plus y will get put into w. Now if you take the quotient that has to be your x coordinate and if you take the remainder that has to be the y coordinate. So this is how you can discover the coordinates where the user clicked. And this will work provided y is smaller than 65536 but of course the number of pixels in any device that you might have is likely to be way smaller than 65536 and therefore this scheme works quite nicely. So you may also write just get click and not something equal to get click. In that case your program will just wait for a click to happen. And whatever value that it receives by looking at the positions of the mouse cursor those are just going to get thrown away. So let us do an example. So here is the main program so we are creating a canvas and we are calling it projectile. So this is going to be the title that will appear on the window. And I am going to have an integer start equals get click. So immediately after creating the canvas I am going to wait for a click to happen. So I am going to create a circle next but it is x coordinate. The x coordinate of the center is going to be start divided by 65536 or it is going to be the x coordinate of the click position. And the y coordinate is going to be start mod 65536 or in other words the y coordinate of the click position. So this means that the circle is going to be centered at the point at which you clicked and its radius is going to be 5. So circles normally do not have their pen down so we are going to make the pen go down and now we are going to do something fun. We are going to have velocities for this circle. Well there is no formal velocity as such but we will sort of make it appear as if there is a velocity. So we are going to say that the x velocity is 1, the y velocity is minus 1 and then there is a gravitational force of 0.01. So notice that we have our vertical velocity is minus 1. So what is vertical velocity? So what is minus 1? So minus 1 merely says that our object will want to move in the negative x direction. So what is the positive x direction? The positive x direction is going downwards as we said at the beginning of the lecture. So the positive x direction is going downwards and so the negative x direction is going upwards. So initially our object has been assigned a velocity. So suppose we clicked at this point then a circle will be created over here and unit velocity will be assigned in both directions. So our object will be disposed to move in this direction. Now we will make the object move so we will make the object move for 500 steps. So in each step the object will move by vx, vy. However in each step the velocity will also change. The velocity will change by 0.01 which is going to be the effect of gravity of course. This is just make believe but this says that the y velocity will increase by 0.01. Remember that y velocity initially is negative. So as it increases by 0.1 its velocity is going to be decreasing. So it was moving very fast in the upward direction, it is going to slow down in the upward direction and eventually it is going to start moving fast in the downward direction. Notice that this is exactly what happens to a stone when you throw the stone in the air. Initially it has a vertical upward velocity and gravity acts on it and gravity pulls the stone down and also its velocity becomes faster and faster in the downward direction. So in order for you to see what is going on we are going to wait for about 100th of a second and that is it. So after the whole thing is finished we are going to wait for you to click so that you get a chance to see what has happened. So let us do a demo of this. So the program is called projectile. So this is the program which I showed to you. So let us compile it and let us run it. So you can see that a window has been created, the name projectile appears at the top and now the program is waiting for me to click on the screen. So suppose I click on the screen you see a circle got created, sort of a ball and it is moving, it is moving against gravity, gravity is pulling it downwards and it is going to move for 500 steps. So it is going to move for 500 steps and in this case the 500 steps took it outside the canvas but that is okay but once that entire thing has been drawn then I will just, it is waiting for me to click so let me click and that is the end of the program. So you can do lots of interesting things with what I have told you. So for example you can draw a plot of arbitrary function. So say y equal to sin x. So how do you do this, well you have to decide where exactly that plot has to be drawn. So you will not supply the actual x coordinates and you may have to scale this whole thing a little bit but I will let you think about it but the one point that I must mention here is that it is a curve which you will have to approximate by lines and those lines will be drawn by imprinting because there will be lots of small lines and you really do not want to create all those lines. Then there are a couple of other exercises and well you can just have fun drawing some nice designs or doing some nice animations. So to summarize you can have graphical shapes with names and circles lines are only allowed but you can move them, you can rotate them, you can change their colors, text is also allowed and the book gives more details. Later on in the course we will see that polygons can also be drawn and later on we may see how dragging and things like that can also be done. So these are basic things that you have learnt in this lecture and you can already use them to create interesting drawings and animations and in fact even graphical editors, we will see that very soon. Thank you.