How are images represented in a computer?
I
Image
Obj
Objects
ts
Tue. Apr. 19, 2011 (Mon. schedule)
CS111 Computer Programming
Department of Computer Science
Wellesley College
Image Objects
Digital Images
Colored Pixels
Images are often represented in a computer as a 2-dimensional
(2D) array of pixels (picture elements).
In black & white images, each pixel is either black or white.
20-2
In colored images, each pixel has a color.
38 pixels high
44 pixels wide
50 x 50
Image Objects
20-3
Image Objects
20-4
Representing Pixel Colors
Image Formats
Instances of the Java Color class have red/green/blue
(RGB) components ,each in the range 0 to 255.*
Images can be encoded in different ways (e.g., JPEG, GIF, BMP, PNG).
An RGB triple can also be represented as a negative
integer that falls in the range -16777216
16777216 to -1.
1. *
One way to represent images is as a 2D array in which each pixel is
encoded as an integer.
integer
You can play with these representations in the
ColorPad applet.
-1
0
0 -1 -1
0
0 -1 -1
0
0
0
0
0
0 -1
-1
0
0 -1 -1
0
0 -1 -1
0
0
0
0
0
0 -1
-1
1
0
0 -1
1 -1
1
0
0 -1
1 -1
1 -1
1 -1
1
0
0 -1
1 -1
1 -1
1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
Color
R
G
B
int
black
0
0
0
-16777216 or 0†
white
255
255
255
-1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
red
d
255
0
0
-65536
65536
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
green
0
255
0
-16711936
-1
0
0
0
0
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0
0
0
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
blue
0
0
255
-16776961
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
yellow
255
255
0
-256
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
magenta
255
0
255
-65281
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
cyan
0
255
255
-16711681
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-3644366
-1
0
0 -1 -1
0
0 -1 -1
0
0
0
0
0
0 -1
-1
1
0
0 -1
1 -1
1
0
0 -1
1 -1
1
0
0
0
0
0
0 -1
1
bagel
g brown
200
100
50
* Take CS240 to understand these ranges!
† O is a Color synonym for -16777216.
Image Objects
20-5
Checkerboard as 2D array
16 x 16
Image Objects
20-6
Mona Lisa as 2D array
Pixels starting from the upper left corner:
-65536
-65536
-65536
-65536
-256
-256
-256
-256
-65536
-256
-256
-65536
-65536
-256
-256
-256
-256
-65536
-65536
-256
-256
-65536
-65536
-256
-256
-65536
-65536
-65536
-65536
-256
-256
-65536
-65536
-65536
-256
-256
-65536
-65536
-256
-256
-65536
65536
-65536
65536
-256
256
-256
256
-65536
65536
-65536
65536
-256
256
-256
256
-256
-256
-65536
-65536
-256
-256
-65536
-65536
-256
-256
-65536
-65536
-256
-256
-65536
-65536
-10389929
-10522028
-10720177
-11049399
…
-10324649
-10522028
-10785970
-11049912
…
-10259372
-10456751
-10720436
-10921927
…
-10259633
-10391732
-10589881
-10853310
…
.
.
.
.
.
.
.
.
.
.
.
.
8x8
520 rows x 334 columns
l
Image Objects
20-7
Image Objects
20-8
Mirror Image
Creating a Class
How would you mirror (i.e., flipHorizontally) an image for which
each pixel was represented as an integer?
We want to define a Pic class that encodes the data and operations
relevant to an image object. What would such a class look like?
(You will flesh this out in PS9.)
-1
0
0 -1 -1
0
0 -1 -1
0
0
0
0
0 -1
-1
0
0 -1 -1
0
0 -1 -1
0
0
0
0
0
0 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0
0
0
0
0 -1 -1 -1 -1
0
-1
0
0
0
0
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1 -1 -1
0
0 -1 -1 -1
-1
0
0 -1 -1
0
0 -1 -1
0
0
0
0
0
0 -1
-1
0
0 -1 -1
0
0 -1 -1
0
0
0
0
0
0 -1
0 -1 -1 -1
?
Image Objects
20-9
Image Objects 20-10
Some Helpful Methods (2)
Some Helpful Methods
We ve provided a few methods in the class PicOps that may be
We’ve
useful when designing and testing your image class.
/* Returns a String representing the path to the
* location of the source/class files.
*/
/
public static String getFolder();
/* In a new frame with the given name,
* displays
p y the corresponding
p
g RGB image
g
* specified by the 2D array of ints.
*/
public static void display (String name, int[][] pix);
/* I
In a new f
frame, di
displays
l
th
the corresponding
di
RGB i
image
* specified by the 2D array of ints.
*/
public static void display (int[][] pix);
/* In a new frame, displays the corresponding RGB image
* specified by the given image file name. The specified
* image file can be of type JPEG, GIF, PNG, BMP, or a
* TXT file containing a 2D integer array representation
* of an image
image.
*/
public static void display (String imageFileName);
Image Objects 20-11
We’ve provided a few methods in the class PicOps that may be
useful
f l when
h designing
d i i and
d ttesting
ti your iimage class.
l
/* Given the name of a TXT file containing a 2D integer
* array representation of an RGB image, returns a new
* 2D integer array that corresponds to the RGB image
* represented in the TXT file.
*/
public static int[][] readInTextFile(String textFileName)
throws FileNotFoundException;
/* Outputs the given 2D integer array to a TXT file with
* the given name, so that the TXT file contains a 2D
* integer array representation of an RGB image.
*/
public static void outputTextFile(String textFileName, int[][] pix)
throws FileNotFoundException;
/* Given an image file of type JPEG, GIF, PNG, or BMP,
* outputs a TXT file containing a 2D integer array
* representation of the RGB image.
*/
public static void toTextFile (String imageFileName);
/* Outputs a JPEG fil
/
file corresponding
di
to the
h RGB i
image represented
d i
in
* the given TXT file as a 2D integer array.
*/
Image Objects 20-12
public static void textFileToJPEG(String textFileName);