1. SSEA Computer Science: Track A
Dr. Cynthia Lee
Lecturer in Computer Science
Stanford

2. Topics for today
Java Graphics!

3. Java Graphics

4. Working with Graphics Mention what those parameters mean later on.
We will manipulate graphics on-screen by creating graphics objects and manipulating their properties.
To create a graphics object, we need to
declare a variable to hold that object, and
actually create the object using the new keyword.
For example:
GLabel label = new GLabel("Hi!", 0, 0);
Mention what those parameters mean later on.

5. Sending Messages (calling methods)
You can manipulate graphics objects by calling methods on those objects.
To call a method on an object, use the syntax
object.method(parameters)
For example:
label.setFont("Comic Sans-32");
label.setColor(Color.ORANGE);

6. Sending Messages (calling methods)
You can manipulate graphics objects by calling methods on those objects.
To call a method on an object, use the syntax
object.method(parameters)
For example:
label.setFont("Comic Sans-32");
label.setColor(Color.ORANGE);
What specifically?
Who?
What?

7. Graphics Coordinates hello, world
Graphics objects are positioned by specifying an x and y coordinate
x increases left-to-right, y increases top-to-bottom
x and y should be specified in pixels
For a GLabel, the x and y coordinates give the start of the baseline where the text is drawn +x
HelloProgram
Explain the history of the coordinate system.
hello, world
(0, 0)
getWidth() +y
getHeight()
Graphic courtesy of Eric Roberts 7

8. Drawing Geometrical Objects
Creating graphics objects
new GRect( x, y, width, height)
Creates a rectangle whose upper left corner is at (x, y) of the specified size +x
Graphics Program
(x, y)
(x + width, y + height) +y
Graphic courtesy of Eric Roberts 8

9. Drawing Geometrical Objects
Creating graphics objects
new GRect( x, y, width, height)
Creates a rectangle whose upper left corner is at (x, y) of the specified size
new GOval( x, y, width, height)
Creates an oval that fits inside the rectangle with the same dimensions. +x
Graphics Program
(x, y)
(x + width, y + height) +y
Graphic courtesy of Eric Roberts 9

10. Drawing Geometrical Objects
Creating graphics objects
new GRect( x, y, width, height)
Creates a rectangle whose upper left corner is at (x, y) of the specified size
new GOval( x, y, width, height)
Creates an oval that fits inside the rectangle with the same dimensions.
new GLine( x0, y0, x1, y1)
Creates a line extending from (x0, y0) to (x1, y1). +x
Graphics Program
(x0, y0)
(x1, y1) +y
Graphic courtesy of Eric Roberts 10

11. Drawing Geometrical Objects
Creating graphics objects
new GRect( x, y, width, height)
Creates a rectangle whose upper left corner is at (x, y) of the specified size
new GOval( x, y, width, height)
Creates an oval that fits inside the rectangle with the same dimensions.
new GLine( x0, y0, x1, y1)
Creates a line extending from (x0, y0) to (x1, y1).
Methods shared by GRect and GOval
object.setFilled( fill)
Go and run BeautifulCollage to show off these different methods. Start off with unfilled objects and show what setFilled and setFillColor do. In particular, show how calling setColor and then setFilled will fill the whole object with one color, whereas setColor and setFillColor will change the perimeter and inside.
Don't overlap the objects yet.
If fill is true, fills in the interior of the object; if false, shows only the outline.
object.setFillColor( color)
Sets the color used to fill the interior, which can be different from the border.
Graphic courtesy of Eric Roberts 11

12. The Collage Model

13. Size of the Graphics Window
Methods provided by GraphicsProgram
getWidth()
Returns the width of the graphics window itself.
getHeight()
Returns the height of the graphics window itself.
Like println, readInt, and readDouble, you don't need to prefix these methods with the object. notation.
Go to HugeEllipse and show it off.
Based on slides by Eric Roberts 13

14. Making This Circle

15. Making This Circle

16. Making This Circle
100 pixels

17. Making This Circle
100 pixels
Where is this point?

18. Making This Circle
getWidth() pixels
100 pixels
Where is this point?

19. Making This Circle double x = getWidth() - 100; getWidth() pixels
Where is this point?

20. Making This Circle
double x = getWidth() - 100;
100 pixels

21. Making This Circle double x = getWidth() - 100; getHeight() pixels

22. Making This Circle double x = getWidth() - 100;
double y = getHeight() - 100;
getHeight() pixels
100 pixels

23. Making This Circle double x = getWidth() - 100;
double y = getHeight() - 100;
100 pixels

24. Making This Circle double x = getWidth() - 100;
double y = getHeight() - 100;
GOval circle = new GOval(x, y, 100, 100);
100 pixels

25. Making This Circle double x = getWidth() - 100;
double y = getHeight() - 100;
GOval circle = new GOval(x, y, 100, 100);

26. Making This Circle double x = getWidth() - 100;
double y = getHeight() - 100;
GOval circle = new GOval(x, y, 100, 100);
circle.setFilled(true);
circle.setColor(Color.BLUE);

27. Making This Circle double x = getWidth() - 100;
double y = getHeight() - 100;
GOval circle = new GOval(x, y, 100, 100);
circle.setFilled(true);
circle.setColor(Color.BLUE);
add(circle);
Go and run FeelingCornered

28. Colors BLACK BLUE CYAN DARK_GRAY GRAY GREEN LIGHT_GRAY MAGENTA ORANGE
Specified as predefined Color constants:
Color.NAME , where NAME is one of:
r.setColor(Color.MAGENTA);
Or create one using Red-Green-Blue (RGB) values of 0-255
new Color(red_amount, green_amount, blue_amount)
Example:
r.setColor(new Color(192, 128, 64));
BLACK
BLUE
CYAN
DARK_GRAY
GRAY
GREEN
LIGHT_GRAY
MAGENTA
ORANGE
RED
WHITE
YELLOW
PINK

29. GraphicsProgram methods
The GraphicsProgram contains these useful methods:
public class Hello extends GraphicsProgram {
public void run() {
setTitle("My cool program");
add(new GRect(getWidth() - 50, 10, getWidth(), 40);
...
Method
Description
add(shape);
displays the given graphical shape in the window
getHeight()
the height of the graphical window, in pixels
getWidth()
the width of the graphical window, in pixels
pause(ms);
halts for the given # of milliseconds
remove(shape);
removes the given shape from the window
setSize(w, h);
sets the console window's onscreen size
setTitle("text");
sets the title bar text

30. Learning more Google "Stanford Java Lib" (or go toURL below).
This site lists every kind of object in the Stanford libraries.
Click an object type on the left and see its behavior on the right.
These kinds of pages exist for Stanford libraries and standard Java.

31. Extra slides

32. Graphics exercise
Write a program that draws a series of lines as follows:
Outer square is at (10, 30) and size 200x200
each line is 10px apart in each dimension
coordinates of top-left lines:
(210, 30) to (10, 30)
(200, 30) to (10, 40)
(190, 30) to (10, 50)
...
(20, 30) to (10, 220)
coordinates of bottom-right lines:
(210, 30) to (210, 230)
(210, 40) to (200, 230)
(210, 220) to (20, 230)

33. Exercise solution import acm.graphics.*; import acm.program.*;
public class Football extends GraphicsProgram {
public void run() {
add(new GRect(10, 30, 200, 200));
// top-left lines
for (int i = 0; i < 20; i++) {
add(new GLine(210 - i*10, 30, 10, 30 + i*10)); }
// bottom-right lines
add(new GLine(210, 30 + i*10, i*10, 230));