2D Arrays in Java Image Manipulation

Interfaces Separating What from How Phones: Cars Dial 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 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

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

Pixels = 32 bits in RGB 32 bits in memory = 1 int Alpha = 31-24 30 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 = 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 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 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

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; -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…

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();

Horizontal Mirror Task: Java…

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();

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 Original Image Upcoming 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: (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

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

Curtains (Reveal) You can complete EITHER reveal or hide but not both Original Upcoming Image 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 Original Image Upcoming Image

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)

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 “#” …

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

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

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.

Source

Message

Encoded

Decoded

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 )