Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Standard Graphics in Java, Timers and Animation

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Text or Graphics? Scanner class: A program based on the methods in the Scanner class is usually intended for a text-based user interface. Graphics class: In the java.awt package of libraries the Graphics class is defined which contains methods that allow for the design of a graphical user interface. Introduction to Graphics

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F The last few sections of each chapter of the textbook focus on graphics and graphical user interfaces F A picture or drawing must be digitized for storage on a computer F A picture is made up of pixels (picture elements), and each pixel is stored separately F The number of pixels used to represent a picture is called the picture resolution F The number of pixels that can be displayed by a monitor is called the monitor resolution Introduction to Graphics

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F Each pixel can be identified using a two-dimensional coordinate system F When referring to a pixel in a Java program, we use a coordinate system with the origin in the top-left corner Y X(0, 0) (112, 40) Coordinate Systems

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F A black and white picture could be stored using one bit per pixel (0 = white and 1 = black) F A colored picture requires more information; there are several techniques for representing colors F For example, every color can be represented as a mixture of the three additive primary colors Red, Green, and Blue F Each color is represented by three numbers between 0 and 255 that collectively are called an RGB value Representing Color

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Color is expressed as an RGB (red-green-blue) value because our eyes have three types of color receptors that respond to light that has some amount of one of those three primary colors in it. The mixture of the different amounts of those three colors creates different colors. An RGB value of (255, 255, 0) maximizes the contribution of red and green, and minimizes the contribution of blue, which results in a bright yellow RGB Color Combinations

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved  A color in a Java program is represented as an object created from the Color class  The Color class also contains several predefined colors, including the following: Object Color.black Color.blue Color.cyan Color.green Color.orange Color.red Color.white Color.yellow RGB Value 0, 0, 0 0, 0, 255 0, 255, 255 0, 255, 0 255, 200, 0 255, 0, 0 255, 255, , 255, 0 The Color Class

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F Other Predefined Colors: Object Color.gray Color.darkgray Color.lightgray Color.magenta Color.pink RGB Value 128, 128, , 64, , 192, , 0, , 175, 175 The Color Class

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Custom Colors You can define Custom Colors by declaring your own Color object with different RGB values as follows, where r,g,b are 3 values from 0 to 255: Color theColor = new Color(r,g,b); The above statement declares “theColor” to be a variable object (instead of a primitive) with Color as its type. The term “new” means that a new instance of the object will be created with the specified values. This is called “instantiation” and is done for many other types of objects as well.

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved  A Java application is a stand-alone program with a main() method (like the ones we've seen so far) F A Java applet is a program that is intended to transported over the Web and executed using a web browser  An applet doesn't have it’s own main() method. That method is inside the code of the web browser, which calls your program’s paint() method. So you are responsible for determining what your program’s paint() method will do. F There are several special methods in an Applet that serve specific purposes, but we shall not go into any more of them. Applets

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved  The paint method is executed automatically and is used to draw the applet’s contents  The paint method accepts a parameter that is an object of the Graphics class  A Graphics object defines a graphics context on which we can draw shapes and text  The Graphics class has several methods for drawing shapes Applets

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F For an Applet to function correctly, it must have certain methods and properties that allow it to communicate with the browser F To ensure that your program has the right methods and properties you need to inherit these methods from the java.swing.JApplet class or the java.applet.Applet class. F See Einsten.java and note that to change the window size for an Applet in Eclipse, go to the “Run” menu, then select “Run Configurations”, then set the size in the “Parameters” tab. Applets

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F An applet is embedded into an HTML file using a tag that references the bytecode file of the applet (the.class file), which is transported across the web and executed by a Java interpreter that is part of the browser: The Einstein Applet The HTML Applet Tag

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved  Let's explore some of the methods of the Graphics class that draw shapes in more detail F A shape can be filled or unfilled, depending on which method is invoked F The method parameters specify coordinates and sizes F Shapes with curves, like an oval, are usually drawn by specifying the shape’s bounding rectangle F An arc can be thought of as a section of an oval Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved X Y page.drawLine (10, 20, 150, 45); page.drawLine (150, 45, 10, 20); or Drawing a Line

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved X Y page.drawRect (50, 20, 100, 40); Drawing a Rectangle

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved X Y page.drawOval (175, 20, 50, 80); bounding rectangle Drawing an Oval

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F Every drawing surface has a background color F Every graphics context has a current foreground color F Both can be set explicitly F See HappyFace.java set the window size to (400,400) Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved A Sample Graphics Applet –class HappyFace Sample screen output

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved In the Graphics class the following methods are available for drawing certain shapes, as further explained in the following slides: drawLine(x1,y1,x2,y2) drawRect(x,y,width,height) drawOval(x,y,width,height) drawArc(x,y,width,height,startAngle,arcAngle) drawString(String,x,y) fillRect(x,y,width,height) fillOval(x,y,width,height) fillArc(x,y,width,height,startAngle,arcAngle) setColor(Color) getColor() setBackground(Color)=> global, so no Graphics page involved. getBackground()=> global, so no Graphics page involved. Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved void drawLine(int x1, int y1, int x2, int y2) Paints a line from point (x1,y1) to point (x2,y2) using the foreground color. Ex: page.drawLine(10,10,50,50) // The above draws a line from (10,10) to (50,50) void drawRect(int x, int y, int width, int height) Paints a rectangle with upper left corner (x,y) and dimensions width and height using the foreground color. Ex: page.drawRect(10,10,40,40) // The above draws a 40 x 40 square with the top left point // being located at (10,10) Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved void drawOval(int x, int y, int width, int height) Paints an oval bounded by the rectangle with upper left corner of (x,y) and dimensions width and height using the foreground color. Ex: page.drawOval(10,10,40,40) // The above draws a circle with a diameter of 40 with the // top left point of its bounded rectangle being at (10,10) void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) Paints an arc along the oval bounded by the rectangle defined by x, y, width and height using the foreground color. The arc starts at startAngle and extends for a distance defined by arcAngle. Ex: page.drawArc(10,10,40,40,45,90) // Draws 90 o arc of the earlier circle starting at 45 o up Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved void drawString(String str, int x, int y) Paints the character string, str, starting right above point (x,y) and extending to the right using the foreground color. Ex: page.drawString("Hello World",20,20) // Draws “Hello World” beginning at point (20,20) void fillRect(int x, int y, int width, int height) Fills in the rectangle defined by x, y, width and height using the foreground color. Ex: page.fillRect(10,10,40,40) // Fills in the defined rectangle with the current foreground // color Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved void fillOval(int x, int y, int width, int height) Fills in an oval bounded by the rectangle with upper left corner of (x,y) and dimensions width and height using the foreground color. Ex: page.fillOval(10,10,40,40) // Fills in the circle defined by the arguments with the // foreground color void fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) Fills in an arc along the oval bounded by the rectangle defined by x, y, width and height using the foreground color. The arc starts at startAngle and extends for a distance defined by arcAngle. Ex: page.drawArc(10,10,40,40,45,90) // Fills in the defined arc with the current foreground color Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved void setColor(Color color) Sets the foreground color to the specified color. Ex: page.setColor(Color.blue) // Sets foreground color to blue Color getColor() Returns the foreground color. Ex: theColor = page.getColor() // theColor gets foreground color void setBackground(Color color) Sets the global background color. No graphics object is involved. Ex: page.setBackground(Color.red) // Sets background to red Color getBackground() Returns the global background color. No graphics object involved. Ex: theColor = getBackground() // theColor gets background color Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved The Graphics object passed to the paint method has a boundary rectangle that you can access with the getClipBounds() method, which returns a rectangle. The rectangle object has x, y, width and height as its integer fields. For example, to get the width and height of the graphics screen, you could do the following: Rectangle theRect; theRect = page.getClipBounds(); // Now theRect.width stores the width of the graphics screen and // theRect.height stores the height of the graphics screen. Drawing Shapes

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved  The drawArc method draws an arc. drawArc(100, 50, 200, 200, 180, 180);  The drawArc method takes six arguments. –The first four arguments are the same as the four arguments needed by the drawOval method. –The last two arguments indicate where the arc starts, and the number of degrees through which is sweeps. –0 degrees is horizontal and to the right. Drawing Arcs

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Specifying an Arc

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Specifying an Arc

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F Any multi-sided, closed shape can be drawn using the Polygon class of the java.awt package by providing the vertices (points) in the shape. The Graphics class methods drawPolygon() and fillPolygon() take a single Polygon object as a parameter. F For instance, a three sided shape that had vertices at the three points (x1,y1), (x2,y2) and (x3,y3) would be drawn like so: Polygon poly = new Polygon(); poly.addPoint (x1,y1); poly.addPoint (x2,y2); poly.addPoint (x3,y3); page.drawPolygon (poly); F See House.java where the roof is a Polygon. Polygons

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F You can use the Image class from the java.awt package to display JPEG, PNG and GIF images (as well as BMP others). An Image object is drawn using the drawImage() Graphics class method at an (x,y) coordinate, and it can be resized as well. F In an Applet, you load an image using the getImage() and getCodeBase() methods of the JApplet or Applet class like so: Image car = getImage(getCodeBase(),"car.gif"); F In an Applet, you must load the image from the init() method: private image car; public void init() { car = getImage(getCodeBase(),"car.gif"); } Images

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F If your program is a Standard Java Application and not an Applet, then you cannot use the Applet’s getImage() and getCodeBase() methods. Instead you use the getImage() method of the ImageIcon class of the java.swing package like so: Image car = new ImageIcon("car.gif").getImage(); F In an Application you don’t use the init() method to load your image, you can load it at any place in your program. F In Eclipse, images for an Application are placed inside your project folder. For an Applet images are placed inside your bin folder that is inside your project folder. You can also put them in a subfolder in those folders like so: Image car = new ImageIcon("images/car.gif").getImage(); Images

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F You display the image object at position (40,20) as its top left corner in the current Graphics object (which we will call “page” but you can give it other names) using the following page.drawImage() method: page.drawImage(car,40,20,null); F To resize an image you just add the width and height dimensions right after the x and y coordinates of the top left corner: page.drawImage(car,40,20,60,30,null); F This would still position the car image at (40,20) as its top left corner, but now the image would be drawn 60 pixels wide and 30 pixels high. If you don’t resize it, it is drawn with its normal width and height. Positioning and Resizing Images

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F Whether your program is an Applet or an Application, when you call the getImage() method in Java, it returns immediately, and does not wait until the image is fully loaded, which means your image might not show up when you first draw the image. This can be very problematic, so you can use the MediaTracker class of the java.awt package to wait until the image is completely loaded before attempting to draw it. You do this like so: car = getImage(getCodeBase(),"car.gif"); // or car = new ImageIcon("car.gif").getImage(); MediaTracker track = new MediaTracker(this); track.addImage(car,0); try { track.waitForAll(); // wait until loading is finished } catch (InterruptedException e) {} F See HouseCar.java Waiting for Images to Load

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved F Applets and Applications use the Graphics object to draw an image. The image is usually drawn inside the paint() method in an Applet, and inside the paintComponent() method in an Application, both of which receive a Graphics object as their paramater. F An animation can be created when you repeatedly move the x or the y coordinate of the image you are drawing like so (for a Graphics object given the name “page” here): page.drawImage(car,x,y,null); page.drawImage(car,x+10,y,null); page.drawImage(car,x+20,y,null); Animation

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Animation F To make this work, you must repeatedly restore the background and all other drawings done by the paint() or paintComponent() method when redrawing the image. This means you cannot put the multiple drawing commands with changed coordinates inside the paint() or paintComponent(). You need to modify the coordinates in a different method and then invoke the paint() or paintComponent() methods making the call: repaint(); F You also need a pause between each drawing to make this work, because if you do not pause between each step the motion would go to fast for the eye to see and the steps would appear to happen simultaneously.

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Pausing During Animation F A loop can execute thousands of instructions within a second, so when you use a loop in an animation, the pictures may be drawn too quickly. So you need to pause between frames, but how long should you pause? F Our eyes can see between 25 to 40 frames per second (fps) – 40 fps is about 1 frame every 25 milliseconds (ms) and 25 fps is about 1 frame ever 40 ms– so you need to pause for at least 40 ms or less to create the illusion of smooth motion.

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Animation with the Timer F The Timer class is from the javax.swing package and it fires an ActionEvent at a specified delay (time interval). That means that at a specified interval you can update the animation like so: private Timer timer; public void init() { timer = new Timer(40,this); // setting time interval to 40 milliseconds timer.start(); // start the timer } public void actionPerformed (ActionEvent evt) { // this method runs every 40 milliseconds xPos += 5; // move the x position of the car repaint(); // redraw the window } F The above code will moves the car by 5 pixels every 40 milliseconds and redraws the screen with each move. F See HouseCarAnimate.java

Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Animation Issues F The best images to use for animation when you have a background is an image that is transparent, like a transparent GIF or PNG. This is because the background will show through the image wherever the image has a place in it for the background to show through. F A Graphics Image is always in a rectangular frame when drawn, and if the image is not a picture of a solid rectangle, some part of the image will not be shown in that rectangle. When the image has transparency, the background will show in those missing parts in the rectangular frame, and it will look more natural.