1. PHY-102 SAPIntroductory GraphicsSlide 1 Introductory Graphics In this section we will learn how about how to draw graphics on the screen in Java:  Drawing Lines  The Graphics Screen  Drawing Shapes  Colours  Filled Shapes  Displaying Characters  Comments

2. PHY-102 SAPIntroductory GraphicsSlide 2 Drawing Lines import java.awt.*; import java.applet.Applet; public class FirstLine extends Applet { public void paint(Graphics g) { g.drawLine(0, 0, 100, 100); } Web Page with Applet Create a file FirstLine.java containing this: Create a file FirstLine.html containing this: Compile FirstLine.java and run the appletviewer on FirstLine.html

3. PHY-102 SAPIntroductory GraphicsSlide 3 What does it mean? import java.awt.*; import java.applet.Applet; public class FirstLine extends Applet { public void paint(Graphics g) { g.drawLine(0, 0, 100, 100); } When the applet runs, every time the Java Virtual Machine decides the window needs to be redrawn (at the start, if you resize the window etc.) it calls a method called paint. You supply the code the that executes when paint is called as shown: In a simple program like this there is only one window - however in a complicated program there may be many. The 'Graphics g' is a parameter being passed to paint to tell you which window to use. The g.drawLine(...) means draw a line on the window called g.

4. PHY-102 SAPIntroductory GraphicsSlide 4 The Graphics Screen Java graphics (like most languages) uses a coordinate system based on pixels. The whole screen is made up of many pixels which are small dots that can each be set to a separate colour. Modern displays support several different numbers of pixels : (Width X Height) 640 X 480, 800 X 600, 1024 X 768, 1152 X 864,... Each pixel has an x and y coordinate measured across and down from the top left hand corner (not like a conventional x-y coordinate system). x (0, 0) y

5. PHY-102 SAPIntroductory GraphicsSlide 5 Drawing a Line g.drawLine (x1, y1, x2, y2); (x1, y1) (x2, y2) public void paint(Graphics g) { g.drawLine(0, 0, 100, 100); }

6. PHY-102 SAPIntroductory GraphicsSlide 6 Drawing Other Shapes g.drawLine (x1, y1, x2, y2 ); g.drawRect (x1, y1, width, height ); g.drawOval (x1, y1, width, height ); g.drawArc (x1, y1, width, height, angle1, angle ); Rectangle: Line: Oval (Circle or Ellipse): Arc: (x1, y1) (x2, y2) width height angle1 angle arc The Oval and Arc shapes are drawn inside an imaginary rectangle.

7. PHY-102 SAPIntroductory GraphicsSlide 7 Colours You can set the background colour using: You can set the colour of the next object you draw using: setBackground (colour); g.setColor (colour ); Note: US Color not colour There are 13 standard colours as members of the Color class: black( 0, 0, 0)blue( 0, 0, 255) cyan ( 0, 255, 255)darkGray ( 64, 64, 64) gray (128, 128, 128)green( 0, 255, 0) lightGray (192, 192, 192)magenta (255, 0, 255) orange(255, 200, 0)pink(255, 175, 175) red(255, 0, 0)white (255, 255, 255) yellow (255, 255, 0) Color mycolour = new Color(R, G, B ); Or you can define your own using: setBackground(Color.lightGray); Color myGreen = new Color(0, 200, 0); g.setColor(myGreen); e.g. Note: US gray not grey These are the amount of Red, Green and Blue on a scale of 0 to 255

8. PHY-102 SAPIntroductory GraphicsSlide 8 Filled Shapes g.fillRect (x1, y1, width, height ); g.fillOval (x1, y1, width, height ); g.fillArc (x1, y1, width, height, angle1, angle ); Rectangle: As well as the draw methods there are a set of methods for filling the shapes with identical parameters to those of the draw equivalents. Oval (Circle or Ellipse): Arc: (x1, y1) width height angle arc fillArc produces a pie shape rather than an arc. angle1

9. PHY-102 SAPIntroductory GraphicsSlide 9 Filling Shapes Example import java.awt.*; import java.applet.Applet; public class FirstShapes extends Applet { public void paint(Graphics g) { setBackground(Color.lightGray); g.drawRect(30, 30, 80, 40); g.drawOval(120, 30, 50, 50); Color myGreen = new Color(0, 200, 0); g.setColor(myGreen); g.fillRect(30, 100, 80, 40); g.fillOval(120, 100, 50, 50); g.drawLine(30, 160, 130, 170); g.setColor(Color.black); g.drawArc(30, 180, 50, 50, 60, 40); g.setColor(Color.red); g.fillArc(120, 180, 50, 50, 60, 40); } The statements are executed sequentially (unless we specify otherwise). The background is set, the unfilled rectangle are drawn using the default colour (black), the colour is set to myGreen and the filled rectangle and oval drawn, the colour is set back to black and the arc drawn and finally the colour is set to red and the pie drawn.

10. PHY-102 SAPIntroductory GraphicsSlide 10 Displaying Characters We have already used drawString to display characters: g.drawString("Hello World!", 50, 50); g.drawString (string, x1, y1 ); The parameters are: The String Imaginary line on which the characters rest The start of the string The string itself The simplest string is a sequence of characters enclosed within double-quote " " characters. (x1, y1)

11. PHY-102 SAPIntroductory GraphicsSlide 11 Comments You can annotate your programs with comments. These are statements or parts of statements in the file which help you or someone else understand the program but are ignored by the computer. There are two types: Single line comments - everything following a // is treated as a comment and ignored. // Define my own colours Color myGreen = new Color(0, 200, 0); g.setColor(myGreen); g.fillOval(120, 100, 50, 50); // This oval will be green Multi-line comments - everything between a /* and a */ is treated as a comment and ignored. /* This is my first Applet * * Author: A.N.Other * * Date: 1st April 2000 */ Comments things that are not obvious but not those that are ! This line is ignored This line is ignored from here onwards All this is ignored Not necessary - only makes it look pretty