1. CSC 1051 – Data Structures and Algorithms I
Graphics & Applets
CSC 1051 – Data Structures and Algorithms I
Dr. Mary-Angela Papalaskari
Department of Computing Sciences
Villanova University
Course website:
CSC 1051 M.A. Papalaskari, Villanova University

2. Back to Chapter 2! Character Strings Variables and Assignment
Primitive Data Types
Expressions
Data Conversion
Interactive Programs
Graphics
Applets
Drawing Shapes
CSC 1051 M.A. Papalaskari, Villanova University

3. Today Image representation Java Graphics class Java applets
CSC 1051 M.A. Papalaskari, Villanova University

4. What’s a picture?
programs represent pictures as grids of picture elements or pixels
Stephanos with his eraser collection
CSC 1051 M.A. Papalaskari, Villanova University

5. Some Pixel encodings RGB Color Bitmap 1 bit Grayscale 8 bits
3 colors: red, green, blue
8 bits/color
24 bits
Bitmap
1 bit
Grayscale
8 bits
CSC 1051 M.A. Papalaskari, Villanova University

6. Comparing file sizes for 300 x 200 image:
RGB Color
3 colors: red, green, blue
24 bits (3 bytes)
Bitmap
1 bit
Grayscale
8 bits (1 byte)
7.3 KB
58.6 KB
175.8 KB
CSC 1051 M.A. Papalaskari, Villanova University

7. Additive/Subtractive Color
We choose 3 primary colors that can be combined to produce all the visible colors:
Animation:
Additive primaries
- combining light
Red Green Blue
Subtractive primaries
- combining ink, thus subtracting light
Cyan Yellow Magenta
CSC 1051 M.A. Papalaskari, Villanova University

8. Encoding RGB
Each component color (red, green, and blue) is encoded as a single byte
Colors go from (0,0,0) to (255,255,255)
If all three components are the same, the color is in greyscale
(50,50,50) at (2,2)
(0,0,0) (at position (1,2) in example) is black
(255,255,255) is white
CSC 1051 M.A. Papalaskari, Villanova University

9. y = 9
Position: (12,9)
x = 12
CSC 1051 M.A. Papalaskari, Villanova University

10. y = 9 Color:(108,86,142) Position: (12,9) x = 12 red=108 green=86
blue=142
y = 9
Color:(108,86,142)
Position: (12,9)
x = 12
CSC 1051 M.A. Papalaskari, Villanova University

11. Is that enough? We’re representing color in 24 (3 * 8) bits.
That’s 16,777,216 (224) possible colors
Our eye can discern millions of colors - so probably pretty close
CSC 1051 M.A. Papalaskari, Villanova University

12. Image size Image size: Resolution: #pixels/inch Pixels (eg: 300 x 200)
Inches/centimeters (eg: 3 x 2 inches)
Resolution: #pixels/inch
(eg: 100 pixels/inch)
CSC 1051 M.A. Papalaskari, Villanova University

13. Increasing Image Display Size
Image size:
Pixels (eg: 300 x 200)
Inches/centimeters (eg: 3 x 2 inches)
3 x 2
6 x 4
CSC 1051 M.A. Papalaskari, Villanova University

14. Increasing Image Display Size
Image size:
Pixels (eg: 300 x 200)
Inches/centimeters (eg: 3 x 2 inches)
Resolution: #pixels/inch
(eg: 100 pixels/inch)
Same pixels, NO Resampling
3 x 2
6 x 4 50
CSC 1051 M.A. Papalaskari, Villanova University

15. Decreasing Image Display Size
Image size:
Pixels (eg: 300 x 200)
Inches/centimeters (eg: 3 x 2 inches)
Resolution: #pixels/inch
(eg: 100 pixels/inch)
3 x 2
1.5 x 1
200
CSC 1051 M.A. Papalaskari, Villanova University

16. Resampling image Image size: Resolution: #pixels/inch
Pixels 300 x 200)
Inches/centimeters (eg: 3 x 2 inches)
Resolution: #pixels/inch
(eg: 100 pixels/inch)
300 x 200
150 x 100 50
CSC 1051 M.A. Papalaskari, Villanova University

17. The Color Class
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.orange
Color.white
Color.yellow
RGB Value
0, 0, 0
0, 0, 255
0, 255, 255
255, 200, 0
255, 255, 255
255, 255, 0
CSC 1051 M.A. Papalaskari, Villanova University

18. Outline Character Strings Variables and Assignment
Primitive Data Types
Expressions
Data Conversion
Interactive Programs
Graphics
Applets
Drawing Shapes
CSC 1051 M.A. Papalaskari, Villanova University

19. Applets
A Java application is a stand-alone program with a main method (like the ones we've seen so far)
A Java applet is a program that is intended to be transported over the Web and executed using a web browser
An applet also can be executed using the appletviewer tool of the Java SDK
An applet doesn't have a main method
Instead, there are several special methods that serve specific purposes
CSC 1051 M.A. Papalaskari, Villanova University

20. Applets
The paint method is executed automatically whenever the applet’s contents are drawn
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
CSC 1051 M.A. Papalaskari, Villanova University

21. Applets We create an applet by extending the JApplet class
The JApplet class is part of the javax.swing package
This makes use of inheritance, which is explored in more detail in Chapter 8
See Einstein.java
CSC 1051 M.A. Papalaskari, Villanova University

22. //********************************************************************
// Einstein.java Author: Lewis/Loftus //
// Demonstrates a basic applet.
import javax.swing.JApplet;
import java.awt.*;
public class Einstein extends JApplet { //
// Draws a quotation by Albert Einstein among some shapes.
public void paint (Graphics page)
page.drawRect (50, 50, 40, 40); // square
page.drawRect (60, 80, 225, 30); // rectangle
page.drawOval (75, 65, 20, 20); // circle
page.drawLine (35, 60, 100, 120); // line
page.drawString ("Out of clutter, find simplicity.", 110, 70);
page.drawString ("-- Albert Einstein", 130, 100); }
CSC 1051 M.A. Papalaskari, Villanova University

23. //********************************************************************
// Einstein.java Author: Lewis/Loftus //
// Demonstrates a basic applet.
import javax.swing.JApplet;
import java.awt.*;
public class Einstein extends JApplet { //
// Draws a quotation by Albert Einstein among some shapes.
public void paint (Graphics page)
page.drawRect (50, 50, 40, 40); // square
page.drawRect (60, 80, 225, 30); // rectangle
page.drawOval (75, 65, 20, 20); // circle
page.drawLine (35, 60, 100, 120); // line
page.drawString ("Out of clutter, find simplicity.", 110, 70);
page.drawString ("-- Albert Einstein", 130, 100); }
CSC 1051 M.A. Papalaskari, Villanova University

24. //********************************************************************
// Einstein.java Author: Lewis/Loftus //
// Demonstrates a basic applet.
import javax.swing.JApplet;
import java.awt.*;
public class Einstein extends JApplet { //
// Draws a quotation by Albert Einstein among some shapes.
public void paint (Graphics page)
page.drawRect (50, 50, 40, 40); // square
page.drawRect (60, 80, 225, 30); // rectangle
page.drawOval (75, 65, 20, 20); // circle
page.drawLine (35, 60, 100, 120); // line
page.drawString ("Out of clutter, find simplicity.", 110, 70);
page.drawString ("-- Albert Einstein", 130, 100); }
CSC 1051 M.A. Papalaskari, Villanova University

25. The HTML applet Tag
An applet is embedded into an HTML file using a tag that references the bytecode file of the applet
The bytecode version of the program is transported across the web and executed by a Java interpreter that is part of the browser
<html>
<head>
<title>The Einstein Applet</title>
</head>
<body>
<applet code="Einstein.class" width=350 height=175>
</applet>
</body>
</html>
CSC 1051 M.A. Papalaskari, Villanova University

26. Outline Character Strings Variables and Assignment
Primitive Data Types
Expressions
Data Conversion
Interactive Programs
Graphics
Applets
Drawing Shapes
CSC 1051 M.A. Papalaskari, Villanova University

27. Drawing Shapes
Shapes can be filled or unfilled, depending on which method is invoked
The method parameters specify coordinates and sizes
For curves and ovals we specify the shape’s bounding rectangle
CSC 1051 M.A. Papalaskari, Villanova University

28. Drawing a Line page.drawLine (10, 20, 150, 45); orX Y 10
150 20 45
Start
x y
End
x y
page.drawLine (10, 20, 150, 45);
page.drawLine (150, 45, 10, 20); or
CSC 1051 M.A. Papalaskari, Villanova University

29. Drawing a Rectangle page.drawRect (50, 20, 100, 40); 50 X 20 40 100Y 50 20 40
100
Start
x y
Width Height
page.drawRect (50, 20, 100, 40);
CSC 1051 M.A. Papalaskari, Villanova University

30. Drawing an Oval bounding rectangle page.drawOval (175, 20, 50, 80);X Y
175 20 80
bounding
rectangle 50
page.drawOval (175, 20, 50, 80);
CSC 1051 M.A. Papalaskari, Villanova University

31. Drawing an Arc
An arc is defined by an oval, a start angle, and an arc angle:
CSC 1051 M.A. Papalaskari, Villanova University

32. Drawing Shapes Every drawing surface has a background color
Every graphics context has a current foreground color
Both can be set explicitly
See Snowman.java
CSC 1051 M.A. Papalaskari, Villanova University

33. //********************************************************************
// Snowman.java Author: Lewis/Loftus //
// Demonstrates basic drawing methods and the use of color.
import javax.swing.JApplet;
import java.awt.*;
public class Snowman extends JApplet { //
// Draws a snowman.
public void paint (Graphics page)
final int MID = 150;
final int TOP = 50;
setBackground (Color.cyan);
page.setColor (Color.blue);
page.fillRect (0, 175, 300, 50); // ground
page.setColor (Color.yellow);
page.fillOval (-40, -40, 80, 80); // sun
continued
CSC 1051 M.A. Papalaskari, Villanova University

34. page.setColor (Color.white);
continued
page.setColor (Color.white);
page.fillOval (MID-20, TOP, 40, 40); // head
page.fillOval (MID-35, TOP+35, 70, 50); // upper torso
page.fillOval (MID-50, TOP+80, 100, 60); // lower torso
page.setColor (Color.black);
page.fillOval (MID-10, TOP+10, 5, 5); // left eye
page.fillOval (MID+5, TOP+10, 5, 5); // right eye
page.drawArc (MID-10, TOP+20, 20, 10, 190, 160); // smile
page.drawLine (MID-25, TOP+60, MID-50, TOP+40); // left arm
page.drawLine (MID+25, TOP+60, MID+55, TOP+60); // right arm
page.drawLine (MID-20, TOP+5, MID+20, TOP+5); // brim of hat
page.fillRect (MID-15, TOP-20, 30, 25); // top of hat }
CSC 1051 M.A. Papalaskari, Villanova University

35. page.setColor (Color.white);
continued
page.setColor (Color.white);
page.fillOval (MID-20, TOP, 40, 40); // head
page.fillOval (MID-35, TOP+35, 70, 50); // upper torso
page.fillOval (MID-50, TOP+80, 100, 60); // lower torso
page.setColor (Color.black);
page.fillOval (MID-10, TOP+10, 5, 5); // left eye
page.fillOval (MID+5, TOP+10, 5, 5); // right eye
page.drawArc (MID-10, TOP+20, 20, 10, 190, 160); // smile
page.drawLine (MID-25, TOP+60, MID-50, TOP+40); // left arm
page.drawLine (MID+25, TOP+60, MID+55, TOP+60); // right arm
page.drawLine (MID-20, TOP+5, MID+20, TOP+5); // brim of hat
page.fillRect (MID-15, TOP-20, 30, 25); // top of hat }
CSC 1051 M.A. Papalaskari, Villanova University

36. Homework Read Sections 2.7-2.9 Do Exercises EX 2.13 -2.18
Always do all self-review exercises when you review material
Do Exercises EX
Many of the slides in this presentation are adapted from the slides accompanying “Java Software solutions, 7th edition”
by Lewis and Loftus. Copyright © 2012 Pearson Education, Inc.
CSC 1051 M.A. Papalaskari, Villanova University