{"id":23655,"date":"2018-02-20T23:50:30","date_gmt":"2018-02-20T23:50:30","guid":{"rendered":"https:\/\/writemyessayfree.com\/lab-7-c-graphics"},"modified":"2017-08-03T16:09:57","modified_gmt":"2017-08-03T16:09:57","slug":"lab-7-c-graphics","status":"publish","type":"post","link":"https:\/\/www.benedictsol.com\/blogs\/lab-7-c-graphics\/","title":{"rendered":"Lab 7 C++ graphics"},"content":{"rendered":"
\n

For this lab, we will draw a simple robot. However, instead of going about this problem the way we did earlier, we will set up a data array with all the information we need. I will show you basically how to do this, you will need to come up with the numbers that build your robot.<\/p>\n

Here is an image of a robot toy to give you an idea what we want to construct:<\/p>\n

\"..\/..\/_images\/SimpleRobot.png\"<\/p>\n

\n

Figuring our the data<\/h3>\n

As before, you will need to sketch your robot and figure out the approximate values you need for parameters to the shape drawing routines you will need to use. We will record those numbers in a big array of integer numbers, and trick our program into fetching the data needed for each function call from the array.<\/p>\n

\n

Note<\/p>\n

This will not be so bad, just follow my lead!<\/p>\n<\/p><\/div>\n<\/p><\/div>\n

\n

Building the drawing program<\/h3>\n

To create our drawing, we need to write down (on paper, not code) the sequence of shapes we want to draw, and for each shape, write down the numbers we will pass in as parameters on the appropriate function call line. Next, we will assign a simple number for each shape. Something like this:<\/p>\n

\n
\n
    \n
  • 0 = circle<\/li>\n
  • 2 = triangle<\/li>\n
  • 3 = rectangle<\/li>\n<\/ul><\/div>\n<\/blockquote>\n

    Now, we can write out our data as a set of numbers, line so:<\/p>\n

    \n
    \n
    0, 50, 50, 25\n1, 200, 125, 100, 275, 200, 375\n9\n<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
    Note<\/p>\n
    That last number is bigger than any number we use for a shape.<\/p>\n<\/p><\/div>\n
    This set of numbers should draw a circle at x = 50, y = 50, with radius = 25, followed by a triangle drawn from x1 = 200, y1 = 125, and so on.<\/p>\n
    We will record all of these numbers , in order, in a simple data array, then write code to pull these numbers back out as needed to generate our drawing!<\/p>\n<\/p><\/div>\n
    \n
    The main program code<\/h3>\n
    You will need to create a loop that works through the entire data array. Your loop will need to be coded so it checks the shape value, then pulls out the numbers needed for the right function call.<\/p>\n
    We will use a new C++ statement to control the actual drawing. Here is the code we need to generate our drawing:<\/p>\n
    \n
    \n
    int<\/span> data<\/span>[<\/span>12<\/span>]<\/span> =<\/span> {<\/span>\n    0<\/span>,<\/span> 50<\/span>,<\/span> 50<\/span>,<\/span> 25<\/span>,<\/span>\n    1<\/span>,<\/span> 200<\/span>,<\/span> 125<\/span>,<\/span> 100<\/span>,<\/span> 275<\/span>,<\/span> 200<\/span>,<\/span> 375<\/span>,<\/span>\n    9<\/span>\n};<\/span>\n\n\nvoid<\/span> drawScene<\/span>(<\/span>void<\/span>)<\/span> {<\/span>\n\n    int<\/span> index<\/span> =<\/span> 0<\/span>;<\/span>\n    int<\/span> shape_type<\/span>;<\/span>\n    int<\/span> done<\/span> =<\/span> 0<\/span>;<\/span>\n\n    clearWindow<\/span>();<\/span>\n    setColor<\/span>(<\/span>YELLOW<\/span>);<\/span>\n    index<\/span> =<\/span> 0<\/span>;<\/span>\n    for<\/span>(<\/span>int<\/span> i<\/span>=<\/span>0<\/span>;<\/span> i<\/span><<\/span>2<\/span>;<\/span>i<\/span>++<\/span>)<\/span> {<\/span>\n        shape_type<\/span> =<\/span> data<\/span>[<\/span>index<\/span>];<\/span>     \/\/<\/span> this<\/span> should<\/span> be<\/span> the<\/span> shape<\/span> code<\/span>\n        index<\/span> =<\/span> index<\/span> +<\/span> 1<\/span>;<\/span>      \/\/<\/span> now<\/span> index<\/span> point<\/span> to<\/span> the<\/span> first<\/span> parameter<\/span>\n        switch<\/span>(<\/span>shape_type<\/span>)<\/span> {<\/span>\n            case<\/span> 0<\/span>:<\/span> \/\/<\/span> circle<\/span>\n                drawFilledCircle<\/span>(<\/span>\n                   data<\/span>[<\/span>index<\/span>],<\/span> data<\/span>[<\/span>index<\/span>+<\/span>1<\/span>],<\/span> data<\/span>[<\/span>index<\/span>+<\/span>2<\/span>]);<\/span>\n                index<\/span> =<\/span> index<\/span> +<\/span> 3<\/span>;<\/span>\n                break<\/span>;<\/span>\n            case<\/span> 1<\/span>:<\/span> \/\/<\/span> triangle<\/span>\n                drawFilledTriangle<\/span>(<\/span>\n                    data<\/span>[<\/span>index<\/span>],<\/span> data<\/span>[<\/span>index<\/span>+<\/span>1<\/span>],<\/span> \n                    data<\/span>[<\/span>index<\/span>+<\/span>2<\/span>],<\/span> data<\/span>[<\/span>index<\/span>+<\/span>3<\/span>],<\/span> \n                    data<\/span>[<\/span>index<\/span>+<\/span>4<\/span>],<\/span> data<\/span>[<\/span>index<\/span>+<\/span>5<\/span>]);<\/span>\n                index<\/span> =<\/span> index<\/span> +<\/span> 6<\/span>;<\/span>\n                break<\/span>;<\/span>\n            default<\/span>:<\/span> \/\/<\/span> done<\/span> with<\/span> shape<\/span> loop<\/span>\n                done<\/span> =<\/span> 1<\/span>;<\/span>\n        }<\/span>\n        if<\/span> (<\/span>done<\/span> ==<\/span> 1<\/span>)<\/span> break<\/span>;<\/span>\n    }<\/span>\n    glEnd<\/span>();<\/span>\n    glFlush<\/span>();<\/span>\n    glutSwapBuffers<\/span>();<\/span>\n    glEnd<\/span>();<\/span>\n}<\/span>\n<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
    The switch statement<\/h3>\n
    There is a new statement in this code, the&nbsp;switch<\/span>&nbsp;statement<\/span><\/code>. Basically, this statement is a replacement for what would be a complicated nested if-then-else statement, It works like this:<\/p>\n
    Suppose you have an integer variable that can hold one of a defined set of values and you want to process different code depending on the actual value in that variable.<\/p>\n
    The&nbsp;switch(shape_type)<\/span><\/code>&nbsp;part of this statement examines the variable (shape_type<\/span><\/code>&nbsp;in this example). What comes after the&nbsp;switch<\/span>&nbsp;line<\/span><\/code>&nbsp;is a C++&nbsp;block<\/span><\/code>, which is a series of things inside curly braces. In this statement, each possible value we want to check is identified by a&nbsp;case<\/span>&nbsp;value:<\/span><\/code>line. In the example above, I have set up simple numbers for each possible shape I want to draw (well not all of them, this is just an example).<\/p>\n
    After each&nbsp;case<\/span>&nbsp;value:<\/span><\/code>&nbsp;line, we place a series of statements (indented) that will be processed only if the value of the variable matches the&nbsp;value<\/span><\/code>&nbsp;on the&nbsp;case<\/span><\/code>&nbsp;line.<\/p>\n
    For our program, the last line in this set of statements should be a&nbsp;break<\/span><\/code>&nbsp;line. The&nbsp;break<\/span><\/code>&nbsp;\u201cbreaks\u201d us out of the&nbsp;switch<\/span><\/code>&nbsp;statement, and we continue processing on the statement following the close curly bracket. In special cases, programmers leave the&nbsp;break<\/span><\/code>&nbsp;out, but what happens if beyond this course, so make sure you remember to put this statement in as shown.<\/p>\n
    If the value in&nbsp;shape_type<\/span><\/code>&nbsp;does not match any of the values listed on the set of&nbsp;case<\/span><\/code>&nbsp;lines you include, we can do something by default. We just include a final&nbsp;default:<\/span><\/code>&nbsp;line, followed by the code we want to process. In this set of code, we do not need a final&nbsp;break<\/span><\/code>, since this chunk of code comes at the end of the&nbsp;switch<\/span>&nbsp;statement<\/span><\/code>.<\/p>\n
    Phew, sounds complicated, but it is not too bad, and can be handy. Like everything in programming, you only use statements if you feel that they will help you get your job done. IN this case, it is just what we need to control our drawing!<\/p>\n<\/p><\/div>\n
    \n
    How this code works<\/h3>\n
    The code shown above is a bit tricky, but it gets the job done! I figured this out a million years ago when I was trying to draw things in a language called FORTRAN! (Wait!, I am not really that old!)<\/p>\n
    The main&nbsp;for-loop<\/span><\/code>&nbsp;uses the counter to track the&nbsp;shapes<\/span><\/code>&nbsp;we want to draw. In the example data set, there are two shapes, plus another number that will stop the loop, in case I mess up the data somehow! I set up another variable named&nbsp;index<\/span><\/code>&nbsp;that I will use to point to the first number for a shape in the data array. Initially, this variable is initialized to zero (remember, the first number in the array, which is at&nbsp;data[0]<\/span><\/code>). Since the number in the&nbsp;data<\/span><\/code>&nbsp;array is a zero in our example, that means we will draw a circle, and we need three additional numbers. Those numbers will be at:<\/p>\n
    \n
    \n
    data[0] = 0 - draw a circle\ndata[1] = 50 - the x coordinate\ndata[2] = 50 - the y coordinate\ndata[3] = 25 - the circle radius\n<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n
    The&nbsp;case<\/span>&nbsp;0:<\/span><\/code>&nbsp;line is where the code for drawing the circle needs to go. Notice that I am using theindex<\/span><\/code>&nbsp;variable to send the values from the&nbsp;data<\/span><\/code>&nbsp;array into the drawing function.<\/p>\n
    What happens at after the call to the drawing function is key to getting this all to work. For the next shape we want to draw, the shape number is in&nbsp;data[4]<\/span><\/code>. If we add 4 to Index, then&nbsp;index<\/span><\/code>&nbsp;will be \u201cpointing\u201d to the next shape number in the array. In&nbsp;data[index]<\/span><\/code>&nbsp;(data[4]<\/span><\/code>&nbsp;now), we find our next shape number, The parameters for that shape are passed in as parameters exactly as we did for the circle.<\/p>\n
    Each&nbsp;case<\/span><\/code>&nbsp;block needs to add something to the&nbsp;index<\/span><\/code>&nbsp;variable, but exactly what that something is depends on the shape being drawn. For the circle, it was 3, for the triangle, it will be 6 (can you see why).<\/p>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    For this lab, we will draw a simple robot. However, instead of going about this problem the way we did earlier, we will set up a data array with all the information we need. I will show you basically how Read More …<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-23655","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/posts\/23655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/comments?post=23655"}],"version-history":[{"count":0,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/posts\/23655\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/media?parent=23655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/categories?post=23655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/tags?post=23655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}