In previous mini-labs, you have created picture objects from existing JPEG picture files. In this mini-lab you will learn how to create an empty picture to use as a blank canvas, and how to draw on it using functions provided in JES.
makeEmptyPicturefunction. This function takes two parameters, the width and height of the picture to create, in pixels. For example,
makeEmptyPicture(20, 40)would make a very small empty picture, while
makeEmptyPicture(600, 400)would make a much larger one. When you call the function, though, you will not see anything happen. You will need to
showthe empty picture to see it. Fortunately, the
makeEmptyPicturefunction returns the empty picture it has created; capture this in a variable and then pass it to the
makeEmptyPictureto specify a background color. The colors that JES knows about are
darkGray. Experiment with making several different empty pictures with different background colors.
Analysis Questions: What color is an empty picture if you don't provide a third parameter? What happens if you provide only one parameter? If you provide more than three parameters? If you provide the parameters in a different order?
JES provides several functions that you can use to add text, lines,
rectangles, and ovals to a picture. When you add a new drawing element
to a picture, you need to specify where to add it. The location
is the number of pixels over from the left edge and the
number of pixels down from the top.
Location (0, 0) is the pixel in the top left corner.
w is the
width of your picture and
h is its height, then
location (w - 1, 0) is the
pixel in the top right corner, and location (0, h - 1) is the pixel in the
bottom left corner.
The two numbers that make up a pixel's location are called its x and y coordinates, but note that, unlike in mathematical graphs, the y coordinates start at the top and grow as they go down, not as they go up.
Analysis Questions: What is the location of the pixel in the bottom right corner? What is the location of the pixel in the center of the picture?
Next you will be using the following drawing functions provided by JES to create an interesting picture:
addLinefunction to draw a line in your picture. The
addLinefunction takes 6 parameters: the picture in which you want to draw, the x and y coordinates of one endpoint, the x and y coordinates of the other endpoint, and the color you want the line.
showon the picture it returns.
Debugging Tip: Remember that you must capture the picture that gets returned from your function in a variable so you can use it in the
addRectfunction to draw an outline of a box (an unfilled rectangle) in your picture. The
addRectfunction also takes 6 parameters, but only the first and the last have the same meaning as in the
addLinefunction. The second and third parameters represent the x and y coordinates of the upper-left corner of the box, while the fourth and fifth parameters represent the box's width and height.
Debugging Tip: If your rectangle didn't show up on your picture, make sure that the statement to draw the rectangle is before the
returnstatement in your function.
addRectFilledfunction to draw a filled box in your picture. The parameters passed to
addRectFilledare the same as those passed to
addRect, except that
addRectFilledfills the rectangle with the specified color. Test your function.
addTextfunction to add a string (such as your name) to your picture. In this case, the x and y coordinates represent the left edge of an invisible baseline for the text string, similar to the line on a sheet of lined paper. Test your function.
Analysis Questions: What happens if you add the text "This is silly" to your picture at location (0, 0)? At location (1, 20)? At location (w - 1, 0), where w is the width of your picture? At location (0, w - 40)?
getHeight(picture). You may wish to pass the same picture in every time you test it, or you may wish to pass in a blank canvas each time.
makePicture! (Alternatively, you can use the
pickAndShowfunction if you copy and paste it from
pickAndShow.pyinto your new file.) Finally, if the drawing created in this function is different from the drawing created in the previous exercise, try drawing one picture on top of the other.