Day 7: “ Graphics & Even Driven Programs “

By: Mahmoud El-Khateeb

 The acm.graphics Model

• Newer objects can obscure those added earlier.

• Layering is called the stacking order (or z-order).
Structure of the acm.graphics Package

GCanvas GPoint GDimension GRectangle GMath

GCompound GObject

GLabel GRect GOval GLine GArc GImage GPolygon

Interfaces:
GFillable
GResizable
GRoundRect G3DRect GScalable
GContainer
 GCanvas

• Used to represent background canvas of collage.

• GraphicsProgram automatically creates GCanvas

that fills the entire program window.

• When you call add(..) in GraphicsProgram it’s

forwarding your call to the Gcanvas
 Methods in the GCanvas Class
The following
methods are available in both the GCanvas and
GraphicsProgram classes:

add(object) Adds the object to the canvas at the front of the stack
add(object, x, y) Moves the object to (x, y) and then adds it to the canvas
remove(object) Removes the object from the canvas
removeAll() Removes all objects from the canvas
getElementAt(x, y) Returns the frontmost object at (x, y), or null if none
getWidth() Returns the width in pixels of the entire canvas
getHeight() Returns the height in pixels of the entire canvas
setBackground(c) Sets the background color of the canvas to c.

The following methods are available in GraphicsProgram only:

pause(milliseconds) Pauses the program for the specified time in milliseconds
waitForClick() Suspends the program until the user clicks the mouse
 class hierarchy of GObject

GCompound GObject

GLabel GRect GOval GLine GArc GImage GPolygon

GRoundRect G3DRect
Methods Common to All GObjects
setLocation(x, y) Resets the location of the object to the specified point
move(dx, dy) Moves the object dx and dy pixels from its current position
getX() Returns the x coordinate of the object
getY() Returns the y coordinate of the object
getWidth() Returns the horizontal width of the object in pixels
getHeight() Returns the vertical height of the object in pixels
contains(x, y) Returns true if the object contains the specified point
setColor(c) Sets the color of the object to the Color c
getColor() Returns the color currently assigned to the object
setVisible( flag) Sets the visibility flag (false = invisible, true = visible)
isVisible() Returns true if the object is visible
sendToFront() Sends the object to the front of the stacking order
sendToBack() Sends the object to the back of the stacking order
sendForward() Sends the object forward one position in the stacking order
sendBackward() Sends the object backward one position in the stacking order
 Methods Defined by Interfaces
• Why Interfaces ?
GFillable (GArc, GOval, GPolygon, GRect)
setFilled( flag) Sets the fill state for the object (false = outlined, true = filled)
isFilled() Returns the fill state for the object
setFillColor(c) Sets the color used to fill the interior of the object to c
getFillColor() Returns the fill color

GResizable (GImage, GOval, GRect)

setSize(width, height) Sets the dimensions of the object as specified
setBounds(x, y, width, height) Sets the location and dimensions together

GScalable (GArc, GCompound, GLine, GImage, GOval, GPolygon, GRect)

scale(sf ) Scales both dimensions of the object by sf
scale(sx, sy) Scales the object by sx horizontally and sy vertically
 A little Animation demo:
BouncingBall.java
 The Geometry of the GLabel Class
• The GLabel class relies on a set of geometrical concepts that are
derived from classical typesetting:
– baseline : imaginary line on which the characters rest.
– origin : point on the baseline at which the label begins.
– height (of font ) : distance between successive baselines.
– ascent : distance characters rise above the baseline.
– descent : distance characters drop below the baseline.

QuickBrownFox

origin
The quick brown fox jumps ascent

height baseline
over the lazy dog. descent
 The GArc Class
• The GArc class represents an arc formed by taking a section from the perimeter
of an oval.

• Conceptually, the steps necessary to define an arc are:

– Specify the coordinates and size of the bounding rectangle.
– Specify the start angle, which is the angle at which the arc begins.
– Specify the sweep angle, which indicates how far the arc extends.

• Angles are measured in degrees starting

at the +x axis (the 3:00 o’clock
position) and increasing
counterclockwise.

• Negative values for the start and sweep

angles signify a clockwise direction.
 Exercise: GArc Geometry
Assume : cx and cy are coordinates of the center of the window
d (diameter) is 0.8 times the screen height.

GArc a1 = new GArc(d, d, 0, 90); GArc a2 = new GArc(d, d, 45, 270);

add(a1, cx - d / 2, cy - d / 2); add(a2, cx - d / 2, cy - d / 2);
GArcExamples GArcExamples

GArc a3 = new GArc(d, d, -90, 45); GArc a4 = new GArc(d, d, 0, -180);

add(a3, cx - d / 2, cy - d / 2); add(a4, cx - d / 2, cy - d / 2);
GArcExamples GArcExamples
 Filled Arcs
• The GArc class implements the GFillable interface, which means that you
can call setFilled on a GArc object.

• A filled GArc is displayed as the pie-shaped wedge formed by the center

and the endpoints of the arc, as illustrated below:

public void run() {

GArc arc = new GArc(0, 0, getWidth(), getHeight(),
0, 90);
arc.setFilled(true);
add(arc);
}

FilledEllipticalArc
Structure of the acm.graphics Package

GCompound GObject

GLabel GRect GOval GLine GArc GImage GPolygon

 The GImage Class
• The GImage class is used to display an image from a file.

new GImage(image file, x, y)

image file : name of a file containing image.

x and y are the coordinates of the upper left corner of the image.

• Looks for the file in the current project directory and then in a
subdirectory named images.

• GIF (.gif ) and JPEG (.jpg or .jpeg ) supported.

 Example of the GImage Class
public void run(){
GImage background = new GImage("BibAlex.jpg");
add(background ,0,0);
}
 Resizing GImage
public void run(){
GImage background = new GImage("BibAlex.jpg");
background.scale(1.5, .5);
add(background ,0,0);
}
 The GPolygon Class
• GPolygon : represent graphical objects bound by line
segments.

diamond regular hexagon

• A Gpolygon has a reference point that is convenient for that

particular shape.

• The most convenient reference point is often the geometric

center of the object.
 Constructing a GPolygon Object
• The GPolygon constructor creates an empty polygon.

• Add vertecies one at a time using addVertex(x, y)

- x and y relative to reference point of polygon

• After setting initial vertex using addVertex(x, y), can add

the remaining ones using:
– addVertex(x, y)adds a new vertex relative to the
reference point
– addEdge(dx, dy) adds a new vertex relative to the
preceding one
• Polygon “closed” for you
Automatically attaches first and last vertices.
Drawing a Diamond (addVertex)
The following program draws a diamond using addVertex:

public void run() {

GPolygon diamond = createDiamond(100, 75);
private GPolygon createDiamond(double width, double height) {
diamond.setFilled(true);
GPolygon diamond = new GPolygon();
diamond.setFillColor(Color.MAGENTA); diamond
diamond.addVertex(-width / 2, 0);
add(diamond, getWidth() / 2, getHeight() / 2);
diamond.addVertex(0, -height / 2); diamond
}
diamond.addVertex(width / 2, 0);
diamond.addVertex(0, height / 2);
return diamond;
}

DrawDiamond

skip simulation
 Drawing a Diamond (addEdge)
This program draws the same diamond using addEdge:

public void run() {

GPolygon diamond = createDiamond(100, 75);
private GPolygon createDiamond(double width, double height) {
diamond.setFilled(true);
GPolygon diamond = new GPolygon();
diamond.setFillColor(Color.MAGENTA); diamond
diamond.addVertex(-width / 2, 0);
add(diamond, getWidth() / 2, getHeight() / 2);
} diamond.addEdge(width / 2, -height / 2); diamond
diamond.addEdge(width / 2, height / 2);
diamond.addEdge(-width / 2, height / 2);
diamond.addEdge(-width / 2, -height / 2);
return diamond;
}

DrawDiamond

skip simulation
 The GCompound class
• The GCompound allows for combining several graphical
objects so they behaves like one GObject.

• Add objects to GCompound ( like it was a GCanvas )

• You can treat Gcompound as one object.

• Similare to GPolygon , GCompound has a reference point

that all objects added respond to
• When GCompound is added to canvas, it’s placed
relative to its referece point.
Let’s draw a face :)
.
Breaaaaaak :)
 Event-driven Program
• When users interact with computer they generate
events (e.g. moving/clicking the mouse. typing. etc)

• Can respond to events by having listeners for events.

– addMouseListeners()
– addKeyListeners()

• Use Java library that deals with events

import java.awt.event.*;

• Because events are not controlled by the program, they

are said to be asynchronous
ClickForFace Example
 Responding to Mouse Events

• General steps:

1. init or run method should call addMouseListeners

2. Write definitions of any listener methods you need.

mouseClicked( e) Called when the user clicks the mouse

mousePressed( e) Called when the mouse button is pressed
mouseReleased(e) Called when the mouse button is released
mouseMoved(e) Called when the user moves the mouse
mouseDragged(e) Called when the mouse is dragged with the button down

The parameter e is a MouseEvent object, which provides

more data about the event, such as the location of the mouse.
MouseTracker Example
 Responding to Keyboard Events

• General steps:

1. init or run method should call addKeyListeners

2. Write definitions of any listener methods you need.
• The most common key events are:
keyPressed( e) Called when the user presses a key
keyReleased( e) Called when the key comes back up
keyTyped(e) Called when the user types (presses and releases) a key

In these methods, e is a KeyEvent object, which indicates

which key is involved
DragObjects Example
UfoGame Example