Slide 1
Announcements
• Quiz #3 replaced with small picture exercise.
• You have until Friday at 9 to complete the Quiz3 programming
homework. Just create a class named MyPicture and provide a
main we can run to see the picture you have created.
• Enable the submit feature for p4 as it has been disabled by
default.
• New wiki is up.
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 2
Fundamentals of Digital Images
Digital Image:
Pixel:
Color:
Color components:
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 3
Fundamentals of Digital Images
Color Rescaling:
int intRed = …
double doubleRed = ( double ) intRed / 255.0;
Color values: 0.0 = darkest; 1.0 = brightest.
Some Common colors:
R G B Color
R G B Color
1 1 1 White
0 0 0 Black
1 0 0 Red
0 1 1 Cyan (light blue)
0 1 0 Green
1 0 1 Magenta
0 0 1 Blue
1 1 0 Yellow
Mixtures:
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 4
Fundamentals of Digital Images
Picture Structure:
Width and height:
Pixel index:
Row indices: increase as we move down.
Column indices: increase as we move to the right.
w
0 1 2
h
0
1
2
…
…
w-1
Holds an RGB triple
row
h-1
column
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 5
cmsc131PictureLib
cmsc131PictureLib:
Picture: An interface
PictureUtil: Contains a number of utilities, most important the method
show( p ), for displaying a Picture p.
PictureColor: Represents the color of a picture pixel.
Constructor:
PictureColor myPixel = new PictureColor( 0.23, 1.0, 0.512 );
Accessors:
double r = myPixel.getRed( );
// set r = 0.23
System.out.println( myPixel.getBlue( ) ); // outputs: 0.512
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 6
JavaDoc Documentation on Web
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 7
JavaDoc Documentation on PictureUtil
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 8
Creating a Picture
Picture:
Picture interface:
int getWidth( ):
int getHeight( ):
PictureColor getColor( int x, int y ):
h
0
1
2
y
0 1 2
x
w-1
h-1
w
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 9
Creating a Picture
Step 1:
Step 2:
Step 3:
File: MyPicture.java
public class MyPicture
implements Picture {
// … instance data as needed
public MyPicture( )
{ … constructor as needed … }
}
Your driver class
public static void main( String[ ] args ) {
MyPicture p = new MyPicture( );
PictureUtil.show( p );
}
public int getHeight( ) { … }
public int getWidth( ) { … }
public PictureColor getColor( int x, int y )
{ … }
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 10
How it Works
Huh? How can we define an entire image by just implementing
three little methods (getWidth, getHeight, getColor)?
Answer: You do not need to; it is generated by PictureUtil.show( ).
PictureUtil.show( Picture p ): A generic method
– invokes p.getWidth( ) and p.getHeight( )
– asks Java to create an image of this size.
– fills in the pixel colors of this image
–
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 11
Examples
–
–
–
–
RedSquare:
FrenchFlag:
Inverse:
FlipLeftRight:
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 12
RedSquare
RedSquare:
– It has no instance data, and no need for a constructor.
– getWidth and getHeight:
– getColor:
PictureColor red = new PictureColor( 1, 0, 0 );
PictureColor.RED
PictureColor.GREEN
PictureColor.BLUE
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 13
RedSquare
Defining it:
public class RedSquare implements Picture {
public int getWidth( ) { return 150; }
public int getHeight( ) { return 150; }
public PictureColor getColor( int x, int y ) {
return PictureColor.RED;
}
}
Displaying it:
…
RedSquare redSquare = new RedSquare( );
PictureUtil.show( redSquare );
…
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 14
FrenchFlag
FrenchFlag:
– Constructor: takes the width (in pixels) as an argument, and saves it
in the instance variable width.
– Height: i
– getWidth, getHeight: access the width or height instance
variables.
– getColor( x, y ): returns
• blue
• white
• red
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 15
FrenchFlag
public class FrenchFlag implements Picture {
private int width;
private int height;
public FrenchFlag( int wid ) {
// constructor: height = 3/4 * width
width = wid;
height = (3 * width) / 4;
}
public int getWidth( ) { return width; }
public int getHeight( ) { return height; }
}
public PictureColor getColor( int x, int y ) {
if ( x < width/3 ) return PictureColor.BLUE;
else if ( x < 2*width/3 ) return PictureColor.WHITE;
else return PictureColor.RED;
}
…
FrenchFlag frenchie = new FrenchFlag( 150 );
PictureUtil.show( frenchie );
…
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 16
FrenchFlag
How does it work?
public PictureColor getColor( int x, int y ) {
if ( x < width/3 ) return PictureColor.BLUE;
else if ( x < 2*width/3 ) return PictureColor.WHITE;
else return PictureColor.RED;
}
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 17
Inverse
Inverse: Is given a base image in its constructor and creates an
image of the same size, but each pixel is replaced with its color
complement.
Example:
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 18
Inverse
public class Inverse implements Picture {
private Picture base;
public Inverse( Picture basePicture ) { base = basePicture; }
public int getWidth( ) { return base.getWidth( ); }
public int getHeight( ) { return base.getHeight( ); }
}
public PictureColor getColor( int x, int y ) {
PictureColor color = base.getColor( x, y );
return new PictureColor(
1.0 - color.getRed( ),
1.0 - color.getGreen( ),
1.0 - color.getBlue( ) );
}
…
Image cuteKitty = new Image( imageName );
Inverse psychoKitty = new Inverse( cuteKitty );
PictureUtil.show( psychoKitty );
…
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 19
FlipLeftRight
FlipLeftRight:
Constructor: is given a base image, and saves it.
getWidth, getHeight: access the base image’s width or height.
getColor: To generate the color of a given pixel (x, y), access the pixel
of the same row (y) in the base image, but reverse the column index
(x) by subtracting x from width-1.
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 20
FlipLeftRight
public class FlipLeftRight implements Picture {
private Picture base;
public FlipLeftRight( Picture basePicture ) { base = basePicture; }
public int getWidth( ) { return base.getWidth( ); }
public int getHeight( ) { return base.getHeight( ); }
}
public PictureColor getColor( int x, int y ) {
int flipX = base.getWidth( ) - 1 - x;
return base.getColor( flipX, y );
}
…
Image cuteKitty = new Image( imageName );
FlipLeftRight sinisterKitty = new FlipLeftRight( cuteKitty );
PictureUtil.show( sinisterKitty );
…
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________
Slide 21
Avoiding “OffOff-ByBy-1” Errors
Off-by-1:
Why did we use width-1 ?
flipX = width - 1 - x;
min:
max:
x
0
width – 1
(rather than)
flipX = width - x;
width – x
width (NO)
1 (NO)
width – 1 – x
width – 1 (YES)
0 (YES)
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
____________________________________________________________________