1. 2D Arrays in Java
Image Manipulation

2. Interfaces Separating What from How Phones: Cars Dial
Gas, Break, Steer

3. 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

4. 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

5. 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

6. 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

7. A Magic Trick A B C D E 20 12 6 3 7 18 24 13 15 27 26 10 22 1 17 4 29 28 5 14 19 8 31 11 30 2 21 16 25 9 23

8. Bitwise logic 1 = true, 0 = false And Or
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

9. Pixels = 32 bits in RGB 32 bits in memory = 1 int Alpha = 31-2430 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1
Alpha = 31-24
Red = 23-16
Green =
Blue = 7 - 0
Bitwise operators in java can give us much faster and more general purpose
Access to the RGBA values:
Zero red = ( ) & (pixel’s int value)
Zero blue = ( ) & (pixel’s int value)
Zero green = ( ) & (pixel’s int value)
Similarly,
Full red = ( ) | (pixel’s int value)
Full blue = ( ) | (pixel’s int value)
Full green = ( ) | (pixel’s int value)

10. How do you get binary numbers?
Base 10:
123 = 1x x10 + 3x1
123 = 1x x x100
Base 2:
1010 = 1x8 + 0x4 + 1x2 + 0x1
1010 = 1x23 + 0x22 + 1x21 + 0x20
In base: = 10
Problem: We aren`t using just a few bits, we`re using 32 or 64 at a time in most cases

11. Hexidecimal
Programmers usually write binary values in hexidecimal for short hand.
Each value = 4 bits
In Java you can write hex values by using the 0x preface:
short onesThenZeros = 0xf0;//8 bits
int allOnes = 0xffffffff;//32 bits
long alternates = 0x ;//64 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

12. 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?

13. Signed integers
The fact that integers are both positive and negative gives us one more challenge.
int test = 0x a;
System.out.println(test);
10 is printed
int test = 0xffffffff;
-1 is printed

14. 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   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

15. 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

16. 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 …

17. Vertical Mirror
Task:
Java…

18. SimplePicture sp = new SimplePicture("caterpillar. jpg"); sp
SimplePicture sp = new SimplePicture("caterpillar.jpg"); sp.explore(); SimplePicture vm = new SimplePicture(sp.getWidth(), sp.getHeight()); int mid = sp.getWidth()/2; for( int r = 0; r < sp.getHeight(); r++ ) { for(int c = 0; c < mid; c++) vm.setBasicPixel(c, r, sp.getBasicPixel(c, r)); int offset = 0; for(int c = mid; c < sp.getWidth(); c++) vm.setBasicPixel(c, r, sp.getBasicPixel(mid - offset, r)); offset++; } vm.explore();

19. Horizontal Mirror
Task:
Java…

20. SimplePicture sp = new SimplePicture("redMotorcycle. jpg"); sp
SimplePicture sp = new SimplePicture("redMotorcycle.jpg"); sp.explore(); SimplePicture hm = new SimplePicture(sp.getWidth(), sp.getHeight()); int mid = sp.getHeight()/2; for( int r = 0; r < mid; r++ ) { for(int c = 0; c < sp.getWidth(); c++) hm.setBasicPixel(c, r, sp.getBasicPixel(c, r)); } int offset = 0; for( int r = mid; r < sp.getHeight(); r++ ) hm.setBasicPixel(c, r, sp.getBasicPixel(c, mid - offset)); offset++; hm.explore();

21. 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

22. 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

23. 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

24. Push
Upcoming Image
Original Image

25. Uncover You can complete EITHER cover or uncover but not both
Original Image
Upcoming Image

26. Cover You can complete EITHER cover or uncover but not both
Upcoming Image
Original Image

27. Clock It’s not as scary as it looks but it does take a bit of math
The center of the image is at:
(Cx = Width/2, Cy = Height/2)
For the point at location (x = column, y = row)
dx = x – Cx
dy = y – Cy
The angle between is:
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:
360/10 = 36
36, 72, 108, …, 360
If angleTo(row, column) < cutoff
Use upcoming image
Else
Use original image

28. Squares
Upcoming Image

29. 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
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
Upcoming Image

30. Curtains (Reveal) You can complete EITHER reveal or hide but not both
Original
Upcoming Image
Image

31. Curtains (Hide) You can complete EITHER reveal or hide but not both
Upcoming
Original Image
Image

32. 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

33. Shrink/Expand
Upcoming Image
Original Image
Upcoming Image

34. Extension #1
ASCII art
I’ve attached a sample ASCII art file of Mario from Super Mario Brothers to view.
Here is the original image (for comparison)

35. ASCII Art
One simple way to process an image to text is to make a correspondance between the grey scale value and a character
For example:
Greyscale = 240  light, replace with “.”
Greyscale = 100  replace with “[”
Greyscale = 3  dark, replace with “#” …

36. Steganography Secret messages hidden in an image
Feel free to explore but I only expect you to use a simple coding scheme
Only blue pixels are effected
All blue pixels will be even
When a coded image is embedded we can indicate this by changing the blue pixel to an odd number

37. Preprocessing
In my simple example you will encode a secret image like this:
Read the source file and write it into a new image of the same size using the following rule
If you encounter any odd valued blue pixel, subtract one from its value before writing to the new image
You should now have a copy of the image (indistinguishable to the eye) but all blue pixels have an even value

38. Encoding
Using a simple image editor, create an image the same size as the source image
Make the background white
Type in a message using black pixels
Now you must combine the two images in the following way:
If the pixel with the hidden message is black, set the corresponding blue pixel in the coded image to an odd number by adding 1.
Otherwise use the pixel as is.

39. Source

40. Message

41. Encoded

42. Decoded

43. Your turn Use the picture lab to create an ASCII program
Write a program that will take a source image and a secret message and encode them into a new image using steganography (can be a different method than suggested)
Your program should also be able to decode the coded image into the hidden message.
I was getting errors when I used a relative path for my file. It was resolved by using the absolute path
myPic.jpg vs H:\\Desktop\\myPic.jpg
The method in SimplePicture is write( String fileName )