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

Topics for today Java Graphics!

Java Graphics

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.

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

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?

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

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

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

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

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

The Collage Model

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

Making This Circle

Making This Circle

Making This Circle 100 pixels

Making This Circle 100 pixels Where is this point?

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

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

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

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

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

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

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

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

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

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

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

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

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. http://cs.stanford.edu/people/eroberts/jtf/javadoc/student/

Extra slides

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)

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, 210 - i*10, 230));