Mini-Lab: Drawing Pictures

Introduction

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 jes4py.

Creating an empty picture

Start up Visual Code and create a project subdirectory for this minilab. Import the jes4py and time library, and set up your main function. Inside main, add the makeEmptyPicture function. 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 show the empty picture to see it. Fortunately, the makeEmptyPicture function returns the empty picture it has created; capture this in a variable and then pass it to the openPictureTool function.

Experiment with making several different empty pictures of different dimensions.
You can pass a third parameter to makeEmptyPicture to specify a background color. The colors that jes4py knows about are black, white, red, orange, yellow, green, blue, pink, magenta, cyan, gray, lightGray, and 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?

Locations in a picture

Jes4py 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. If 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?

Drawing on a blank canvas

Next you will be using the following drawing functions provided by jes4py library to create an interesting picture:

addLine(picture, x1, y1, x2, y2, color)
addRect(picture, x, y, w, h, color)
addRectFilled(picture, x, y, w, h, color)
addText(picture, x, y, string, color)
addOval(picture, x1, y1, w, h, color)
addOvalFilled(picture, x1, y1, w, h, color)
addArc(picture, x, y, w, h, startAngle, arcAngle, color)
addArcFilled(picture, x, y, w, h, startAngle, arcAngle, color)

Define a new function above main that takes three parameters: a width, a height, and a color. Your function should make an empty picture with the specified dimensions and color.
Use the addLine function to draw a line in your picture. The addLine function 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.
Add a return statement at the end of your function to return your picture. To test your function, declare a variable in main which captures the returned picture. Call the openPictureTool function by passing this picture to it. Additionally, add a print statement to print the picture object. to run it, show the picture from the main function, and then call openPictureTool on 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 openPictureTool function!
Use the addRect function to draw an outline of a box (an unfilled rectangle) in your picture. The addRect function also takes 6 parameters, but only the first and the last have the same meaning as in the addLine function. 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.
Challenge Suggestion: If you want a little more challenge, figure out how to center your box in the picture. What should the coordinates of the upper-left corner of the box be?
Load and test your function. If your rectangle isn't where you thought it would be, go back and change the arguments in your call to addRect.
Debugging Tip: If your rectangle didn't show up on your picture, make sure that the statement to draw the rectangle is before the return statement in your function.
Use the addRectFilled function to draw a filled box in your picture. The parameters passed to addRectFilled are the same as those passed to addRect, except that addRectFilled fills the rectangle with the specified color. Test your function.
Challenge Suggestion: Make your filled box smaller than the box outline, and nest it in the center of the outline.
Use the addText function 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)?
Be creative. Add new statements that use the drawing functions to create an interesting picture. You may choose to keep or delete the statements we added to the function in exercises 2-7, but be sure to KEEP the return statement!
Make sure that you remembered to write comments at the top with a description of the file, your name, and the date.
When you are done, submit your discussion and .py file via Kit. (If you have time to do the extra exercise below, delay submitting your file until you have completed both.)

If you have time: Drawing on existing pictures

Write another function that takes a picture object as its single parameter. Draw the same picture as above, or another one, on the picture passed in a parameter. If you want to know the width or height of the picture, to determine where you should place drawing elements, you can use two more jes4py functions that we haven't seen yet: getWidth(picture) and 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.
Test your new function by passing it a blank canvas. Then test it by passing in an existing picture obtained by calling pickAFile and makePicture! (Alternatively, you can use the pickAndShow function if you copy and paste it from pickAndShow.py into 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.