Download Chapter 5: Computer Graphics

Computer Science Notes
Chapter 5
Page 1 of 6
Chapter 5: Computer Graphics
Big Skills:
1. To be able to write simple graphical applications.
2. To display graphical shapes, such as lines, rectangles, and ellipses.
3. To use colors.
4. To display drawings consisting of many shapes.
5. To read input from a dialog box.
Section 5.1: Frame Windows
All graphical applications show their information inside a frame window, which is a window with a title bar.
To construct a frame, follow these steps using these lines of codes:
1. Import the package javax.swing:
import javax.swing.*;
2. Construct an object of the JFrame class:
JFrame frame = new JFrame();
3. Set the horizontal and vertical pixel size of the frame:
frame.setSize(300,400);
4. Set the title of the frame:
frame.setTitle(“Test Picture”);
5. Set the “default close operation”:
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
6. Make the frame visible
frame.setVisible(true);
Computer Science Notes
Chapter 5
Page 2 of 6
Section 5.2: Drawing Shapes
To draw a shape, you have to first construct a component object, and then add that component to the frame.
To construct a new component:
1. Create a class that extends the JComponent class:
public class RectangleComponentMirus extends JComponent
2. Import the Graphics2 class:
import java.awt.Graphics;
3. Import the Graphics2D class:
import java.awt.Graphics2D;
4. Re-cast the graphics parameter g to recover it as Graphics2D object:
Graphics2D g2 = (Graphics2D) g;
5. Create a paintComponent method (which overrides the JComponent method of the same name); this
method is called automatically when the window is shown for the first time:
public void paintComponent(Graphics g) { … }
6. Draw the objects by calling the draw() method of your Graphics2D object. Pass the object you want to
draw as an input parameter to the draw() method:
g2.draw( new Rectangle(5, 10, 20, 30) );
To add the component to the frame:
1. Construct an object of your component class:
RectangleComponentMirus component = new RectangleComponentMirus();
2. Add the component to the frame:
frame.add(component);
3. Make the frame visible.
Computer Science Notes
Chapter 5
Page 3 of 6
File RectangleComponentMirus.java
(defines a rectangle component to be drawn)
File RectangleViewTest.java
(for viewing the rectangle in the component
definition)
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.JComponent;
import javax.swing.JFrame;
/* Create a new graphics component that draws two
rectangles and has inherited properties from the JComponent
class
*/
public class RectangleComponentMirus extends JComponent
{
// overrides javax.swing.JComponent.paintComponent
public void paintComponent(Graphics g)
{
//Recover Graphics2D
Graphics2D g2 = (Graphics2D) g;
public class RectangleViewTest
{
public static void main(String[] args)
{
JFrame frame = new JFrame();
final int FRAME_WIDTH = 300;
final int FRAME_HEIGHT = 400;
frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
frame.setTitle("Test Picture");
frame.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE);
RectangleComponentMirus component = new
RectangleComponentMirus();
frame.add(component);
frame.setVisible(true);
//Construct a rectangle then draw it
Rectangle box = new Rectangle(5, 10, 20, 30);
g2.draw(box);
}
}
//Move rectangle 15 units right and 25 units down
box.translate(15, 25);
//Draw translated rectangle
g2.draw(box);
}
}
Computer Science Notes
Chapter 5
Page 4 of 6
Advanced Topic 5.1: Applets
An applet is a program that runs inside a web browser.
To implement a graphical applet, use the same code as for implementing a component, but make the following
changes:
1. Instead of extending the JComponent class, extend the JApplet class:
public class RectangleAppletMirus extends JApplet
2. Instead of creating a paintComponent method, create a paint method instead:
public void paint(Graphics g);
To see the applet, compile it, then put the name of the object file in an applet tag in an HTML document:
1. Add the following code to the body of an HTML document:
<applet code = “RectangleAppletMirus.class” width=”300” height=”400”></applet>;
File RectangleAppletMirus.java
(defines a rectangle component to be drawn)
File Rectangle.html
(for viewing the rectangle in a web browser)
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.JApplet;
<html>
/* Create a new graphics applet that draws two rectangles
and has inherited properties from the JApplet class
*/
public class RectangleAppletMirus extends JApplet
{
// overrides javax.swing.JApplet.paint
public void paint(Graphics g)
{
//Recover Graphics2D
Graphics2D g2 = (Graphics2D) g;
//Construct a rectangle and draw it
Rectangle box = new Rectangle(5, 10, 20, 30);
g2.draw(box);
//Move rectangle 15 units right and 25 units down
box.translate(15, 25);
//Draw moved rectangle
g2.draw(box);
}
}
<head>
<title>Test Picture</title>
</head>
<body>
<p>Here is a test applet that draws rectangles.</p>
<applet code="RectangleAppletMirus.class" width="300"
height="400"></applet>
</body>
</html>
Computer Science Notes
Chapter 5
Section 5.3: Graphical Shapes
To draw a rectangle:
1. import java.awt.Rectangle;
2. Rectangle rec1 = new Rectangle (x_topleft, y_topleft, width, height);
3. g2.draw(rec1);
To draw an ellipse or circle (Double is an inner class of the Ellipse2D class…):
4. import java.awt.geom.Ellipse2D;
5. Ellipse2D.Double ellipse = new Ellipse2D.Double(x_topleft, y_topleft, width, height);
6. g2.draw(ellipse);
7. Ellipse2D.Double circle = new Ellipse2D.Double(x_topleft, y_topleft, diameter, diameter);
8. g2.draw(circle);
To draw a line:
1. import java.awt.geom.Line2D;
2. Line2D.Double line1 = new Line2D.Double(x_start, y_start, x_end, y_end);
3. g2.draw(line1);
To define a point:
1. import java.awt.geom.Point2D;
2. Point2D.Double point1 = new Point2D.Double(x, y);
3. Points can not be drawn; they are used as alternate parameters to other shape objects:
line1.setLine(point1,point2);
4. To “draw” a point, create a line object that has the same starting and ending points…
To draw a polygon:
1. import java.awt.Polygon;
2. Polygon triangle = new Polygon();
3. Add points using the addPoint() method:
poly.addPoint(100,0);
poly.addPoint(200,100);
poly.addPoint(0,100);
g2.draw(triangle);
4.
To draw text in a frame:
1. g2.drawString(“Hello, World!”, x_lowerleft, y_lowerleft);
Page 5 of 6
Computer Science Notes
Chapter 5
Page 6 of 6
Section 5.4: Colors
To change colors right before you draw a shape:
1. import java.awt.Color;
2. g2.setColor(Color.PINK);
To define and use your own color object:
1. import java.awt.Color;
2. Color mycolor = new Color(0.1F, 0.2F, 0.3F);
3. g2.setColor(mycolor);
To draw a shape that is filled in with a given color:
1. g2.fill(poly);
Predefined Colors and Their RGB Values
RGB Value (a floating point number
from 0.0 to 1.0)
Color.BLACK
0.0F, 0.0F, 0.0F
Color.WHITE
1.0F, 1.0F, 1.0F
Color.RED
1.0F, 0.0F, 0.0F
Color.GREEN
0.0F, 1.0F, 0.0F
Color.BLUE
0.0F, 0.0F, 1.0F
Color.LIGHTGRAY
0.75F, 0.75F, 0.75F
Color.GRAY
0.5F, 0.5F, 0.5F
Color.DARKGRAY
0.25F, 0.25F, 0.25F
Color.YELLOW
1.0F, 1.0F, 0.0F
Color.MAGENTA
1.0F, 0.0F, 1.0F
Color.CYAN
0.0F, 1.0F, 1.0F
Color.PINK
1.0F, 0.7F, 0.7F
Color.ORANGE
1.0F, 0.8F, 0.0F
Color
Section 5.5: Drawing Complex Shapes
Graph it out by hand, then write a new class (in a third source file) that defines all the drawing steps necessary
for the complex shape.
Section 5.6: Reading Text Input
To get user input through a dialog box instead of from the command line:
1. import javax.swing.JOptionPane;
2. String input = JOptionPane.showInputDialog(“Enter a value for x:”);
3. double x = Double.parseDouble(input);