Draw Some Food

10 points

Click here to see the food that Java students have created in previous years.

Introduction

This program introduces you to adding graphics and text to your programs with BreezyGUI, which makes doing graphics and graphical user interfaces (GUIs) in Java easier. Once you master BreezyGUI, if you choose to you can learn how to create graphics and GUIs in pure Java.

The coordinate system for graphics is a bit like the fourth quadrant (lower right-hand quadrant) in the Cartesian coordinate system that you use in math class. The one difference is that here the y-coordinates are positive.

Various commands are available for drawing graphics. Most of these commands have 2 versions, one beginning with 'draw' and the other with 'fill'. If a command begins with 'draw' only the outline of the shape is drawn; if it begins with 'fill' the interior is also filled with color. Here is a summary:

Examples
I will use the drawing I did to illustrate how to create graphics using BreezyGUI:

Butter
I used 'fillRect' twice after a call to 'setColor':
     g.setColor(Color.yellow);
     g.fillRect(320,300,20,20);
     g.fillRect(420,290,20,20);

Note: 'fillRect' requires 4 numbers:

1. the x-coordinate of the upper left-hand corner of the rectangle
2. the y-coordinate of that point
3. the width of the rectangle
4. the height of the rectangle

Orange juice
I set the color to orange, called 'fillRect' to draw the orange juice in the glass, and called 'fillOval' twice to draw the oval at the bottom of the glass and at the top of the glass:
     g.setColor(Color.orange);
     g.fillRect(500,110, 50, 90);
     g.fillOval(500,180, 50, 30);
     g.fillOval(500,98, 50, 20);

Note:'fillOval' draws an oval inside a rectangle, and it requires 4 numbers:

1. the x-coordinate of the upper left hand corner of the rectangle that the oval fills
2. the y-coordinate of that point
3. the width of the rectangle
4. the height of the rectangle

I then set the color to dark gray, called 'drawOval' to draw the oval outline at the top of the glass, called 'drawArc' to draw the oval outline at the bottom of the glass, and called 'drawLine' twice to draw the sides of the glass:
     g.setColor(Color.darkGray);
     g.drawOval(500,60,50,30);
     g.drawArc(500,180, 50, 30, 180, 180);
     g.drawLine(500, 74, 500, 195);
     g.drawLine(550, 74, 550, 195);

Note: 'drawArc' draws an arc (a piece of an oval). It requires 6 numbers:

1. the x-coordinate of the upper left-hand corner of the rectangle in which the arc is drawn
2. the y-coordinate of that point
3. the width of the rectangle
4. the height of the rectangle
5. the angle at which the arc begins (where 3 o'clock is 0 degrees, 12 o'clock is 90 degrees, etc.)
6. the number of degrees in the arc

Note: 'drawLine' draws a line and requires 4 numbers:

1. the x-coordinate of the starting point
2. the y-coordinate of that point
3. the x-coordinate of the ending point
4. the y-coordinate of that point

Text
To draw text, you first need to choose a Color and Font. Here is my code to write 'Bon Appetit!':

     Font ourFont = new Font ("Courier", Font.BOLD, 20);
     Color ourColor = Color.magenta;
     g.setColor (ourColor);
     g.setFont (ourFont);
     g.drawString("Bon Appetit!",75,100);

Toast
The drawing commands generally draw objects either straight up-and-down or straight left-right. To get objects to have some tilt, you have to work a little harder. You can use 'drawPolygon' or 'fillPolygon' to draw an object that is at an angle. Here is some of my code for drawing a piece of toast:

     int x[] = {300, 380, 360, 290};
     int y[] = {270, 290, 350, 330};
     g.fillPolygon(x, y, 4);

Note: The first line above creates an 'array' (a list) of x-coordinate values, the x-coordinates for the 4 vertices of the 'toast' polygon. The second creates a similar array of y-coordinate values. The third line causes the polygon to draw, using those x- and y-coordinates, and the '4' indicates that the polygon has 4 sides.

Bacon
The bacon could similarly be drawn by using the 'fillPolygon' method.

Colors
In BreezyGUI 11 colors are built-in. You use them as I used them above to set the color to orange or dark gray. Here are the built-in colors:

• yellow
• blue
• orange
• pink
• cyan
• magenta
• black
• white
• gray
• lightGray
• darkGray

It is also possible to design your own colors. To create a color, you choose values for Red, Green and Blue between 0 and 255. Here is how you would set the color to white:
     Color white = new Color(255, 255, 255);
     g.setColor(white);
To create an olive color, turn off Blue and set Red and Green to 155:
     Color olive = new Color(150, 150, 0);
     g.setColor(olive);

paint()
You can put your graphics commands into the 'paint()' method. The 'paint()' method runs whenever the window is drawn.

Assignment

Draw breakfast, lunch or dinner. Draw a plate and at least 4 different foods. Try different graphics commands and different colors. Don't just copy what I did. Finally, add some text to your drawing, using a different Color and Font than I used.

If you have another idea to draw instead of food, talk to me about it.

Starting Point

You can download DrawFood.java to use as a starting point in writing your program. This program should run without any work, though the drawing it produces is very simple.

Below is a screenshot that shows this program running on repl.it: