2D Arrays in Java
Interfaces
Separating What from How
 Phones:

 Dial

Cars
 Gas, Break, Steer
DigitalPicture Interface

















public String getFileName(); // get the file name that the picture came from
public String getTitle(); // get the title of the picture
public void setTitle(String title); // set the title of the picture
public int getWidth(); // get the width of the picture in pixels
public int getHeight(); // get the height of the picture in pixels
public Image getImage(); // get the image from the picture
public BufferedImage getBufferedImage(); // get the buffered image
public int getBasicPixel(int x, int y); // get the pixel information as an int
public void setBasicPixel(int x, int y, int rgb); // set the pixel information
public Pixel getPixel(int x, int y); // get the pixel information as an object
public Pixel[] getPixels(); // get all pixels in row-major order
public Pixel[][] getPixels2D(); // get 2-D array of pixels in row-major order
public void load(Image image); // load the image into the picture
public boolean load(String fileName); // load the picture from a file
public void show(); // show the picture
public void explore(); // explore the picture
public boolean write(String fileName); // write out a file
Interfaces

Interfaces (usually) contain only public
abstract methods
 Methods with a declaration (signature)
 But no definition (body)
The implementer is left to define the
method bodies
 In this way you can talk on any phone
you like…

 You don’t need to rebuild the entire phone
system every time a new one is added
Interfaces

Cannot be initiated
 DigitalPicture p = new DigitalPicture();

Can be a reference to an implementing class
 DigitalPicture p = new SimplePicture();

Java allows for abstract methods in classes
 Class must be declared abstract
○ public abstract class Shape
○ Cannot initiate abstract classes
 must use a subclass that is not abstract
 Method also must be declared abstract
○ public abstract void draw();
 A subclass must either implement the abstract
methods or itself be declared abstract
Image Manipulation Demo

Goal:
 Write a method that will set the red channel
of all pixels to zero
 Write a method that will set the green
channel of all pixels to zero
 Write a method that will set the blue channel
of all pixels to zero
A Magic Trick
A
20
18
26
17
29
27
22
31
24
28
16
30
19
23
21
25
B
12
24
10
27
13
15
8
30
29
11
14
25
26
31
9
28
C
6
13
22
4
28
14
31
7
30
20
29
12
23
5
15
21
D
3
15
26
18
7
19
6
14
22
2
31
27
10
23
30
11
E
7
27
1
13
5
17
11
19
3
21
25
9
31
15
23
29
Bitwise logic


1 = true, 0 = false
And
 1&1=1
 0&X=0

Or
 0|0=0
 1|X=1

Xor – exclusive or (one but not both)
 1 ^ 0 = 1, 0 ^ 1 = 1
 1 ^ 1 = 0, 0 ^ 0 = 0

Not
 ~1 = 0
 ~0 = 1
Pixels = 32 bits in RGB
32 bits in memory = 1 int
3 3 2 2 2 2 2 2 2 2 2 2 1 1 1 1 1 1 1 1 1 1 9 8 7 6 5 4 3 2 1 0
1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0
Alpha = 31-24
Red = 23-16
Green = 15 - 8
Blue = 7 - 0
Bitwise operators in java can give us much faster and more general purpose
Access to the RGBA values:
Zero red = (11111111000000001111111111111111) & (pixel’s int value)
Zero blue = (11111111111111110000000011111111) & (pixel’s int value)
Zero green = (11111111111111111111111100000000) & (pixel’s int value)
Similarly,
Full red = (00000000111111110000000000000000) | (pixel’s int value)
Full blue = (00000000000000001111111100000000) | (pixel’s int value)
Full green = (00000000000000000000000011111111) | (pixel’s int value)
How do you get binary numbers?

Base 10:
 123 = 1x100 + 2x10 + 3x1
 123 = 1x102 + 2x101 + 3x100

Base 2:
 1010 = 1x8 + 0x4 + 1x2 + 0x1
 1010 = 1x23 + 0x22 + 1x21 + 0x20
 In base: 8 + 2 = 10

Problem: We aren`t using just a few bits,
we`re using 32 or 64 at a time in most
cases
Hexidecimal

Programmers usually write binary values in
hexidecimal for short hand.
 Each value = 4 bits

0 = 0000
1 = 0001
2 = 0010
3 = 0011
4 = 0100
5 = 0101
6 = 0110
7 = 0111
8 = 1000
9 = 1001
a = 1010
b = 1011
c = 1100
d = 1101
e = 1110
f = 1111
In Java you can write hex values by using the
0x preface:
 short onesThenZeros = 0xf0;//8 bits
 int allOnes = 0xffffffff;//32 bits
 long alternates = 0x5555555555555555;//64 bits
AP style questions
How many unsigned values can be
represented with 16 bits?
 How many signed values can be
represented with 32 bits?
 How many colors are possible with 8
bits for each of RGB?

Signed integers
The fact that integers are both positive
and negative gives us one more
challenge.
 int test = 0x0000000a;
 System.out.println(test);

 10 is printed
int test = 0xffffffff;
 System.out.println(test);

 -1 is printed
2`s complement

Later in CS you`ll learn about how positives
and negatives are stored in the computer
using 2`s complement
 Leading bit:
○ 1  negative value is stored
○ 0  positive value is stored
 1`s complement: 1100  0011
 2’s complement:
○ 1’s complement and add 1
○ 1100  0011 + 1  0100 (–4)

For our purposes you can just use hex for your
masks and not worry too much about what
integer is being stored
 Hex values are loaded in as they appear
Image masks
Let’s have a look at how we can use the
bitwise AND operator, &, to manipulate
the pixels
 Other bitwise operators

 NOT: ~
 OR: |
 XOR: ^

We can do a lot more than just zero out
the channel now with a single method
Your Turn… (Choose 3)

Create a method to:
 Apply a bitwise mask (pick one of the masks below)
○ OR mask to each pixel’s int value using the | operator
○ XOR mask to each pixel’s int value using the ^ operator
 Negate the color of a pixel
○ This is done by taking the (value) in each channel and replacing it by
(255 – value)
 Lighten (or Darken) the image by a given value
○ Positive values will lighten the image, negatives will darken it
○ Add the value given to each RGB value in the pixel
 Make a grayscale image
○ set the RGB value of each pixel to be the average RGB value
○ RGB(0,10,80)  RGB(30, 30, 30)
 Replace the pixel by the largest RGB value
○ Zero out the other channels for that pixel
○ RGB(72, 58, 9)  RGB(72, 0, 0);
 Scramble the RGB values at each pixel
○ Randomly move them so that RGB  GBR or BRG or…
○ RGB(1,2,3)  RGB(3,2,1) or RGB(2,1,3) or …
Vertical Mirror

Task:

Java…
Horizontal Mirror

Task:

Java…
Your Turn…
Flip Vertically
 Flip Horizontally
 Rotate

 90 degrees counter clockwise
○ Row[n] becomes columns[n]
 This may change the dimensions of the new
picture… be careful
 Hint: This is very similar to something you’ve
already done called transposing
Transitions
Changing from one image/slide to next
 Many forms are possible to try
 Let’s take a look at

 public interface ImageBlender
 public class Dissolve
 public class TransitionMaker

Quick math:
 Absolute Position = row*columns + column
Your Turn…
In the final demonstration you will have
to implement 2 transitions
 The slides that follow show you some
example transitions
 You may assume the image sizes will be
the same when making transitions

 In practice, the smaller image is padded with
pixels until it is the same size as the larger
image
Push
Upcoming Image
Original Image
Uncover

You can complete EITHER cover or
uncover but not both
Upcoming
Original Image
Image
Cover

You can complete EITHER cover or
uncover but not both
Upcoming Image
Original Image
Clock


It’s not as scary as it looks but it does take a bit of math
The center of the image is at:


For the point at location (x = column, y = row)




360/10 = 36
36, 72, 108, …, 360
If angleTo(row, column) < cutoff


Math.toDegrees(Math.atan2(dy, dx))
Range will be from -180 to 180 so you will want to shift it
Math.toDegrees(Math.atan2(dy, dx)) + 180;//0 to 360
As you loop through the frames you are allowing more of the pixels
from the upcoming image based on what angle they make
For example if you need 10 frames then the angle cut offs are:



dx = x – Cx
dy = y – Cy
The angle between is:




(Cx = Width/2, Cy = Height/2)
Use upcoming image
Else

Use original image
Squares
Upcoming Image
Random Bars

Each frame will have it’s own bar filled from
the upcoming image
 2 seconds = 60 frames = 60 bars
Create an array {0,1,2,…,59}
 Shuffle the values in the array

Upcoming Image
 use Math.random()
 swap two random indexes

Now you can loop through the array and
know who’s turn it is to draw the bar
Curtains (Reveal)

You can complete EITHER reveal or
hide but not both
Original
UpcomingImage
Image
Curtains (Hide)

You can complete EITHER reveal or
hide but not both
Upcoming
Original Image
Image
Fade



This slide did the Fade transition
Original RGB makes changes into the
upcoming RGB at each pixel
One way to calculate the new pixel is by using
a parameterized equation
 P’ = upcoming pixel
 P = original pixel
 Transition pixel = P’*t + P*(1 – t)
○ For each RGB channel
 t  [0,1], think about it like the percentage of time
elapsed
 If the transition has 25 frames, and we are
processing the 10th, then t = 10/25 or 0.40
Shrink/Expand
Upcoming Image
Upcoming
Image
Original Image