1. Lecture 10 Graphics
D&D 3.14, 4:10, 5.13, 6.15, 8.16,
Date

2. Goals By the end of this lesson, you should
Be able to draw geometric shapes on the user interface using Java AWT and Swing
Create a time-based animation of a geometric shape by capturing a timer event
Practice some OO techniques in creating this program

3. Animated stick figure Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
height: int
x: int headDiameter: int
neck: Point
head: Point
hip: Point
leftHand: Point
rightHand: Point
leftKnee: Point
rightKnee: Point
leftFoot: Point
rightFoot: Point
direction: int
leftKneeAngle: double
rightKneeAngle: double
angleChange: double
actionPerformed(ActionEvent e):

4. Java libraries Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
There are two main java libraries we use for the graphics:
Swing GUI controls
import javax.swing.JFrame;
JFrame is the GUI control that is used to paint the graphics onto
and
AWT (Abstract Window Toolkit)
import java.awt.Graphics;
awt is a library of:
Graphics elements (lines, ovals, polygons etc) that you can set colour, fill, …
Color – easy access to colours (note American spelling of library name!)
Point – a little helper class that holds and x,y coordinates of points
Quite a few more…

5. GraphicsTest (1) Class Diagram Java Swing and AWT Graphics Test
import java.util.ArrayList;
import javax.swing.JFrame;
public class GraphicsTest {
public static void main(String[] args) {
ArrayList<StickFigure> figures = new ArrayList<>();
StickFigure f1 = new StickFigure(200, 100);
figures.add(f1);
StickFigure f2 = new StickFigure(300, 150);
figures.add(f2); …. }
This class main() declares and instantiates a couple of (our) stick figures and adds them to an ArrayList
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary

6. GraphicsTest (2) Class Diagram Java Swing and AWT Graphics Test…
public class GraphicsTest {
public static void main(String[] args) {
………
JFrame application = new JFrame("My Stick Figures");
application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE);
DrawingPanel p = new DrawingPanel(figures);
application.add(p);
application.setSize(1000, 1000);
application.setVisible(true); }
Then it
declares a JFrame (effectively a window)
declares a and instantiates (our) drawing panel, passing a ref to the stickfigures – see following slide on the drawing panel
Adds the drawing panel to the JFrame and makes it visible
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary

7. DrawingPanel (1) Class Diagram Java Swing and AWT Graphics Test….
import javax.swing.JPanel; // painting panel
import javax.swing.Timer; // timer
import java.awt.event.ActionListener; // timer event
public class DrawingPanel extends JPanel implements ActionListener {
Timer timer;
private ArrayList<StickFigure> figures;
// Constructor sets up timer and reference to the figures
public DrawingPanel(ArrayList<StickFigure> figures){
timer = new Timer(10, this); // 10 ms inter-event delay
timer.start();
this.figures = figures; }
…….
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
Our DrawingPanel
Extends the Java class JPanel – with all the functionally it provides
Implements ActionListener – which ‘listens’ for the timer event
Has a constructor that
Sets up a reference to the ArrayList of figures
Sets up a Timer that will trigger an event every 10 milliseconds

8. Java Swing Timers Class Diagram Java Swing and AWT Graphics Test
timer = new Timer(10, someObject);
timer.start();
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
The code above sets up a Java Swing Timer.
A timer fires an event at regular times.
The first parameter of the constructor is the time (in milliseconds, i.e., 1/1000th of a second) between events.
The second parameter is an object reference to the object that will process the event. This object can be of any class that implements the ActionListener interface.
The ActionListener interface requires any classes implementing it to implement a method that will be called when the event fires:
void actionPerformed(ActionEvent e);
We will shortly see an example of how this is implemented in DrawingPanel.

9. DrawingPanel(2) Class Diagram Java Swing and AWT Graphics Test
import java.awt.Graphics; ….
// This method paints everything in the graphics object g
// and then moves the figures ready for the next paint
@Override
public void paintComponent(Graphics g){
super.paintComponent(g);
for(StickFigure f: figures){
f.paint(g);
//f.move();
f.walk(); }
// This method is executed when the Timer goes off // - every 10 msec
public void actionPerformed(ActionEvent arg0) {
repaint(); // calls paintComponent()
// (default behaviour for JPanel)
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
paintComponent() overrides the JPanel paintComponent().
It first calls the base class method so that the window is rendered correctly.
It then call the paint() method for each figure, followed by the move() or walk() method to move/walk the respective figure.

10. DrawingPanel(3) So what’s happening here? Quite a complex sequence!
The Timer interval expires
The Timer fires event (creates ActionEvent object and passes it to the actionPerformed() method of the ActionListener object configured).
In our case, the ActionListener object is our DrawingPanel.
The actionPerformed() method of the DrawingPanel then calls the repaint() method of the DrawingPanel. The DrawingPanel inherits this method from JPanel.
This method, if not overridden, calls the paintComponent() method of the JPanel class by default.
Here, our DrawingPanel overrides the paintComponent()method of JPanel with its own version.
This own version first calls the inherited version of the superclass.
It then iterates over the stick figures and calls their respective paint()methods.
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary

11. DrawingPanel(4)
//DrawingPanel
import java.awt.event.ActionListener; ….
// This method gets executed when the timer goes off // - every 10msec
@Override
public void actionPerformed(ActionEvent arg0) {
repaint(); // calls paintComponent() // (default behaviour for JPanel) }
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
This method gets called in response to the timer going off – the Timer calls it. Note we don’t use the parameter given (the ActionEvent object). It’s just there because the ActionListener interface requires it.
The method calls the JPanel repaint() method, which in turn calls the paintComponent() method.
The result is the figures get redrawn in the new position.

12. StickFigure (1) Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
// StickFigure.java
import java.awt.Graphics;
import java.awt.Point;
public class StickFigure {
private int height;
private int x;
private int headDiameter;
private Point neck;
private Point head;
private Point hip;
private Point leftHand;
private Point rightHand;
private Point leftKnee;
private Point rightKnee;
private Point leftFoot;
private Point rightFoot; …

13. StickFigure (2) Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
// StickFigure.java
import java.awt.Graphics;
import java.awt.Point;
public class StickFigure {
private int height;
private int x;
private int headDiameter;
private Point neck;
private Point head;
private Point hip;
private Point leftHand;
private Point rightHand;
private Point leftKnee;
private Point rightKnee;
private Point leftFoot;
private Point rightFoot; …

14. StickFigure (3) Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
// StickFigure.java
import java.awt.Graphics;
import java.awt.Point;
public class StickFigure {
private int height;
private int x;
private int headDiameter;
private Point neck;
private Point head;
private Point hip;
private Point leftHand;
private Point rightHand;
private Point leftKnee;
private Point rightKnee;
private Point leftFoot;
private Point rightFoot; …

15. StickFigure (4) Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
// StickFigure.java
import java.awt.Graphics;
import java.awt.Point;
public class StickFigure {
private int height;
private int x;
private int headDiameter;
private Point neck;
private Point head;
private Point hip;
private Point leftHand;
private Point rightHand;
private Point leftKnee;
private Point rightKnee;
private Point leftFoot;
private Point rightFoot; …

16. StickFigure (5) Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
// StickFigure.java
import java.awt.Graphics;
import java.awt.Point;
public class StickFigure {
private int height;
private int x;
private int headDiameter;
private Point neck;
private Point head;
private Point hip;
private Point leftHand;
private Point rightHand;
private Point leftKnee;
private Point rightKnee;
private Point leftFoot;
private Point rightFoot; …

17. StickFigure (6) The remaining Points should be obvious! Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
// StickFigure.java
import java.awt.Graphics;
import java.awt.Point;
public class StickFigure {
private int height;
private int x;
private int headDiameter;
private Point neck;
private Point head;
private Point hip;
private Point leftHand;
private Point rightHand;
private Point leftKnee;
private Point rightKnee;
private Point leftFoot;
private Point rightFoot; …
The remaining Points should be obvious!

18. StickFigure (7)
// Paint the stick figure
public void paint(Graphics g) {
g.drawOval(head.x, head.y, headDiameter, headDiameter);
g.drawLine(neck.x, neck.y, hip.x, hip.y);
g.drawLine(neck.x, neck.y, leftHand.x, leftHand.y);
g.drawLine(neck.x, neck.y, rightHand.x, rightHand.y);
g.drawLine(hip.x, hip.y, leftKnee.x, leftKnee.y);
g.drawLine(leftKnee.x, leftKnee.y, leftFoot.x, leftFoot.y);
g.drawLine(hip.x, hip.y, rightKnee.x, rightKnee.y);
g.drawLine(rightKnee.x, rightKnee.y, rightFoot.x,
rightFoot.y); } …
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
Head diameter, arms, and upper and lower leg are one-fifth of total “stretched out” size each, rump is two-fifths.

19. StickFigure (8) Class Diagram Java Swing and AWT Graphics Test
// Initialize StickFigure in "legs apart" pose
public StickFigure(int startX, int height) {
x = startX;
this.height = height;
headDiameter = height / 5;
neck = new Point(x, height / 5);
head = new Point(x - headDiameter/2, 0);
hip = new Point(x, 3 * height / 5);
leftHand = new Point(neck.x - (int) (height * Math.cos(1.75*Math.PI) / 5),
neck.y - (int) (height * Math.sin(1.75 * Math.PI)/5));
rightHand = new Point(neck.x + (int) (height * Math.cos(1.75*Math.PI) / 5),
leftKnee = new Point(hip.x - (int) (height * Math.cos(1.75*Math.PI) / 5),
hip.y - (int) (height * Math.sin(1.75 * Math.PI)/5));
rightKnee = new Point(hip.x + (int) (height * Math.cos(1.75*Math.PI) / 5),
hip.y - (int) (height * Math.sin(-1.00 * Math.PI)/5)); leftFoot = new Point(leftKnee.x, leftKnee.y + height/5);
rightFoot = new Point(rightKnee.x, rightKnee.y + height/5); } …
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary

20. StickFigure (9) Class Diagram Java Swing and AWT Graphics Test
private int direction = 1; // Set the direction of movement, // varies between 1 and -1
public void move() {
x += direction;
head.x += direction;
neck.x += direction;
hip.x += direction;
leftHand.x += direction;
rightHand.x += direction;
leftKnee.x += direction;
rightKnee.x += direction;
leftFoot.x += direction;
rightFoot.x += direction;
if (x < 0 || x > 1000) { // Figure has reached the side of the window direction *= -1; } …
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary

21. StickFigure (10) Class Diagram Java Swing and AWT Graphics Test
double leftKneeAngle = 1.75;
double rightKneeAngle = -1.00;
double angleChange = .005;
public void walk() {
move();// Do the basic move things
// then set the next knee and foot positions
leftKneeAngle += angleChange * direction;
rightKneeAngle += angleChange * direction;
leftKnee.x = hip.x - (int) (height * Math.cos(leftKneeAngle * Math.PI) / 5);
leftKnee.y = hip.y - (int) (height * Math.sin(leftKneeAngle * Math.PI) / 5);
rightKnee.x = hip.x - (int) (height * Math.cos(rightKneeAngle * Math.PI) / 5);
rightKnee.y = hip.y - (int) (height * Math.sin(rightKneeAngle * Math.PI) / 5);
leftFoot.x = leftKnee.x;
leftFoot.y = leftKnee.y + height / 5;
rightFoot.x = rightKnee.x;
rightFoot.y = rightKnee.y + height / 5; } …
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary

22. Stick Figure Challenge
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
Working in groups of 2 or 3 try to come up with a really cool version of the stick figure program. E.g., you could:
Improve the walking so it looks better
Add graphical objects for the stick figure to move around, pick up, drop, etc.
Add a cat or dog figure by subclassing the stickfigure class and modifying it
Rules:
Your imagination is the limit
No more than 3 extra classes
Total code: No more than 300 new lines

23. Enter the competition Deadline: 1 May 23:59 pm
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
Your group can enter the competition for the best stickfigure program
Submit to me via
Together with a link to short video clip of your interface (less than 1 minute) – easiest place to put your video is YouTube as a private video (but anywhere is fine)
The competition will be judged on
How cool your interface is
How clean, tidy and OO your code is.
Winners and runners-up will be featured prominently on Canvas, and there will be a reward!
Deadline: 1 May 23:59 pm

24. What do we know Class Diagram Java Swing and AWT Graphics Test
DrawingPanel
StickFigure
Competition
Summary
Using AWT and Swing components we can draw graphics on the interface
Using a subclassed JFrame to create a graphics window
Using a Drawing Panel to hold the graphics
Drawing graphics with g.draw****()
Using a timer to trigger events such as the redrawing – it fires an event, which is picked up by the ActionPerformed method
You can have lots of fun playing with graphics!

25. Resources https://docs.oracle.com/javase/tutorial/2d/basic2d/
Class Diagram
Java Swing and AWT
Graphics Test
DrawingPanel
StickFigure
Competition
Summary
D&D 3.14, 4:10, 5.13, 6.15, 8.16,
Timer example
Homework
Enter your cool StickFigure program in the competition.

26. Next Lecture
More OO: Final methods and dynamic binding (Chapter 10)