 Hello, welcome to another lecture on computer programming. I am Dr. Abhiram Ranade of the department of computer science and engineering at IIT Bombay. The title for this session is coordinate based graphics. Here is a very quick recap of the last lecture. In the last lecture, we discussed the turtle graphics facility of simple CDP. In this session, we will discuss the coordinate based graphics, which will allow you to do more interesting things. This facility is discussed at length in chapter 5 of an introduction to program through C++, which is the book that you have been using, published by McGraw-Hill Education in 2014. Some part of this also comes from section 15.2.3 of the book. Let me make some basic remarks about coordinate based graphics. First, for doing turtle based graphics, we are using the function turtle sim to create the graphics window. Now, we will use the function init canvas to create the graphics window. This will do more or less the same thing except that the turtle will not appear at the center as it did earlier. The drawing window, which we will refer to as the canvas has a coordinate frame. The origin of the coordinate frame is at the top left corner. The x axis goes to the right. The y axis goes down. Notice that this is slightly different from what we are used to in mathematics, where the y axis goes up. In case of most computing, the y axis will indeed go down, which is what happens over here. Graphics and objects can be created on the canvas and you will see the facilities for it shortly. They can also be moved, rotated, scaled. Their colors can be changed. And graphics objects, all graphics objects have pens just as our turtle did. And so if we choose, lines can be drawn when the graphics objects are moved. Graphics objects happen to be ordinary C++ objects in memory. But in addition to being objects in memory, they are also accompanied by their representation on the canvas. So now to modify the representation or to modify the image on the canvas, you simply have to call member functions. And in fact, to create graphics objects, you also have to just construct the corresponding C++ objects and the constructor calls can be used to decide the initial appearance of the graphics object. So as I said to create a graphics object, you have to call an appropriate constructor. The general form, if I may remind you looks like this. There is a type and then there is the name that you want to give to the object followed by the list of arguments to the constructor. This could be followed after a comma by more names of the same type as you are accustomed to usually or it could be followed by a semicolon that would make a complete sentence. For example, I could write turtle t1. So this would get me a turtle object. In turtle sim also you got a turtle object. But now I can have several turtles if I like. So I could write turtle t1, t2, t3, semicolon. So that would give me three turtles. How I will command each of the turtles is by calling member functions which we will see in a minute. So this as I said creates a turtle which is named t1 and it appears at the same place as before. It appears on the canvas at the center and it points right. Here is a command or here is a constructor call an object using which you can create circles. So the type of the object is circle and this command will create an object c1, object named c1 centered at cxcy and having radius r. You can also create rectangles. This is how you do it. This will create a rectangle named r centered at cxcy and having width w and height h. You can create lines and this is how. This will create a line named l1 and the line goes from x1, y1 to x2, y2. And these coordinates, all these coordinates in fact are given with respect to the origin. Let me remind you and the origin at the top left corner of the canvas. This command allows you to write on the screen. So whatever is going to be written is the content. So here for example you can place a quoted character string or you can put a pointer to a car array and this text will appear with x, y, the point x, y as the center. So this text will appear on the screen but it will be centered at the point x, y. I might also use that word screen but I mean the canvas. You can also draw arbitrarily sided polygons. So this command creates a polygon p having n sides or n vertices. The array chords is a double array of doubles with two rows and n columns. Each column specifies the coordinates of the vertices of the polygon. And remember the coordinates are to given relative to cxcy. Once you have constructed graphics objects, you can perform operations on them. And as I said earlier, operations on graphics objects are simply member function calls on the corresponding object. So suppose we have a graphics object g which we have somehow constructed. Here are some of the operations that we can perform on g. I can write g dot move to x, y. So this will move the object from wherever it is to the coordinate x, y that has been named. Basically this means that the center of the object will move to that point. I can also specify the movement by giving a relative displacement. So if I say g dot move dx, dy then the object will move from its current position to a position obtained by adding dx and dy to the x and y coordinates. So if the current position is x, y then this will cause the object to move to x plus dx and y plus dy. You can also shrink or expand an object and this operation is called scaling. So you can specify a factor which if bigger than one will cause the object to expand, which if smaller than one will cause the object to shrink. So whatever the factor is that will be used to shrink or expand. This operation does not apply to text. Text remains the same size no matter what you do, no matter what. You can also change the color of an object. All objects are created of color black by default. Well except for turtles which you have seen are created of color red. So this is how you can change the color of an object to a color C. Now the color C is to be specified in a certain manner. So for example you may write instead of C you may write color of red. The whole thing has to be included. So this will change the color to red. You can give the usual familiar names like green, blue, yellow, whatever and change the colors appropriately. Another way to specify a color by giving the red, green and blue components of the intensities. So for example if I give the red intensity as 255 then that is the brightest possible red and if I specify all the other the G and B as 0 then I will get the true red color. Similarly if I give B as 255 then I will get just the blue color. I will get the shade that I get will be a pure blue and similarly for green. However I can specify mixtures as well. So for example I can specify 255 for both the red and the blue. This will cause a mixture to appear. So red and blue as you might guess when mixed give you the purple color. So in fact if you specify red 255 and blue also 255 will get a very bright purple. You can reduce the intensity or you can make the shades go one way or the other by changing the numbers that you give for R, G and B. An object can be drawn in two ways. It can be drawn in outline or it can be drawn as a solid filled object. Whether it is drawn in outline or whether it is drawn in a solid manner can be changed by the set fill command. If you say G dot set fill with true as in place of V then this will make the object solid that is it will fill the interior of the object. If you specify false then the object will be drawn as outline. Note that this is applicable only for circle, rectangle and polygon and not for lines and text. Some more operations are also allowed. For example you can hide an object. So this is done by the member function hide. You can also show an object once it has been hidden. So if it was hidden earlier then if you say show then that will make G visible. If it was already visible then this command will do nothing. Left right forward are available as member functions. Actually pen up and pen down are also available as member functions. One more rotation command is given and this is rotate. So I can write G dot rotate of A and this rotates clockwise and unlike left and right which expect an argument which is in degrees rotate expects an argument which is in radians. Once you have drawn an object and you have moved it around or rotated it its position will change its x coordinates will change its orientation will change its scaling factor will change. You could keep track of all these things yourself but simple CPP allows you to query an object and get its x coordinate, current x coordinate that is. This can be done by G dot get x which returns the value of the current x coordinate. Similarly G dot get y returns the value of the current y coordinate. G dot get orientation gives you the angle in radians starting from measure from the x axis going clockwise. So this value tells you by how much you have rotated that object or in other words in what direction is it pointing now. G dot get scale tells you the current scale of G. So suppose you have scaled up the object by a factor of 2 and then scaled it of a gain by a factor of 3 and then if you call G dot get scale then 6 will be returned. So this way you can ask the object what its current parameters are and perhaps based on that you can take action. Here is an interesting function provided you can write G dot imprint without any arguments and basically this causes an image of G to be drawn at the current position orientation and scale. This image will be permanently drawn on the canvas just as the turtle draws lines. This image will persist even if G moves. So you can sort of stamp that object at several places and the object can of course keep moving and do more stamping or create more images if you wish. G dot reset is a command which allows you to reinitialize G. So whatever argument list was acceptable at the time of creation can be supplied over here and the corresponding object the named object will get reset. I should point out that rotation and scaling cannot be performed on text. Now we will use some of the features some of the facilities that I have described and write a program which does something just for fun. So it will show you a rectangle being tossed up and in fact the rectangle will be spinning as we toss it up and furthermore we will also change its color as it moves. So here is the program. So as you can see we begin by creating the canvas then we are going to create our rectangle. The rectangle is going to be created at coordinates 0, 300 and it is going to be 30 pixels wide and 20 pixels tall. Here are two variables which we will use for specifying the color. So initially we will make it a pure red and the blue coordinate will be 0. The green part we will keep 0 throughout so we do not have a variable for it. When we call r dot set fill we are saying that the rectangle should not be drawn in outline but instead it should be drawn full. Then here are two more variables vx which gives the velocity of the rectangle in the x direction. So we are saying that in a single time step the rectangle will move three pixels to the right. We have specified vy as minus 4. Remember that the y axis is actually going downwards. So when I specify the y velocity to be negative actually the projectile or the rectangle is moving upwards by 4 pixels in every step. And then we will also have an acceleration. So the acceleration is going to mimic the effect of gravity and therefore we have made it positive. So positive means in fact that it will go in the direction of the y axis so it will cause the rectangle to be dragged downwards. So the velocity of the rectangle will keep on increasing. So instead of being negative it will eventually become positive and at that point the rectangle will start going downwards. This is really very similar to what happens when you throw a ball. So the ball has a certain vertical velocity and possibly a certain horizontal velocity. The horizontal velocity does not change but the vertical velocity keeps decreasing as the ball moves. So that is what we are going to mimic. This is what happens in the loop. We are going to do 200 steps in which we in which we are going to have our rectangle move and have its velocity change to mimic the effect of gravity. First we are going to wait for 0.05 seconds. As I said if we do not do the waiting then the computers are so fast that they will draw the whole thing very quickly and we will not get to see any animation. We will not we will only see the final state. This way we will see everything as it moves. Now we are going to simulate the effect of movement. So if you remember r dot move tells you tells r to move relatively by the argument. So whatever the current velocities are r our rectangle will move by that much. Here is an interesting point. In each step we will turn our rectangle by 10 degrees. So this is exactly like turning the our turtle except that this is this is a rectangle a named rectangle and right now is being used as a member function. So r dot right will turn our rectangle r by 10 degrees. Notice that r dot move is immediately followed by right. So you will essentially see the effect of both of these things simultaneously. Then we are going to prepare for the next step. In the next step we want the velocity to change. How much do we want it to change? Well the acceleration is g or the gravitational acceleration as we are calling it. So we want that to be added. So originally vertical the vertical velocity was v y which was minus 4 but after this step it will become minus 3.95. We also want our object to change colors. So we will change the red component. We want the red component to go down. So everything is being measured modulo 256. The red value is taken whatever the number is its value modulo 256 is taken. We want it to reduce. So a simple way of doing it is to add 254 which is equivalent to reducing it by minus 2. So what we are doing is we are changing we are reducing the red u by minus 2. But of course it will keep on reducing and eventually after it becomes 0 it will again go back to 254 and that way it will again go back to a very positive value and that way we will have the full red again. The blue value on the other hand we are increasing. Remember it started at 0. So this will make the object slightly bluer and slightly less red as time goes on and to do that we have to set the color to this to these new values. So this will happen 200 step. So in this case you should see the object sort of starts somewhere over here go up and then come down and at the end of it will wait 5 just to see what is going on. What the final picture is? So let us compile and run it. As you can see it is rotating, it is also changing colors and it is also acting as if it is under the force of gravity. So we come to the end of this session. Let me summarize what we have done. We discussed coordinate graphics, coordinate based graphics as supported in simple CPP. Graphics objects also have an in-memory part and we saw that basically every graphics object is just a regular object which is in memory and in addition something is drawn on the screen. By calling member functions on the in-memory part you can manipulate the appearance on the screen. You can use coordinate based graphics to do animations and you can take, you can define objects, you can rotate them, translate them, scale them, change colors and this can be used for doing for producing interesting effects. And indeed by using these things you can have many, many different projects. You can have objects with change colors, possibly objects which collide. You just have to let your imagination go loose.