Difference between revisions of "CS110:Lab08"

From IPRE Wiki
Jump to: navigation, search
(Assignment 07)
Line 1: Line 1:
='''Lab 07: Introduction to Graphics''' =
* Use various Myro commands to create and manipulate graphical objects
==To Do==
* Execute and modify the pieces of code introduced in this session
* Read Chapter 8 of your text
== Useful Links ==
[[Myro_Reference_Manual#Graphics_Objects_Interface| Myro Graphics Objects Interface]] <br>
[http://cs.brynmawr.edu/~dkumar/Myro/Text/June09/PDF/Chapter8.pdf| Chapter 8 of your Text]
== Creating a Graphics Window ==
You have probably used different computer programs such as ''Paint'' or ''GIMP'' to draw different shapes and edit images.
In this lab session you will be creating and manipulating various drawings.
The Myro module provides various commands you can use to draw objects, color them and
manipulate them in other ways. In order to draw anything you first need to create a window or canvas
to draw it on. You can create such a window using the following command:
myCanvas = GraphWin()
When you enter this command. A window similar to the one below should appear:
To close the window, use the following command:
By default, the size of the window is 200 pixels high and 200 pixels wide and its name is
“Graphics Window”. To change the size of the window and to rename it, you can execute the command below:
myCanvas = GraphWin(“My BigCanvas”, 300, 300)
The command above creates a window called “My BigCanvas” that is 300 pixels wide and 300 pixels tall.
You can change the background color of your graphics window to yellow as shown below:
Examples of colors you can use are: “red”, “blue”, “gray”, “yellow”, “AntiqueWhite”, “LavenderBlush”, “WhiteSmoke”.
There are several thousand color names to choose from. To see a list of these colors, Google: "color names list".
You can also create your own colors by specifying their red, green, and blue components.
Recall from previous labs and lectures that each color is made up of three values: '''RGB''' or red, green and blue color
values. Each of the these values can be in the range 0 to 255. For instance, the RGB values of pure red are: (255, 0, 0).
White is defined as (255,255, 255), black as (0, 0, 0) and pink as (255, 175, 175). There are as many as 256x256x256 colors
(i.e. over 16 million colors!). Given specific RGB values, you can create a new color by using the
command, color_rgb:
myColor = color_rgb(255, 175, 175)
== Drawing Objects on your Canvas ==
Once you've created a window, you can then draw a variety of geometrical objects (points, lines, circles, rectangle, and
even text and images) on your canvas. Before you draw an object, however, you must first ''create'' it.
Before you can do this, you should become familiar with the coordinate system of the graphics window.
In a graphics window with width, W=200 and height H=400 (i.e WxH pixels) the pixel
(0, 0) is at the top left corner and the pixel (199, 399) will be at the bottom
right corner. That is, x-coordinates increase as you go right and y-coordinates
increase as you go down. <br>
The simplest object that you can ''create'' is a point. This is done as follows:
p = Point(100, 50)
In the above command, p is an object that is a Point whose x-coordinate is at 100 and y-coordinate
is at 50. This command ''creates'' a Point object. In order to draw it on the canvas, you
have to enter the command:
In python, objects such as points, strings, lists etc. have standard operations that can be
performed on them. The general syntax for carrying out an operation on an object is: <br>
In the example above, <object> is the name p which was earlier
defined to be a Point object, <function> is draw, and <parameters> is
myCanvas. The draw function requires the graphics window as the parameter.
That is, you are asking the point represented by p to be drawn in the window
specified as its parameter. The Point objects have other useful functions.
For instance, you can use the following commands to get the  x- and y-coordinates
of the point:
>>> p.getX()
>>> p.getY()
Objects are created using their ''constructors'' like the Point(x, y) constructor above. You
will use lots of constructors in this section for creating other graphics objects. For instance,
you can create a line object in a similar manner. To create a line, you must specify the location the two end
points of the line. Therefore a line that starts from the point (0, 0) and ends at the point
(100, 200) can be created and drawn as follows:
L = Line(Point(0,0), Point(100,200))
The image below shows the canvas with the objects drawn so far.
You can then draw the line using the same draw command as above:
To get the values of a line’s end points, use the following commands:
>>> start = L.getP1()
>>> start.getX
>>> end = L.getP2()
>>> end.getY()
Here is a small Python loop that can be used to create and draw several lines:
for n in range(0, 200, 5):
In the loop above the value of n starts at 0 and increases by
5 after each iteration all the way up to but not including 200 (i.e. 195). For each value of
n a new Line object is created with starting co-ordinates (n,25) and end point at (100, 100).
'''Do This:''' Try out all the commands introduced in this lab. Then observe the
effects produced by the loop above. Change the increment 5 in the loop above
to different values (1, 3, etc.) and observe the effect. Next, try out the
following loop:
for n in range(0, 200, 3):
L = Line(Point(n, 100), Point(180, 180))
The ''undraw'' function, as the name implies, undraws a particular object. In the above for loop,
a line is created for each value of n, drawn, an after 0.3 seconds, erased.
Once again, you should modify different values in this loop, such as the increment or the wait time
to see the effect.
== Drawing Other Geometric Objects ==
You can draw several other geometrical shapes such as: circles, rectangles, ovals, and
polygons. Once again, in order to draw any of these shapes, you must first create it. For instance,
to draw a circle, you can issue the commands:
centerPoint = Point(100, 150)
radius = 30
C = Circle(centerPoint, radius)
centerPoint is a Point object and radius is specified in pixels. Thus, the circle C is
centered at (100, 150) and has a radius of 30. For details on how other shapes are drawn,
you can go to the link to ''Myro Graphics Objects Interface'' above. <br><br>
All the geometrical objects have several functions in common. For instance,
you can get the center point of a circle, (as well as a rectangle, or an oval) by
using the command:
centerPoint = C.getCenter()
By default, all objects are drawn in black (this may be white if you are using a Mac).
There are a number of ways to modify colors for objects. For each object you can specify a color for its
outline as well as a color to fill it with. For example, to draw a circle centered
at (100, 150), radius 30, and outline color red, and fill color yellow:
C = Circle(Point(100, 150), 30)
Note: setFill and setOutline have the same effect on Point and Line objects
(since there is no place to fill any color). Also, the line or the
outline drawn is always 1 pixel thick. You can change the thickness by using
the command setWidth(<pixels>). For example to change the width of the circle’s outline to 5 pixels:
== Drawing Random Circles ==
'''Do This:''' The program below draws several circles of random sizes with
random colors. Try it out! A sample output is shown below.
# File: randomCirles.py
# Description: Program to draw a bunch of random colored circles
from random import *
def makeCircle(x, y, r):
    # creates a Circle centered at point (x, y) of radius r
    return Circle(Point(x, y), r)
def makeColor():
    # creates a new color using random RGB values
    red = randrange(0, 256)
    green = randrange(0, 256)
    blue = randrange(0, 256)
    return color_rgb(red, green,blue)
def main():
    # Create and display a graphics window
    width = 300
    height = 300
    myCanvas = GraphWin(" Random Circles",width,height)
    # draw a bunch of random circles with random colors
    N = 200
    for i in range(N):
        # pick random center point and radius in the window
        x = randrange(0,width)
        y = randrange(0,height)
        r = randrange(5, 25)
        c = makeCircle(x, y, r)
        # select a random color
'''Do This:''' Modify the program to input (specify) the number of circles
to be drawn. Recall: randrange(m,n) returns a random number in range [m to n-1].
Modify the program to create other geometric shapes and draw them randomly.
== Animating Geometric Objects ==
You can move any geometric object you draw in the graphics window by using the command
'''move(dx, dy)'''. For example, to move the circle, C, 10 pixels to the right and 5
pixels down you can use the command (Note: C must have already been predefined):
C.move(10, 5)
'''Do This:''' Write a program that moves a circle about (randomly) in the
graphics window. First, enter this following program and try it out.
# Moving a circle
from random import *
def main():
    # create and draw the graphics window
    w = GraphWin("Moving Circle", 500, 500)
    # Create a red circle
    c = Circle(Point(250, 250), 50)
    # Do a simple animation for 200 steps
    for i in range(200):
        c.move(randrange(-4, 5), randrange(-4, 5))
'''Do This:''' Write a program to move different geometric objects around in
your graphics window.
==Drawing Text and Images==
You can also insert '''text''' into your graphics window just like you did with geometric shapes.
You will first have to create the text using the command:
myText = Text(<anchor point>, <string>)
and then draw it. You can specify the type face, size, and style of the text. See the Myro graphics reference
at the end of chapter 8 in your text or on the link provided above to get more details about the
different features of texts. <br>
'''Images''' can also be treated like the geometric objects you have been creating and drawing. You can create an
image using the Image command:
myPhoto = Image(<centerPoint>, <file name>)
You have to have an already prepared image in one of the common image
formats (like JPEG, GIF, etc.) and stored in a file (<file name>). Once the
image object is created, it can be drawn, undrawn, or moved just like other
shapes. <br>
You can use a combination of texts, images, and geometric objects to create
simple and more advanced graphical programs such as making plots, creating art,
developing video games or graphical user interfaces, or even an
animated story. What you do with this knowledge is only limited by your creativity.
= Assignment 07 =
'''*** Exercise 4 will be graded as a BONUS''' worth 4 points. Exercises 1-3 will be graded out of 9. <br>
'''***Original Assignment below'''<br>
'''Chapter 8, Exercises 1 - 4. ''' '''Note: ''' Exercise Four is a BONUS Part. These exercises are detailed below: <br>
'''Exercise 1: ''' Using the graphics commands learned in this session (and detailed in your text), write a
program to generate a seasonal drawing: winter, summer, beach, or a festival scene. <br>
'''Exercise 2: ''' Write a program that has a function drawRobot(x, y, w) such that it draws the
figure of a robot shown on the right (see your text for this image, pg. 212). The robot is anchored at (x, y) and is drawn in the window, w. Also notice that the robot is entirely made up of rectangles (8 of them). <br>
'''Exercise 3: ''' Using the drawRobot function from the previous exercise, draw a pyramid of robot as shown on the right
(see your text for this image, pg. 212).
'''Exercise 4: ''' Suppose that each robot from the previous exercise is colored using one of
the colors: red, blue, green, and yellow. Each time a robot is drawn, it uses the
next color in the sequence. Once the sequence is exhausted, it recycles. Write
a program to draw the above pyramid so robots appear in these colors as they
are drawn. You may decide to modify drawRobot to have an additional
parameter: drawRobot(x, y, c, w) or you can write it so that drawRobot
decides which color it chooses. Complete both versions and compare the
resulting programs. Discuss the merits and/or pitfalls of these versions with
friends. [Hint: Use a list of color names.] Note: You only need to ensure that each robot on the same level of the pyramid has the same color. <br>
= Links =
* Back to [http://wiki.roboteducation.org/CS110_Lab Lab Home Page]
* Back to [http://cs.brynmawr.edu/Courses/cs110/fall2009/ Course Home Page]

Revision as of 16:11, 15 March 2010