1. 2D Arrays in Java

2. Interfaces  Separating What from How  Phones: Dial  Cars 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 ABCDE 2012637 1824131527 261022261 172741813 29132875 2715141917 22831611 313071419 242930223 281120221 1614293125 302512279 1926231031 233152315 219153023 2528211129

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

9. Pixels = 32 bits in RGB 3131 3030 2929 2828 2727 2626 2525 2424 23232 2121 2020 1919 1818 1717 1616 1515 1414 1313 12121 1010 9876543210 32 bits in memory = 1 int Red = 23-16Green = 15 - 8 Blue = 7 - 0Alpha = 31-24 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)

10. How do you get binary numbers?  Base 10: 123 = 1x100 + 2x10 + 3x1 123 = 1x10 2 + 2x10 1 + 3x10 0  Base 2: 1010 = 1x8 + 0x4 + 1x2 + 0x1 1010 = 1x2 3 + 0x2 2 + 1x2 1 + 0x2 0 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

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 = 0x5555555555555555;//64 bits 0 = 00001 = 00012 = 00103 = 0011 4 = 01005 = 01016 = 01107 = 0111 8 = 10009 = 1001a = 1010b = 1011 c = 1100d = 1101e = 1110f = 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 = 0x0000000a;  System.out.println(test); 10 is printed  int test = 0xffffffff;  System.out.println(test); -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  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

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. Horizontal Mirror  Task:  Java…

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

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

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

22. Push Upcoming ImageOriginal Image

23. Uncover  You can complete EITHER cover or uncover but not both Upcoming ImageOriginal Image

24. Cover  You can complete EITHER cover or uncover but not both Original ImageUpcoming Image

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

26. Squares Upcoming Image

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

28. Curtains (Reveal)  You can complete EITHER reveal or hide but not both Upcoming ImageOriginalImage

29. Curtains (Hide)  You can complete EITHER reveal or hide but not both Original ImageImageUpcoming

30. 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 10 th, then t = 10/25 or 0.40

31. Upcoming Image Original Image Upcoming Image Shrink/Expand