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

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

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

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…

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

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

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

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.

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.

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

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.

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

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

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

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

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

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!

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.

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

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

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

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

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 https://webdropoff.auckland.ac.nz/ 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

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!

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, https://docs.oracle.com/javase/tutorial/2d/basic2d/ Timer example http://www.java2s.com/Code/Java/2D-Graphics-GUI/Timerbasedanimation.htm Homework Enter your cool StickFigure program in the competition.

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