Building Java
Programs
A Back to Basics Approach
CS 210
CHAPTER 3G
GRAPHICS
Please download the PPT, and use Slide Show for a better viewing experience
Winnie Li
Portions Copyright 2020 by Pearson Education 04/11/2025 1
Graphical objects
CS 210
We will draw graphics in Java using 3 kinds of
objects:
DrawingPanel: A window on the screen.
Not part of Java; provided by the authors. See class
web site.
Graphics: A "pen" to draw shapes
and lines on a window.
Color: Colors in which to draw shapes.
Portions Copyright 2020 by Pearson Education 04/11/2025 2
DrawingPanel
CS 210
"Canvas" objects that represents windows/drawing
surfaces
To create a window:
DrawingPanel name = new DrawingPanel(width, height);
Example:
DrawingPanel panel = new DrawingPanel(300, 200);
The window has nothing on it.
We draw shapes / lines on it with
another object of type Graphics.
Portions Copyright 2020 by Pearson Education 04/11/2025 3
Graphics
CS 210
"Pen" or "paint brush" objects to draw lines and
shapes
Access it by calling getGraphics on your
DrawingPanel.
Graphics g = [Link]();
Draw shapes by calling methods
on the Graphics object.
[Link](10, 30, 60, 35);
[Link](80, 40, 50, 70);
Portions Copyright 2020 by Pearson Education 04/11/2025 4
Java class libraries, import
CS 210
Java class libraries: Classes included with Java's
JDK.
organized into groups named packages
To use a package, put an import declaration in your
program:
// put this at the very top of your program
import packageName.*;
Graphics belongs to a package named [Link]
import [Link].*;
To use Graphics, you must place the above line at the
very
Portions top
Copyright 2020of your
by Pearson program, before the
Education public class
04/11/2025 5
Coordinate system
CS 210
Each (x, y) position is a pixel ("picture
element").
Position (0, 0) is at the window's top-left corner.
x increases rightward and the y increases downward.
The rectangle from (0, 0) to (200, 100) looks like
this:
(0, 0) x+
(200, 100)
y+
Portions Copyright 2020 by Pearson Education 04/11/2025 6
Graphics methods
CS 210
Method name Description
[Link](x1, y1, x2, y2); line between points (x1, y1), (x2, y2)
[Link](x, y, width, outline largest oval that fits in a box of
height); size width * height with top-left at (x,
y)
[Link](x, y, width, outline of rectangle of size
height); width * height with top-left at (x, y)
[Link](text, x, y); text with bottom-left at (x, y)
[Link](x, y, width, fill largest oval that fits in a box of
height); size width * height with top-left at (x,
y)
[Link](x, y, width, fill rectangle of size width * height
height); with top-left at (x, y)
[Link](Color); set Graphics to paint any following
Portions Copyright 2020 by Pearson Education shapes in 04/11/2025
the given color 7
Color
CS 210
Specified as predefined Color class constants:
Color.CONSTANT_NAME
BLACK, BLUE, CYAN, DARK_GRAY, GRAY,
GREEN, LIGHT_GRAY, MAGENTA, ORANGE,
PINK, RED, WHITE, YELLOW
Or create one using Red-Green-Blue (RGB) values of
0-255
Color name = new Color(red, green, blue);
Example:
Color brown = new Color(192, 128, 64);
List of RGB colors:
[Link]
Portions Copyright 2020 by Pearson Education 04/11/2025 8
Using colors
CS 210
Pass a Color to Graphics object's setColor
method
Subsequent shapes will be drawn in the new color.
[Link]([Link]);
[Link](10, 30, 100, 50);
[Link](20, 0, 10, 30);
[Link]([Link]);
[Link](60, 40, 40, 70);
Pass a color to DrawingPanel's setBackground
method
The overall window background color will change.
Color brown = new Color(192, 128, 64);
[Link](brown);
Portions Copyright 2020 by Pearson Education 04/11/2025 9
Outlined shapes
CS 210
To draw a colored shape with an outline, first fill
it,
then draw the same shape in the outline color.
import [Link].*; // so I can use Graphics
public class OutlineExample {
public static void main(String[] args) {
DrawingPanel panel = new DrawingPanel(150, 70);
Graphics g = [Link]();
// inner red fill
[Link]([Link]);
[Link](20, 10, 100, 50);
// black outline
[Link]([Link]);
[Link](20, 10, 100, 50);
}
}Portions Copyright 2020 by Pearson Education 04/11/2025 10
Superimposing shapes
CS 210
When ≥ 2 shapes occupy the same pixels, the last drawn
"wins."
import [Link].*;
public class Car {
public static void main(String[] args) {
DrawingPanel panel = new DrawingPanel(200, 100);
[Link](Color.LIGHT_GRAY);
Graphics g = [Link]();
[Link]([Link]);
[Link](10, 30, 100, 50);
[Link]([Link]);
[Link](20, 70, 20, 20);
[Link](80, 70, 20, 20);
[Link]([Link]);
[Link](80, 40, 30, 20);
}
}
Portions Copyright 2020 by Pearson Education 04/11/2025 11
Drawing with loops
CS 210
The x,y,w,h expressions can use the loop
counter variable:
[Link]([Link]);
[Link]([Link]);
for (int i = 1; i <= 10; i++) {
// x y w h
[Link](100 + 20 * i, 5 + 20 * i, 50, 50);
}
Nested loops can be used with graphics:
[Link]([Link]);
for (int x = 1; x <= 4; x++) {
for (int y = 1; y <= 9; y++) {
[Link]("Java", x * 40, y * 25);
}
}
Portions Copyright 2020 by Pearson Education 04/11/2025 12
Zero-based loops
CS 210
Beginning at 0 and using < can make
coordinates easier.
DrawingPanel panel = new DrawingPanel(150, 140);
Graphics g = [Link]();
// horizontal line of 5 20x20 rectangles starting
// at (11, 18); x increases by 20 each time
for (int i = 0; i < 5; i++) {
[Link](11 + 20 * i, 18, 20, 20);
}
Exercise: Write a variation of the above
program that draws the output at right.
The bottom-left rectangle is at (11, 98).
for (int i = 0; i < 5; i++) {
[Link](11 + 20 * i, 98 - 20 * i, 20, 20);
}
Portions Copyright 2020 by Pearson Education04/11/2025 13
Parameterized figures
CS 210
Modify the car-drawing method so that it can
draw cars at different positions, as in the
following image.
Top-left corners: (10, 30), (150, 10)
Increase the drawing panel's size to 260x100 to fit.
Portions Copyright 2020 by Pearson Education 04/11/2025 14
Drawing with parameters
CS 210
To draw in a method, you must pass the
Graphics object to the method.
Otherwise, g is out of scope and cannot be used!
syntax (declaration):
public static void <name>(Graphics g, <parameters>) {
<statement(s)>;
}
syntax (call):
<name>(g, <values>);
Portions Copyright 2020 by Pearson Education 04/11/2025 15
Parameterized answer
CS 210
import [Link].*;
public class Car3 {
public static void main(String[] args) {
DrawingPanel panel = new DrawingPanel(260, 100);
[Link](Color.LIGHT_GRAY);
Graphics g = [Link]();
drawCar(g, 10, 30);
drawCar(g, 150, 10);
}
public static void drawCar(Graphics g, int x, int y) {
[Link]([Link]);
[Link](x, y, 100, 50);
[Link]([Link]);
[Link](x + 10, y + 40, 20, 20);
[Link](x + 70, y + 40, 20, 20);
[Link]([Link]);
[Link](x + 70, y + 10, 30, 20);
}
}
Portions Copyright 2020 by Pearson Education 04/11/2025 16
Java book figure
CS 210
Write a program that draws the following figure:
drawing panel is size 200x150
book is at (20, 35), size 100x100
cyan background
white "BJP" text at position (70, 55)
each stair is 9px tall
1st stair is 10px wide
2nd stair is 20px wide ...
stairs are in color (red=191, green=118, blue=73)
stairs are 10px apart (1 blank pixel between)
Portions Copyright 2020 by Pearson Education 04/11/2025 17
Java book solution
CS 210
// Draws a Building Java Programs textbook with DrawingPanel.
import [Link].*;
public class Book {
public static void main(String[] args) {
DrawingPanel panel = new DrawingPanel(200, 150);
[Link]([Link]);
Graphics g = [Link]();
[Link]([Link]); // cyan background
[Link](20, 35, 100, 100);
[Link]([Link]); // white "bjp"
text
[Link]("BJP", 70, 55);
[Link](new Color(191, 118, 73));
for (int i = 0; i < 10; i++) { // orange "bricks"
[Link](20, 35 + 10 * i, 10 + 10 * i, 9);
}
}
}
Portions Copyright 2020 by Pearson Education 04/11/2025 18
Multiple Java books
CS 210
Modify the Java book program so that it can
draw books at different positions as shown
below.
book top/left positions: (20, 35), (150, 70), (300, 10)
drawing panel's new size: 450x180
Portions Copyright 2020 by Pearson Education 04/11/2025 19
Multiple books solution
CS 210
To draw in a method, you must pass Graphics g
to it.
// Draws many BJP textbooks using parameters.
import [Link].*;
public class Book2 {
public static void main(String[] args) {
DrawingPanel panel = new DrawingPanel(450, 180);
[Link]([Link]);
Graphics g = [Link]();
// draw three books at different locations
drawBook(g, 20, 35);
drawBook(g, 150, 70);
drawBook(g, 300, 10);
}
...
Portions Copyright 2020 by Pearson Education 04/11/2025 20
Multiple books, cont'd.
CS 210
...
// Draws a BJP textbook at the given x/y position.
public static void drawBook(Graphics g, int x, int y) {
[Link]([Link]); // cyan background
[Link](x, y, 100, 100);
[Link]([Link]); // white "bjp"
text
[Link]("BJP", x + 50, y + 20);
[Link](new Color(191, 118, 73));
for (int i = 0; i < 10; i++) { // orange "bricks"
[Link](x, y + 10 * i, 10 * (i + 1), 9);
}
}
}
Portions Copyright 2020 by Pearson Education 04/11/2025 21
Resizable Java books
CS 210
Modify the Java book program so that it can
draw books at different sizes as shown below.
book sizes: 100x100, 60x60, 200x200
drawing panel's new size: 520x240
Portions Copyright 2020 by Pearson Education 04/11/2025 22
Resizable books solution
CS 210
// Draws many sized BJP textbooks using parameters.
import [Link].*;
public class Book3 {
public static void main(String[] args) {
DrawingPanel panel = new DrawingPanel(520, 240);
[Link]([Link]);
Graphics g = [Link]();
// draw three books at different locations/sizes
drawBook(g, 20, 35, 100);
drawBook(g, 150, 70, 60);
drawBook(g, 300, 10, 200);
}
...
Portions Copyright 2020 by Pearson Education 04/11/2025 23
Resizable solution, cont'd.
CS 210
...
// Draws a book of the given size at the given position.
public static void drawBook(Graphics g, int x, int y, int size) {
[Link]([Link]); // cyan background
[Link](x, y, size, size);
[Link]([Link]); // white "bjp"
text
[Link]("BJP", x + size/2, y + size/5);
[Link](new Color(191, 118, 73));
for (int i = 0; i < 10; i++) { // orange "bricks"
[Link](x, // x
y + size/10 * i, // y
size/10 * (i + 1), // width
size/10 - 1); // height
}
}
}
Portions Copyright 2020 by Pearson Education 04/11/2025 24
Polygon
CS 210
Objects that represent arbitrary shapes
Add points to a Polygon using its addPoint(x,
y) method.
Example:
DrawingPanel p = new DrawingPanel(100, 100);
Graphics g = [Link]();
[Link]([Link]);
Polygon poly = new Polygon();
[Link](10, 90);
[Link](50, 10);
[Link](90, 90);
[Link](poly);
Portions Copyright 2020 by Pearson Education 04/11/2025 25
DrawingPanel methods
CS 210
[Link]();
Erases any shapes that are drawn on the
drawing panel.
[Link](width);
[Link](height);
[Link](width, height);
Changes the drawing panel's size to the given
value(s).
[Link](filename);
Saves the image on the panel to the given file
(String).
[Link](ms);
Portions Copyright 2020 by Pearson Education 04/11/2025 26
Animation with sleep
CS 210
DrawingPanel's sleep method pauses your
program for a given number of milliseconds.
You can use sleep to create simple animations.
DrawingPanel panel = new DrawingPanel(250, 200);
Graphics g = [Link]();
[Link]([Link]);
for (int i = 1; i <= 10; i++) {
[Link](15 * i, 15 * i, 30, 30);
[Link](500);
}
Try adding sleep commands to loops in past exercises
in this chapter and watch the panel draw itself piece by
piece.
Portions Copyright 2020 by Pearson Education 04/11/2025 27
Animation exercise
CS 210
Modify the previous program to draw a "moving" animated car.
Portions Copyright 2020 by Pearson Education 04/11/2025 28
Animation exercise – Extra Credit
CS 210
Modify the following program to draw a "moving" car.
import [Link].*;
public class Car {
public static void main(String[] args) {
DrawingPanel panel = new DrawingPanel(200, 100);
[Link](Color.LIGHT_GRAY);
Graphics g = [Link]();
// car body
[Link]([Link]);
[Link](10, 30, 100, 50);
// wheels
[Link]([Link]);
[Link](20, 70, 20, 20);
[Link](80, 70, 20, 20);
// window
[Link]([Link]);
[Link](80, 40, 30, 20);
}
}
Portions Copyright 2020 by Pearson Education 04/11/2025 29
The End
CS 210
CHAPTER 3G
GRAPHICS
Winnie Li
Portions Copyright 2020 by Pearson Education 04/11/2025 30