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

Creating an empty picture

1. Start up JES. In the command area, call 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 show function.
    
   Experiment with making several different empty pictures of different dimensions.
    
2. You can pass a third parameter to makeEmptyPicture to specify a background color. The colors that JES 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

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 (1, 1) 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) is the pixel in the top right corner, and location (1, h) 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 drawing functions provided by JES:

• 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)

1. In the command area, make an empty picture. Choose dimensions and a light background color that are appropriate for a blank canvas on which to draw.
    
2. 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.

   Debugging Tip: Remember that you must show the picture again to see your new line!

3. 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?
    
4. 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.
   Challenge Suggestion: Make your filled box smaller than the box outline, and nest it in the center of the outline.
    
5. 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.

   Analysis Questions: What happens if you add the text "This is silly" to your picture at location (1, 1)? At location (1, 20)? At location (1, w), where w is the width of your picture? At location (1, w - 40)?

Writing a function to draw a picture

1. In the program area of JES, write a function that takes three parameters: a width, a height, and a color. Your function should make an empty canvas of the specified dimensions and color, and then draw a picture of your own design in it. It should not include a call to show, but it should include a return statement that returns the new picture. To test your function, Load it, call it from the command area, and then call show on the picture it returns.
   Challenge Suggestion: Use the width and height parameters to determine the size and location of your drawing rather than hard-coding constant values as your x and y coordinates or sizes and lengths.

   Programming Tip: First write your function to just make an empty canvas, then call your function and show the resulting picture. Once this works, go on to add your drawing elements. Again, you may wish to add one or two elements and then test it before going further.

   Shortcut: Remember that you can use the up arrow in the command area to go back to the previous command and then hit enter to run that command.

2. Make sure that you remembered to write comments at the top with a description of the file, your name, and the date.
    
3. When you are done, print your file and hand it in. (If you have time to do the extra exercise below, delay printing your file until you have completed both.)

If you have time: Drawing on existing pictures

1. 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 JES 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.
    
2. 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.