Week 9 Lab Tutorial (Step-by-Step)
Course: BIC1224 – Object-Oriented Programming (Java)
Topic: Graphics Programming in Java Swing — paintComponent(), Graphics, Colors,
Fonts, Basic Animation (Timer)
Learning Outcomes (Week 9 Lab)
By the end of this lab, students will be able to:
● Create a custom JPanel and override paintComponent(Graphics g)
● Draw lines, rectangles, ovals, text, and polygons
● Apply colors and fonts in drawing
● Use variables for coordinates and sizes (parameterized drawing)
● Animate shapes using Timer and repaint()
● Build small visual programs (flag, chart, moving ball)
Part A — Setup & Project Structure
Step 1: Create a New Project
1. Open your IDE.
2. Create a Java project:
○ Project Name: BIC1224_Week9_Graphics
3. Create Java files:
○ [Link]
○ [Link] (custom panel)
Step 2: Import Required Packages
In relevant files:
import [Link].*;
import [Link].*;
import [Link].*;
Part B — Your First Drawing Panel
Task 1: Create a Frame and Attach a Custom Panel
Step 3: Create [Link]
import [Link].*;
public class Main {
public static void main(String[] args) {
JFrame frame = new JFrame("Week 9 - Graphics");
[Link](JFrame.EXIT_ON_CLOSE);
[Link](600, 400);
[Link](new DrawingPanel());
[Link](true);
}
}
Step 4: Create [Link] with paintComponent
import [Link].*;
import [Link].*;
public class DrawingPanel extends JPanel {
@Override
protected void paintComponent(Graphics g) {
[Link](g);
[Link]("Hello Graphics!", 50, 50);
}
}
✅ Run: You should see “Hello Graphics!” drawn inside the window.
Part C — Drawing Shapes (Core Skills)
Task 2: Draw Line, Rectangle, Filled Rectangle
Step 5: Add these to paintComponent
[Link](50, 80, 300, 80);
[Link](50, 100, 120, 70);
[Link](200, 100, 120, 70);
✅ Observe the difference between drawRect and fillRect.
Task 3: Draw Oval & Circle
Step 6: Add these
[Link](50, 200, 120, 80); // oval
[Link](200, 200, 80, 80); // circle
Task 4: Use Colors
Step 7: Set colors before drawing
[Link]([Link]);
[Link](50, 100, 120, 70);
[Link]([Link]);
[Link](200, 200, 80, 80);
[Link]([Link]);
[Link]("Colored Shapes", 50, 320);
✅ Note: Color affects drawings until changed again.
Task 5: Use Fonts for Text
Step 8: Add font styling
Font titleFont = new Font("Arial", [Link], 20);
[Link](titleFont);
[Link]("Graphics Demo", 50, 30);
Task 6: Draw a Polygon (Triangle)
Step 9: Add polygon arrays
int[] x = {400, 450, 500};
int[] y = {250, 180, 250};
[Link]([Link]);
[Link](x, y, 3);
Part D — Parameterized Drawing (Good
Practice)
Task 7: Draw a House Using Variables
Step 10: Use coordinates
int baseX = 380, baseY = 100;
[Link](Color.DARK_GRAY);
[Link](baseX, baseY + 80, 160, 120); // house body
[Link]([Link]);
int[] rx = {baseX, baseX + 80, baseX + 160};
int[] ry = {baseY + 80, baseY, baseY + 80};
[Link](rx, ry, 3); // roof
✅ This teaches clean design using variables instead of hard-coded drawing only.
Part E — Animation with Timer
Task 8: Moving Ball Animation
Step 11: Add fields and Timer in DrawingPanel
Replace DrawingPanel with:
import [Link].*;
import [Link].*;
import [Link].*;
public class DrawingPanel extends JPanel {
private int x = 10;
private int y = 150;
private int diameter = 40;
private int dx = 4; // movement speed
public DrawingPanel() {
Timer timer = new Timer(20, new ActionListener() {
public void actionPerformed(ActionEvent e) {
x += dx;
// bounce back when hit wall
if (x + diameter >= getWidth() || x <= 0) {
dx = -dx;
}
repaint();
}
});
[Link]();
}
@Override
protected void paintComponent(Graphics g) {
[Link](g);
[Link]([Link]);
[Link](x, y, diameter, diameter);
[Link]([Link]);
[Link]("Moving Ball Animation", 20, 20);
}
}
✅ You now have a bouncing ball animation.
Part F — Simple Bar Chart (Graphics +
Data)
Task 9: Draw Bar Chart from Array
Step 12: Use an integer dataset
Add this inside paintComponent (or create a separate panel class):
int[] marks = {80, 65, 90, 70};
int barX = 50;
int barWidth = 50;
[Link]([Link]);
[Link]("Bar Chart (Marks)", 50, 50);
for (int i = 0; i < [Link]; i++) {
int barHeight = marks[i] * 2; // scale
int topY = 300 - barHeight;
[Link]([Link]);
[Link](barX, topY, barWidth, barHeight);
[Link]([Link]);
[Link](barX, topY, barWidth, barHeight);
[Link]("" + marks[i], barX + 10, topY - 5);
barX += 80;
}
✅ Visualize numeric data with graphics.
Exercises (Week 9)
Exercise 1 — National Flag Drawing (Bangladesh)
Draw Bangladesh flag:
● Green rectangle background
● Red filled circle center-left
Use correct positioning with variables.
Exercise 2 — Smiley Face
Draw using shapes:
● Face circle
● Eyes
● Smile using arc:
[Link](x, y, w, h, startAngle, arcAngle);
Exercise 3 — Digital Clock (Graphics + Timer)
Display current time (HH:MM:SS) using:
● new [Link]()
● Update display using Timer + repaint()
Exercise 4 — Moving Car Animation
Draw a simple car:
● Rectangle body
● Two wheels (circles)
Move left-to-right using Timer.
Reset or bounce at screen edge.
Exercise 5 (Challenge) — Mini Paint Board (Basic)
Create a panel that:
● Draws a circle wherever the user clicks
(Hint: use MouseListener to capture x,y and store points in arrays or ArrayList, then
repaint)