1. ACM SIGCSE 2005: Multimedia Construction Projects Mark Guzdial and Barb Ericson College of Computing Georgia Institute of Technology guzdial@cc.gatech.edu ericson@cc.gatech.edu http://www.cc.gatech.edu/~mark.guzdial Funding to support this work came from the National Science Foundation, Georgia Tech's College of Computing, Georgia’s Department of Education, GVU Center, Al West Fund, and President's Undergraduate Research Award.

2. Plan-Go Get Your Laptop for Play! 4-4:20: Introductions  What are you looking for? 4:20-4:40 (20 mins)  What’s on your CD  Why media computation  What we’re doing in the courses at Georgia Tech 4:40-5:30: Media manipulations in Python (45 minutes) 5:30-5:45: Break 5:45-7:30 Media manipulations in Java (45 minutes) 6:30-7: Group vote  Option 1: You play! We walk around and help you.  Option 2: Introducing objects into a Java CS1 media approach: Using Turtles  Option 3: Introducing lists and trees in Java via a media approach.

3. Introductions Your name Where you’re from What you teach Where can you incorporate media in what you teach List the languages you teach and What do you want to get out of this workshop (esp. any particular techniques)?

4. What’s on your CD CS1-Python materials  Pre-release PDF of Media Computation book in Jython  Course slides  MediaTools: Squeak-based media exploration tools  Jython Environment for Students (JES)  Instructor Resources (how to tune for different places, grading tool) CS1-Java materials  Pre-release PDF of Media Computation book in Java  Some workshop slides  Classes  MediaSources: Royalty-free JPEG and WAV files

5. What’s on your CD - Continued CS2-Java materials  Course notes  Classes and course slides for exploring lists and trees in media context Squeak  Squeak for Mac and WIndows  Squeak computer music essays  Squeak for media computation PowerPoint Material for this workshop  Workshop slides

6. A Computer Science Undergraduate Degree is Facing Challenging times We’re losing students, at an increasing rate.  Women and minority percentage of enrollment dropping  High failure rates in CS1 (35-50% or more)  Fewer applications into CS “All programming jobs going overseas”  Research results: “Tedious,” “boring,” “lacking creativity,” “asocial” All of this at a time when we recognize the critical role of IT in our economy, in all jobs

7. Strategy: Ubiquitous Computing Education Everyone needs computing, and we should be able to teaching computing that everyone cares about.  Make computing relevant and accessible to students.  Minors, certificates, joint degrees, alternative paths to the major. Created a CS minor Created a BS in Computational Media

8. Computer science is more important than Calculus In 1961, Alan Perlis argued that computer science is more important in a liberal education than calculus  Explicitly, he argued that all students should learn to program. Calculus is about rates, and that’s important to many. Computer science is about process, which is important to everyone

9. CS1315 Introduction to Media Computation Started with 121 students in Spring 2003, and averaging 300/term since then  2/3 female in Spring 2003 MediaComp Overall, CS1315 has been 51% female  Required in Architecture, Management, Ivan Allen College of Liberal Arts, and Biology Focus: Learning programming and CS concepts within the context of media manipulation and creation  Converting images to grayscale and negatives, splicing and reversing sounds, writing programs to generate HTML, creating movies out of Web-accessed content.  Computing for communications, not calculation

10. Python as the programming language Huge issue Use in commercial contexts authenticates the choice  IL&M, Google, Nextel, etc. Minimal syntax Looks like other programming languages  Potential for transfer

11. Rough overview of Syllabus Defining and executing functions Pictures  Psychophysics, data structures, defining functions, for loops, if conditionals  Bitmap vs. vector notations Sounds  Psychophysics, data structures, defining functions, for loops, if conditionals  Sampled sounds vs. synthesized, MP3 vs. MIDI Text  Converting between media, generating HTML, database, and networking  A little trees (directories) and hash tables (database) Movies Then, Computer Science topics (last 1/3 class)

12. Some Computer Science Topics inter-mixed We talk about algorithms across media  Sampling a picture (to scale it) is the same algorithm as sampling a sound (to shift frequency)  Blending two pictures (fading one into the other) and two sounds is the same algorithm. We talk about representations and mappings (Goedel)  From samples to numbers (and into Excel), through a mapping to pixel colors We talk about design and debugging  But they mostly don’t hear us

13. Computer Science Topics as solutions to their problems “Why is PhotoShop so much faster?”  Compiling vs. interpreting  Machine language and how the computer works “Writing programs is hard! Are there ways to make it easier? Or at least shorter?”  Object-oriented programming  Functional programming and recursion “Movie-manipulating programs take a long time to execute. Why? How fast/slow can programs be?”  Algorithmic complexity

14. Does this motivate and engage students? Homework assignments suggest they were.  Shared on-line in collaborative web space (CoWeb) Some students reported writing programs outside of class for fun.

15. Does this motivate and engage students?

16. SoupStephen Hawking

17. Example Student Work -Shared on the CoWeb Gallery The author of this collage via IM as soon as she was done: “Well, I looked at last years’ collages, and I certainly can’t be beat.”

18. Relevance through Data-first Computing Real users come to a user with data that they care about, then they (unwillingly) learn the computer to manipulate their data as they need. “Media Computation” works like that.  Students do use their own pictures as starting points for manipulations. Starting in the second week of the course!  Some students reversed sounds looking for hidden messages.

19. Results: Reduced Drop Rates Women and minorities succeed in this class at the same rate as men. 10-25% each term say that they’d like an additional computing class. Women and minorities succeed in this class at the same rate as men. 10-25% each term say that they’d like an additional computing class. Enrollment Success Rate Georgia Tech’s CS 1 2000 - 2002 (average) 93071.2% Media Computation Spring 200312090.0% Fall 200330386.5% Spring 200439586.9% Summer 200412073.3% Fall 200436680.3%

20. Results: Change in Attitudes On course relevance: “I dreaded CS, but ALL of the topics thus far have been applicable to my future career (and personal) plans—there isn't anything I don't like about this class!” On creativity and social aspects in Computer Science: “I just wish I had more time to play around with that and make neat effects. But JES [course development environment] will be on my computer forever, so… that’s the nice thing about this class is that you could go as deep into the homework as you wanted. So, I’d turn it in and then me and my roommate would do more after to see what we could do with it.”

21. Results: Follow-on Email Survey 19% had written a Python program on their own since the class had ended. 27% had edited media that they hadn’t previously. “Definitely makes me think of what is going on behind the scenes of such programs like Photoshop and Illustrator.” “I feel more comfortable around computers and like I could learn and understand other computer programming languages more easily.”

22. Adoption Elsewhere University of Illinois-Chicago University of California, Santa Barbara Gainesville College DePauw University Enrollment Success Rate Gainesville’s CSCI 1100 2000 - 2003 (average) 2870.2% Media Computation Summer 2003977.8% Fall 20033984.6% Spring 20042277.3% Summer 20041190.9%

23. A Multimedia CS2 in Java Follow-on course started Spring 2005: Representing Structure and Behavior.  NOT required!  75% female  A mix of African-American, Hispanic, Native American students. Teaching linked lists, trees, stacks, and queues in a media context.  Modeling, scene graphs, linked lists of music elements, etc.

24. Example Work from Follow-On Class Butterflies are digitally modified copies of the original, inserted into drawing

25. Next steps… Moving beyond Undergrad Teaching Georgia’s HS teachers how to teach programming  Using a MediaComp approach for intro programming After all, teachers are typically non-CS majors…  Helping the State certify CS teachers (for No Child Left Behind Act), and lead to more CS Advanced Placement teachers Developing two workshops  From no-programming to teaching-programming in 2 weeks  From teaching-programming to teaching-Java-AP in 1 week  75 teachers during Summer 2004

26. Image Processing We’re going to use Python as a kind of pseudo- code. Goals:  Give you the basic understanding of image processing, including psychophysics of sight,  Identify some interesting examples to use

27. We perceive light different from how it actually is Color is continuous  Visible light is in the wavelengths between 370 and 730 nanometers That’s 0.00000037 and 0.00000073 meters But we perceive light with color sensors that peak around 425 nm (blue), 550 nm (green), and 560 nm (red). Our brain figures out which color is which by figuring out how much of each kind of sensor is responding One implication: We perceive two kinds of “orange” — one that’s spectral and one that’s red+yellow (hits our color sensors just right) Dogs and other simpler animals have only two kinds of sensors  They do see color. Just less color.

28. Luminance vs. Color We perceive borders of things, motion, depth via luminance  Luminance is not the amount of light, but our perception of the amount of light.  We see blue as “darker” than red, even if same amount of light. Much of our luminance perception is based on comparison to backgrounds, not raw values. Luminance is actually color blind. Completely different part of the brain.

29. Digitizing pictures as bunches of little dots We digitize pictures into lots of little dots Enough dots and it looks like a continuous whole to our eye  Our eye has limited resolution  Our background/depth acuity is particulary low Each picture element is referred to as a pixel Pixels are picture elements  Each pixel object knows its color  It also knows where it is in its picture

30. Encoding color Each pixel encodes color at that position in the picture Lots of encodings for color  Printers use CMYK: Cyan, Magenta, Yellow, and blacK.  Others use HSB for Hue, Saturation, and Brightness (also called HSV for Hue, Saturation, and Brightness We’ll use the most common for computers  RGB: Red, Green, Blue

31. RGB In RGB, each color has three component colors:  Amount of redness  Amount of greenness  Amount of blueness Each does appear as a separate dot on most devices, but our eye blends them. In most computer-based models of RGB, a single byte (8 bits) is used for each  So a complete RGB color is 24 bits, 8 bits of each

32. Encoding RGB Each component color (red, green, and blue) is encoded as a single byte Colors go from (0,0,0) to (255,255,255)  If all three components are the same, the color is in greyscale (50,50,50) at (2,2)  (0,0,0) (at position (1,2) in example) is black  (255,255,255) is white

33. Basic Picture Functions makePicture(filename) creates and returns a picture object, from the JPEG file at the filename show(picture) displays a picture in a window We’ll learn functions for manipulating pictures later, like getColor, setColor, and repaint

34. Writing a recipe: Making our own functions To make a function, use the command def Then, the name of the function, and the names of the input values between parentheses (“(input1)”) End the line with a colon (“:”) The body of the recipe is indented (Hint: Use two spaces) Your function does NOT exist for JES until you load it

35. Use a loop! Our first picture recipe def decreaseRed(picture): for p in getPixels(picture): value=getRed(p) setRed(p,value*0.5) Used like this: >>> file="/Users/guzdial/mediasources/barbara.jpg" >>> picture=makePicture(file) >>> show(picture) >>> decreaseRed(picture) >>> repaint(picture)

36. def negative(picture): for px in getPixels(picture): red=getRed(px) green=getGreen(px) blue=getBlue(px) negColor=makeColor(255-red,255-green,255-blue) setColor(px,negColor) def clearRed(picture): for pixel in getPixels(picture): setRed(pixel,0) def greyscale(picture): for p in getPixels(picture): redness=getRed(p) greenness=getGreen(p) blueness=getBlue(p) luminance=(redness+blueness+greenness)/3 setColor(p, makeColor(luminance,luminance,luminance))

37. Increasing Red def increaseRed(picture): for p in getPixels(picture): value=getRed(p) setRed(p,value*1.2) What happened here?!? Remember that the limit for redness is 255. If you go beyond 255, all kinds of weird things can happen: Wrap around

38. Clearing Blue def clearBlue(picture): for p in getPixels(picture): setBlue(p,0)

39. Creating a negative Let’s think it through  R,G,B go from 0 to 255  Let’s say Red is 10. That’s very light red. What’s the opposite? LOTS of Red!  The negative of that would be 245: 255-10 So, for each pixel, if we negate each color component in creating a new color, we negate the whole picture.

40. Recipe for creating a negative def negative(picture): for px in getPixels(picture): red=getRed(px) green=getGreen(px) blue=getBlue(px) negColor=makeColor( 255-red, 255-green, 255-blue) setColor(px,negColor)

41. Converting to greyscale We know that if red=green=blue, we get grey  But what value do we set all three to? What we need is a value representing the darkness of the color, the luminance There are lots of ways of getting it, but one way that works reasonably well is dirt simple—simply take the average:

42. Converting to grayscale def grayScale(picture): for p in getPixels(picture): intensity = (getRed(p)+getGreen(p)+getBlue(p))/3 setColor(p,makeColor(intensity,intensity,intensity))

43. Replacing colors using IF We don’t have to do one-to-one changes or replacements of color We can use if to decide if we want to make a change.  We could look for a range of colors, or one specific color.  We could use an operation (like multiplication) to set the new color, or we can set it to a specific value. It all depends on the effect that we want.

44. Posterizing: Reducing range of colors

45. Posterizing: How we do it We look for a range of colors, then map them to a single color.  If red is between 63 and 128, set it to 95  If green is less than 64, set it to 31 ... It requires a lot of if statements, but it’s really pretty simple. The end result is that a bunch of different colors, get set to a few colors.

46. Posterizing function def posterize(picture): #loop through the pixels for p in getPixels(picture): #get the RGB values red = getRed(p) green = getGreen(p) blue = getBlue(p) #check and set red values if(red < 64): setRed(p, 31) if(red > 63 and red < 128): setRed(p, 95) if(red > 127 and red < 192): setRed(p, 159) if(red > 191 and red < 256): setRed(p, 223) #check and set green values if(green < 64): setGreen(p, 31) if(green > 63 and green < 128): setGreen(p, 95) if(green > 127 and green < 192): setGreen(p, 159) if(green > 191 and green < 256): setGreen(p, 223) #check and set blue values if(blue < 64): setBlue(p, 31) if(blue > 63 and blue < 128): setBlue(p, 95) if(blue > 127 and blue < 192): setBlue(p, 159) if(blue > 191 and blue < 256): setBlue(p, 223)

47. Mirroring Imagine a mirror horizontally across the picture, or vertically What would we see? How do generate that digitally?  We simply copy the colors of pixels from one place to another

48. Mirroring a picture Slicing a picture down the middle and sticking a mirror on the slice Do it by using a loop to measure a difference  The index variable is actually measuring distance from the mirrorpoint Then reference to either side of the mirror point using the difference

49. Recipe for mirroring def mirrorVertical(source): mirrorpoint = int(getWidth(source)/2) for y in range(1,getHeight(source)): for x in range(1,mirrorpoint): p = getPixel(source, x+mirrorpoint,y) p2 = getPixel(source, mirrorpoint-x,y) c = getColor(p2) setColor(p,c)

50. Can we do it with a horizontal mirror? def mirrorHorizontal(source): mirrorpoint = int(getHeight(source)/2) for y in range(1,mirrorpoint): for x in range(1,getWidth(source)): p = getPixel(source,x,y+mirrorpoint) p2 = getPixel(source,x,mirrorpoint-y) setColor(p,getColor(p2))

51. What if we wanted to copy bottom to top? Very simple: Swap the p and p2 in the bottom line  Copy from p to p2, instead of from p2 to p def mirrorHorizontal(source): mirrorpoint = int(getHeight(source)/2) for y in range(1,mirrorpoint): for x in range(1,getWidth(source)): p = getPixel(source,x,y+mirrorpoint) p2 = getPixel(source,x,mirrorpoint-y) setColor(p2,getColor(p))

52. Doing something useful with mirroring Mirroring can be used to create interesting effects, but it can also be used to create realistic effects. Consider this image that from a trip to Athens, Greece.  Can we “repair” the temple by mirroring the complete part onto the broken part?

53. Figuring out where to mirror Use MediaTools to find the mirror point and the range that we want to copy

54. Program to mirror the temple def mirrorTemple(): source = makePicture(getMediaPath("temple.jpg")) mirrorpoint = 277 lengthToCopy = mirrorpoint - 14 for x in range(1,lengthToCopy): for y in range(28,98): p = getPixel(source,mirrorpoint-x,y) p2 = getPixel(source,mirrorpoint+x,y) setColor(p2,getColor(p)) show(source) return source setMediaPath() and getMediaPath(baseName) allow us to set a media folder

55. Did it really work? It clearly did the mirroring, but that doesn’t create a 100% realistic image. Check out the shadows: Which direction is the sun coming from?

56. Removing a background: Chromakey Have a background of a known color  Some color that won’t be on the person you want to mask out  Pure green or pure blue is most often used  I used my son’s blue bedsheet This is how the weather people seem to be in front of a map— they’re actually in front of a blue sheet.

57. Chromakey recipe def chromakey(source,bg): # source should have something in front of blue, bg is the new background for x in range(1,getWidth(source)): for y in range(1,getHeight(source)): p = getPixel(source,x,y) # My definition of blue: If the redness + greenness < blueness if (getRed(p) + getGreen(p) < getBlue(p)): #Then, grab the color at the same spot from the new background setColor(p,getColor(getPixel(bg,x,y)))

58. Example results

59. Sound Processing Again, we’re going to use Python as a kind of pseudo-code. Goals:  Give you the basic understanding of audio processing, including psycho-acoustics,  Identify some interesting examples to use.

60. How sound works: Acoustics, the physics of sound Sounds are waves of air pressure  Sound comes in cycles  The frequency of a wave is the number of cycles per second (cps), or Hertz (Complex sounds have more than one frequency in them.)  The amplitude is the maximum height of the wave

61. Volume and pitch: Psychoacoustics, the psychology of sound Our perception of volume is related (logarithmically) to changes in amplitude  If the amplitude doubles, it’s about a 3 decibel (dB) change.  A decibel is a ratio between two intensities: 10 * log 10 (I 1 /I 2 )  As an absolute measure, it’s in comparison to threshold of audibility 0 dB can’t be heard. Normal speech is 60 dB. A shout is about 80 dB Our perception of pitch is related (logarithmically) to changes in frequency  Higher frequencies are perceived as higher pitches  We can hear between 5 Hz and 20,000 Hz (20 kHz)  A above middle C is 440 Hz

62. Digitizing Sound: How do we get that into numbers? Remember in calculus, estimating the curve by creating rectangles? We can do the same to estimate the sound curve  Analog-to-digital conversion (ADC) will give us the amplitude at an instant as a number: a sample  How many samples do we need?

63. Nyquist Theorem We need twice as many samples as the maximum frequency in order to represent (and recreate, later) the original sound. The number of samples recorded per second is the sampling rate  If we capture 8000 samples per second, the highest frequency we can capture is 4000 Hz That’s how phones work  If we capture more than 44,000 samples per second, we capture everything that we can hear (max 22,000 Hz) CD quality is 44,100 samples per second

64. Digitizing sound in the computer Each sample is stored as a number (two bytes) What’s the range of available combinations?  16 bits, 2 16 = 65,536  But we want both positive and negative values To indicate compressions and rarefactions.  What if we use one bit to indicate positive (0) or negative (1)?  That leaves us with 15 bits  15 bits, 2 15 = 32,768  One of those combinations will stand for zero We’ll use a “positive” one, so that’s one less pattern for positives Each sample can be between -32,768 and 32,767

65. Basic Sound Functions makeSound(filename) creates and returns a sound object, from the WAV file at the filename play(sound) makes the sound play (but doesn’t wait until it’s done) blockingPlay(sound) waits for the sound to finish We’ll learn more later like getSample and setSample

66. Working with sounds We’ll use pickAFile and makeSound as we have before.  But now we want.wav files We’ll use getSamples to get all the sample objects out of a sound We can also get the value at any index with getSampleValueAt Sounds also know their length (getLength) and their sampling rate (getSamplingRate) Can save sounds with writeSoundTo(sound,”file.wav”)

67. Recipe to Increase the Volume def increaseVolume(sound): for sample in getSamples(sound): value = getSample(sample) setSample(sample,value * 2) Using it: >>> f="/Users/guzdial/mediasources/gettysburg10.wav" >>> s=makeSound(f) >>> increaseVolume(s) >>> play(s) >>> writeSoundTo(s,"/Users/guzdial/mediasources/louder-g10.wav")

68. Decreasing the volume def decreaseVolume(sound): for sample in getSamples(sound): value = getSample(sample) setSample(sample,value * 0.5) This works just like increaseVolume, but we’re lowering each sample by 50% instead of doubling it.

69. Maximizing volume How do we get maximal volume? It’s a three-step process:  First, figure out the loudest sound (largest sample).  Next, figure out a multiplier needed to make that sound fill the available space. We want to solve for x where x * loudest = 32767 So, x = 32767/loudest  Finally, multiply the multiplier times every sample

70. Maxing (normalizing) the sound def normalize(sound): largest = 0 for s in getSamples(sound): largest = max(largest,getSample(s) ) multiplier = 32767.0 / largest print "Largest sample value in original sound was", largest print "Multiplier is", multiplier for s in getSamples(sound): louder = multiplier * getSample(s) setSample(s,louder)

71. Increasing volume by sample index def increaseVolumeByRange(sound): for sampleIndex in range(1,getLength(sound)+1): value = getSampleValueAt(sound,sampleIndex) setSampleValueAt(sound,sampleIndex,value * 2) This really is the same as: def increaseVolume(sound): for sample in getSamples(sound): value = getSample(sample) setSample(sample,value * 2)

72. Recipe to play a sound backwards def backwards(filename): source = makeSound(filename) target = makeSound(filename) sourceIndex = getLength(source) for targetIndex in range(1,getLength(target)+1): sourceValue = getSampleValueAt(source,sourceIndex) setSampleValueAt(target,targetIndex,sourceValue) sourceIndex = sourceIndex - 1 return target Note use of return for returning the processed sound

73. Recipe for halving the frequency of a sound def half(filename): source = makeSound(filename) target = makeSound(filename) sourceIndex = 1 for targetIndex in range(1, getLength( target)+1): setSampleValueAt( target, targetIndex, getSampleValueAt( source, int(sourceIndex))) sourceIndex = sourceIndex + 0.5 play(target) return target This is how a sampling synthesizer works! Here are the pieces that do it

74. Splicing Sounds Splicing gets its name from literally cutting and pasting pieces of magnetic tape together Doing it digitally is easy, but not short  We find where the end points of words are  We copy the samples into the right places to make the words come out as we want them  (We can also change the volume of the words as we move them, to increase or decrease emphasis and make it sound more natural.)

75. Finding the word end-points Using MediaTools and play before/after cursor, can figure out the index numbers where each word ends

76. def splicePreamble(): file = "/Users/guzdial/mediasources/preamble10.wav" source = makeSound(file) target = makeSound(file) # This will be the newly spliced sound targetIndex=17408 # targetIndex starts at just after "We the" in the new sound for sourceIndex in range( 33414, 40052): # Where the word "United" is in the sound setSampleValueAt(target, targetIndex, getSampleValueAt( source, sourceIndex)) targetIndex = targetIndex + 1 for sourceIndex in range(17408, 26726): # Where the word "People" is in the sound setSampleValueAt(target, targetIndex, getSampleValueAt( source, sourceIndex)) targetIndex = targetIndex + 1 for index in range(1,1000):#Stick some quiet space after that setSampleValueAt(target, targetIndex,0) targetIndex = targetIndex + 1 play(target) #Let's hear and return the result return target The Whole Splice

77. BREAK TIME! 15 minutes…

78. Media Manipulations in Java Examples from Workshop slides. Goal:  Demonstrate implementing same algorithms in Java.  Provide techniques for dealing with Java-specific issues while in a media context.

79. Copy Picture Algorithm Copy a picture to the 7 by 9.5 inch blank picture  Create the target picture object  Invoke the method on the target picture  Create the source picture object  Loop through the source picture pixels Get the source and target pixels Set the color of the target pixel to the color of the source pixel

80. Copy Algorithm to Code Loop through the source pixels // loop through the columns for (int sourceX = 0, targetX=0; sourceX < sourcePicture.getWidth(); sourceX++, targetX++) { // loop through the rows for (int sourceY = 0, targetY =0; sourceY < sourcePicture.getHeight(); sourceY++, targetY++) {

81. Copy Algorithm to Code – Cont Get the source and target pixels sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = this.getPixel(targetX,targetY); Set the color of the target pixel to the color of the source pixel targetPixel.setColor(sourcePixel.getColor());

82. Copy Method public void copyKatie() { String sourceFile = FileChooser.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 0, targetX=0; sourceX < sourcePicture.getWidth(); sourceX++, targetX++) {

83. Copy Method - Continued // loop through the rows for (int sourceY = 0, targetY =0; sourceY < sourcePicture.getHeight(); sourceY++, targetY++) { // set the target pixel color to the source pixel color sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = this.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); }

84. Trying the copyKatie Method Create a picture object using the 7inX95in.jpg file in the mediasources directory  Picture p1 = new Picture(FileChooser.getMediaPath(“7inX95in.jpg”)); Show the picture  p1.show(); Invoke the method on this picture object  p1.copyKatie(); Repaint the picture  p1.repaint();

85. Result of copyKatie Method

86. Copy to an Upper Left Location How would you copy a picture to a location in another picture (like 100, 100)?  Specified as the upper left corner You still copy all the source pixels  But the target x and y start at the specified location 100, 100

87. Copy to Position Exercise Copy the picture  robot.jpg  To location 100, 100 in 7inx95in.jpg

88. Cropping We can copy just part of a picture to a new picture  Just change the start and end source x and y values to the desired values  Use picture.explore() to find the x and y values  What are the x and y values to get the face of the girl in KatieFancy.jpg?

89. Copy Face Method public void copyKatiesFace() { String sourceFile = FileChooser.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 70, targetX = 100; sourceX < 135; sourceX++, targetX++) { // loop through the rows for (int sourceY = 3, targetY = 100; sourceY < 80; sourceY++, targetY++) {

90. Copy Face Method - Continued // set the target pixel color to the source pixel color sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = this.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); }

91. Result of Copy Kaite’s Face Create a picture object  Picture p1 = new Picture(FileChooser.getMediaPath( “7inX95in.jpg”)); Show the picture  p1.show(); Invoke the method  p1.copyKatiesFace(); Repaint the picture  p1.repaint();

92. What makes a Good Method? A method should do one and only one thing  Accomplish some task  The name should tell you what it does A method can call other methods to do some of the work  Procedural decomposition We shouldn’t copy code between methods  We should make general methods that are reusable A method should be in the class that has the data the method is working on

93. Where the last two methods general? We specified the file to copy from in the method  Meaning we would need to change the method  or make another method  to copy a different picture

94. General Copy Algorithm Create a method that copies pixels from a passed source picture  Giving a start x and y and end x and y for the source picture If the start x and y and end x and y cover the entire picture then the whole picture will be copied If the start x and y and end x and y are part of the picture then cropping will occur  To the current picture object with a target start x and target start y If the start x and y are 0 then it copies to the upper left corner

95. General Copy Algorithm Loop through the x values between xStart and xEnd (inclusive)  Loop through the y values between yStart and yEnd (inclusive) Get the pixel from the source picture for the current x and y values Get the pixel from the target picture for the targetStartX + x and targetStartY + y values Set the color in the target pixel to the color in the source pixel

96. General Copy Method public void copy(Picture sourcePicture, int startX, int startY, int endX, int endY, int targetStartX, int targetStartY) { Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the x values for (int x = startX, tx = targetStartX; x < endX && x < sourcePicture.getWidth() && tx < this.getWidth(); x++, tx++) { // loop through the y values for (int y = startY, ty = targetStartY; y < endY && y < sourcePicture.getHeight() && ty < this.getHeight(); y++, ty++) {

97. General Copy Method - Continued // copy the source color to the target color sourcePixel = sourcePicture.getPixel(x,y); targetPixel = this.getPixel(tx,ty); targetPixel.setColor(sourcePixel.getColor()); }

98. Rewrite Methods Exercise Type the copy method in Picture.java Rewrite copyKatie() and copyKatiesFace() methods to use the new copy method Run the methods to make sure they still work

99. Left Rotation To rotate an image left 90 degrees still copy all the pixels  But they go to different locations in the target Column values become row values target x = source y target y = source width -1 – source x 123 456 36 25 14 012 0 1 0 0 1 1 2

100. Left Rotation Algorithm Create the target picture object Invoke the method on the target picture Create the source picture object Loop through the source x (0-width-1)  Loop through the source y (0-height-1) Get the source pixel at the x and y values Get the target pixel with the x equal the source y value and the y equal the source picture width – 1 minus the source x Copy the color from the source pixel to the target pixel

101. Left Rotation Method public void copyKatieLeftRotation() { String sourceFile = FileChooser.getMediaPath("KatieFancy.jpg"); Picture sourcePicture = new Picture(sourceFile); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 0; sourceX < sourcePicture.getWidth(); sourceX++) {

102. Copy Katie Left Rotation // loop through the rows for (int sourceY = 0; sourceY < sourcePicture.getHeight(); sourceY++) { // set the target pixel color to the source pixel color sourcePixel = sourcePicture.getPixel(sourceX,sourceY); targetPixel = this.getPixel(sourceY, sourcePicture.getWidth() - 1 - sourceX); targetPixel.setColor(sourcePixel.getColor()); }

103. Right Rotation To rotate an image right 90 degrees still copy all the pixels  But they go to different locations in the target Column values become row values target y = source x target x = source height – 1 – source y 123 456 41 52 63 012 0 1 0 0 1 1 2

104. Right Rotation Exercise Write the method to rotate the picture of Katie to the right instead of to the left Try out the method Can you make the method more general?  To work on any picture?

105. Scaling You can make a picture smaller  Faster to download on the web Increment the source x and y by a number larger than 1  Don’t use all the source pixels in target You can make a picture larger  Show more detail Copy the same source x and y to more than one target x and y  Use source pixels more than once in target

106. Scaling Down the a Picture passionFlower.jpg is 640pixels wide and 480 pixels high If we copy every other pixel we will have a new picture with width (640 / 2 = 320) and height (480 / 2 = 240) 1234 1234 5678 5678 13 57

107. Scaling Down Algorithm Create the target picture Invoke the method on the target picture Create the source picture Loop with source x starting at 0 and target x starting at 0 as long as < source width  Increment the source x by 2 each time through the loop, increment the target x by 1  Loop with source y starting at 0 and target y starting at 0 as long as < source height Increment the source y by 2 each time through the loop, increment the target y by 1  Copy the color from the source to target pixel

108. Scaling Down Method public void copyFlowerSmaller() { Picture flowerPicture = new Picture( FileChooser.getMediaPath(“passionFlower.jpg")); Pixel sourcePixel = null; Pixel targetPixel = null; // loop through the columns for (int sourceX = 0, targetX=0; sourceX < flowerPicture.getWidth(); sourceX+=2, targetX++) {

109. Scaling Down Method - Continued // loop through the rows for (int sourceY=0, targetY=0; sourceY < flowerPicture.getHeight(); sourceY+=2, targetY++) { sourcePixel = flowerPicture.getPixel(sourceX,sourceY); targetPixel = this.getPixel(targetX,targetY); targetPixel.setColor(sourcePixel.getColor()); }

110. Trying Copy Flower Smaller Create a new picture half the size of the original picture (100,100) + 1  Picture p1 = new Picture(320,240); Copy the flower to the new picture  p1.copyFlowerSmaller(); Show the result  p1.show();

111. Thinking Through Scaling Up Copy each pixel in the source multiple times to the target  Source (0,0) Target (0,0)  Source (0,0) Target(1,0)  Source (1,0) Target(2,0)  Source (1,0) Target(3,0)  Source (2,0) Target(4,0)  Source (2,0) Target(5,0)  Source (0,0) Target(0,1)  Source (0,0) Target(1,1) 112233 112233 445566 445566 123 456 0 0 1 12 0 0 1 1 2 2 3 3 45

112. Scaling Up Algorithm Create the target picture Invoke the method on the target picture Create the source picture Loop with source x starting at 0 and target x starting at 0 as long as < source width  Increment the source x by 0.5 each time through the loop, increment the target x by 1  Loop with source y starting at 0 and target y starting at 0 as long as < source height Increment the source y by 0.5 each time through the loop, increment the target y by 1  Copy the color from the source to target pixel

113. Remove Red Eye Red eye is when the flash from the camera is reflected from the subject’s eyes We want to change the red color in the eyes to another color  But not change the red of her dress

114. Red Eye Algorithm We can find the area around the eyes to limit where we change the colors  Using picture.explore()  But we still just want to change the pixels that are “close to” red.  We can find the distance between the current color and our definition of red And change the color of the current pixel only if the current color is within some distance to the desired color

115. Detailed Red Eye Algorithm Loop with x staring at some passed start value and while it is less than some passed end value  Loop with y starting at some passed start value and while it is less than some passed end value Get the pixel at this x and y Get the distance between the pixel color and red If the distance is less than some value (167) change the color to some passed new color

116. Color Distance The distance between two points is computed as  Square root of (( x1 – x2) 2 + (y1 – y2) 2 ) The distance between two colors can be computed  Square root of ((red1 – red2) 2 + (green1-green2) 2 + (blue1 – blue2) 2 )  There is a method in the Picture class to do this public double getColorDistance(color1,color2)

117. Remove Red Eye Method public void removeRedEye(int startX, int startY, int endX, int endY, Color newColor) { Pixel pixel = null; // loop through the pixels in the rectangle defined by the // startX, startY, and // endX and endY for (int x = startX; x < endX; x++) { for (int y = startY; y < endY; y++) { // get the current pixel pixel = getPixel(x,y);

118. Remove Red Eye Method // if the color is near red then change it if (pixel.colorDistance(Color.red) < 167) pixel.setColor(newColor); }

119. Edge Detection Find the areas of high contrast and turn pixels is this area black  Turn all other pixels white

120. Edge Detection Algorithm To find areas of high contrast  Try to loop from row = 0 to row = height – 1 Loop from x = 0 to x = width  Get the pixel at the x and y (top pixel)  Get the pixel at the x and (y + 1) bottom pixel  Get the average of the top pixel color values  Get the average of the bottom pixel color values  If the absolute value of the difference between the averages is over a passed limit  Turn the pixel black  Otherwise turn the pixel white

121. Use if and else for two possibilities Sometimes you want to do one thing if the expression is true and a different thing if it is false (like x > 128 and x <= 128) int x = 24; if (x > 128) System.out.println(“x is > 128”); else System.out.println(“x <= 128”);

122. Edge Detection Exercise Write a method edgeDetection that takes an input limit  And turns all pixels black where the absolute value of the difference between that pixel and the below pixel is greater than the passed limit  And turns all pixels white where the absolute value of the difference between that pixel and the below pixel is less than or equal the passed limit

123. Sepia-Toned Pictures Have a yellowish tint, used to make things look old and western

124. Sepia-toned Algorithm First make the picture grayscale. Change the shadows (darkest grays) to be even darker (0 <= red < 60) Make the middle grays a brown color (60 <= red < 190) Make the highlights (lightest grays) a bit yellow (190 <= red)  Increase red and green  Or decrease blue

125. Sepia-toned Method public void sepiaTint() { Pixel pixel = null; double redValue = 0; double greenValue = 0; double blueValue = 0; // first change the current picture to grayscale this.grayscale();

126. Sepia-toned Method - Cont // loop through the pixels for (int x = 0; x < this.getWidth(); x++) { for (int y = 0; y < this.getHeight(); y++) { // get the current pixel and color values pixel = this.getPixel(x,y); redValue = pixel.getRed(); greenValue = pixel.getGreen(); blueValue = pixel.getBlue();

127. Sepia-toned Method - Cont // tint the shadows darker if (redValue < 60) { redValue = redValue * 0.9; greenValue = greenValue * 0.9; blueValue = blueValue * 0.9; } // tint the midtones a light brown by reducing the blue else if (redValue < 190) { blueValue = blueValue * 0.8; }

128. Sepia-toned Method - Cont // tint the highlights a light yellow // by reducing the blue else { blueValue = blueValue * 0.9; } // set the colors pixel.setRed((int) redValue); pixel.setGreen((int) greenValue); pixel.setBlue((int) blueValue); }

129. Chromakey – Blue Screen For TV and movie special effects they use a blue or green screen  Here just a blue sheet was used  Professionally you need an evenly lit, bright, pure blue background With nothing blue in the scene

130. Chromakey Exercise Write the method chromakey that takes a new background picture as an input parameter  It will loop through all the pixels  If the pixel color is blue (red + green < blue)  Replace the pixel color with the color from the new background pixel (at the same location)

131. OPTION 2: Turtles Using turtles and turtle graphics to introduce object-oriented programming Works as a lead-in to a media approach.

132. Computers as Simulators “The computer is the Proteus of machines. Its essence is its universality, its power to simulate. Because it can take on a thousand forms and serve a thousand functions, it can appeal to a thousand tastes.” Seymour Papert in Mindstorms

133. Creating a Simulation Computers let us simulate things  We do this by creating models of the things we want to simulate  We need to define what types of objects we will want in our simulation and what they can do Classes define the types and create objects of that type Objects act in the simulation

134. We will work with Turtle Objects We have to define what we mean by a Turtle to the computer  We do this by writing a Turtle class definition Turtle.java  We compile it to convert it into something the computer can understand Turtle.class

135. History of Turtles Seymour Papert at MIT in the 60s  By teaching the computer to do something the kids are thinking about thinking Develop problem solving skills Learn by constructing and debugging something  Learn by making mistakes and fixing them

136. Using Turtles Classes created at Georgia Tech  As part of a undergraduate class Add bookClassesFinal to your classpath to use these classes

137. Creating Objects in Java In Java to create an object of a class you use new Class(value, value, …);  Starts with the new operator Must be all lowercase  followed by the class name Usually starts with an uppercase letter  followed by an open parenthesis Above the 9 on the keyboard  Followed by any values used to set up the new object There don’t have to be any values  Followed by a close parenthesis Above the 0 on the keyboard  Followed by a semicolon (to end the statement) To the right of the L on the keyboard

138. Creating Objects If you just do  new World(); You will create a new World object and it will display  But you will not have any way to refer to it again  Once you close the window the object can be garbage collected The memory can be reused We need a way to refer to the new object  to be able to work with it again

139. Saving a Reference to an Object To save a reference to an object we need to declare an object variable and set the variable to reference a new object  Class name = new Class(value, value, …); Examples  World world1 = new World();  Turtle turtle1 = new Turtle(world1);

140. Turtle Basics The world starts off with a size of 640 by 480  With no turtles  World world1 = new World(); The turtle starts off facing north and in the center of the world by default  You must pass a World object when you create the Turtle object Or you will get an error  Turtle turtle1 = new Turtle(world1);

141. Creating Several Objects You can create several World objects  World world2 = new World(); You can create several Turtle objects  Turtle turtle2 = new Turtle(world2);  Turtle turtle3 = new Turtle(world2);  One turtle is on top of the other in the world

142. Moving a Turtle Turtles can move forward  turtle3.forward();  The default is to move by 100 steps (pixels) You can also tell the turtle how far to move  turtle2.forward(50);

143. Turning a Turtle Turtles can turn  Right turtle3.turnRight(); turtle3.forward();  Left turtle2.turnLeft(); turtle2.forward(50);

144. Turning a Turtle Turtles can turn by a specified amount  A positive number turns the turtle the right turtle3.turn(90); turtle3.forward(100);  A negative number turns the turtle to the left turtle2.turn(-90); turtle2.forward(70);

145. Draw a Square You can draw a square by doing turtle1.forward(100); turtle1.turnRight(); turtle1.forward(100); turtle1.turnRight(); turtle1.forward(100); turtle1.turnRight(); turtle1.forward(100); turtle1.turnRight();

146. Challenge Create a World object  Don’t forget to declare a variable to hold a reference to it Create a turtle object  Don’t forget to declare a variable to hold a reference to it Use the turtle to draw a  Rectangle (but, not a square)  Diamond  Hexagon

147. The Pen Each turtle has a pen  The default is to have the pen down to leave a trail  You can pick it up: turtle1.penUp(); turtle1.turn(-90); turtle1.forward(70);  You can put it down again: turtle1.penDown(); turtle1.forward(100);

148. Setting the Pen Width You can change the width of the trail the pen leaves  World world1 = new World();  Turtle turtle1 = new Turtle(world1);  turtle1.setPenWidth(5);  turtle1.forward(100);

149. Setting the Pen Color Use setPenColor to set the color of the pen  turtle1.setPenColor(java.awt.Color.RED); There are several predefined colors  In the package java.awt A package is a group of related classes  In the class Color To use them you can use the full name  java.awt.Color.RED

150. Setting Colors You can change the pen color  turtle.setPenColor(java.awt.Color.RED); You can change the turtle color  turtle1.setColor(java.awt.Color.BLUE); You can change the turtle’s body color  turtle1.setBodyColor(java.awt.Color.CYAN); You can change the turtle’s shell color  turtle1.setShellColor(java.awt.Color.RED);

151. More Turtle Behaviors Turtles can move to a specific location  turtle1.moveTo(400,10); Of course, you can create many turtles and move them all  Run TurtleTest Creates 1000 turtles and puts them in an array of turtles. Has each turn by a random amount from 0 to 359 and go forward by 100

152. Objects can Refuse Turtles won’t move completely out of the boundaries of the world  World world2 = new World();  Turtle turtle2 = new Turtle(world2);  turtle2.forward(600);

153. Objects send Messages Objects don’t “tell” each other what to do  They “ask” each other to do things Objects can refuse to do what they are asked  The object must protect it’s data Not let it get into an incorrect state A bank account object shouldn’t let you withdraw more money that you have in the account

154. OPTION 3: CS2 in Java media computation approach Introducing lists and trees using Java Focusing just on images here, but in the class, we do music and sound, both lists and trees, too.  These slides appear in the class after doing linked lists with music SongNodes.

155. Building a Scene Computer graphics professionals work at two levels:  They define individual characters and effects on characters in terms of pixels.  But then most of their work is in terms of the scene: Combinations of images (characters, effects on characters). To describe scenes, they often use linked lists and trees in order to assemble the pieces.

156. Use an array? > Picture [] myarray = new Picture[5]; > myarray[0]=new Picture(FileChooser.getMediaPath("katie.jpg")); > myarray[1]=new Picture(FileChooser.getMediaPath("barbara.jpg")); > myarray[2]=new Picture(FileChooser.getMediaPath("flower1.jpg")); > myarray[3]=new Picture(FileChooser.getMediaPath("flower2.jpg")); > myarray[4]=new Picture(FileChooser.getMediaPath("butterfly.jpg")); > Picture background = new Picture(400,400) > for (int i = 0; i < 5; i++) {myarray[i].scale(0.5).compose(background,i*10,i*10);} > background.show(); Yeah, we could. But: Inflexible Hard to insert, delete.

157. Using a linked list Okay, so we’ll use a linked list. But what should the ordering represent?  Version 1: Linearity The order that things get drawn left-to-right.  Version 2: Layering The order that things get drawn bottom-to-top

158. > FileChooser.setMediaPath("D:/cs1316/MediaSources/"); > PositionedSceneElement tree1 = new PositionedSceneElement(new Picture(FileChooser.getMediaPath("tree-blue.jpg"))); > PositionedSceneElement tree2 = new PositionedSceneElement(new Picture(FileChooser.getMediaPath("tree-blue.jpg"))); > PositionedSceneElement tree3 = new PositionedSceneElement(new Picture(FileChooser.getMediaPath("tree-blue.jpg"))); > PositionedSceneElement doggy = new PositionedSceneElement(new Picture(FileChooser.getMediaPath("dog-blue.jpg"))); > PositionedSceneElement house = new PositionedSceneElement(new Picture(FileChooser.getMediaPath("house-blue.jpg"))); > Picture bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); > tree1.setNext(tree2); tree2.setNext(tree3); tree3.setNext(doggy); doggy.setNext(house); > tree1.drawFromMeOn(bg); > bg.show(); Version 1: PositionedSceneElement In this example, using chromakey to compose..just for the fun of it.

159. What this looks like:

160. Slightly different ordering: Put the doggy between tree2 and tree3 > tree3.setNext(house); tree2.setNext(doggy); doggy.setNext(tree3); > bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); > tree1.drawFromMeOn(bg); > bg.show(); Yes, we can put multiple statements in one line.

161. Slightly different picture

162. PositionedSceneElement public class PositionedSceneElement { /** * the picture that this element holds **/ private Picture myPic; /** * the next element in the list **/ private PositionedSceneElement next; Pretty darn similar to our music linked lists!

163. Constructor /** * Make a new element with a picture as input, and * next as null. * @param heldPic Picture for element to hold **/ public PositionedSceneElement(Picture heldPic){ myPic = heldPic; next = null; }

164. Linked list methods /** * Methods to set and get next elements * @param nextOne next element in list **/ public void setNext(PositionedSceneElement nextOne){ this.next = nextOne; } public PositionedSceneElement getNext(){ return this.next; } Again, darn similar!

165. Traverse the list /** * Method to draw from this node on in the list, using bluescreen. * Each new element has it's lower-left corner at the lower- right * of the previous node. Starts drawing from left-bottom * @param bg Picture to draw drawing on **/ public void drawFromMeOn(Picture bg) { PositionedSceneElement current; int currentX=0, currentY = bg.getHeight()-1; current = this; while (current != null) { current.drawMeOn(bg,currentX, currentY); currentX = currentX + current.getPicture().getWidth(); current = current.getNext(); } Traversing the list in order to draw the scene is called rendering the scene: Realizing the picture described by the data structure.

166. Core of the Traversal current = this; while (current != null) { //Treat the next two lines as “blah blah blah” current.drawMeOn(bg,currentX, currentY); currentX = currentX + current.getPicture().getWidth(); current = current.getNext(); }

167. Drawing the individual element /** * Method to draw from this picture, using bluescreen. * @param bg Picture to draw drawing on * @param left x position to draw from * @param bottom y position to draw from **/ private void drawMeOn(Picture bg, int left, int bottom) { // Bluescreen takes an upper left corner this.getPicture().bluescreen(bg,left, bottom-this.getPicture().getHeight()); }

168. Generalizing Reconsider these lines: This is actually a general case of:  Removing the doggy from the list  Inserting it after tree2 > tree3.setNext(house); tree2.setNext(doggy); doggy.setNext(tree3);

169. Removing the doggy > tree1.setNext(tree2); tree2.setNext(tree3); tree3.setNext(doggy); doggy.setNext(house); > tree1.remove(doggy); > tree1.drawFromMeOn(bg);

170. Putting the mutt back > bg = new Picture(FileChooser.getMediaPath ("jungle.jpg")); > tree1.insertAfter(doggy); > tree1.drawFromMeOn(bg);

171. Removing an element from the list /** Method to remove node from list, fixing links appropriately. * @param node element to remove from list. **/ public void remove(PositionedSceneElement node){ if (node==this) { System.out.println("I can't remove the first node from the list."); return; }; PositionedSceneElement current = this; // While there are more nodes to consider while (current.getNext() != null) { if (current.getNext() == node){ // Simply make node's next be this next current.setNext(node.getNext()); // Make this node point to nothing node.setNext(null); return; } current = current.getNext(); }

172. Error checking and printing /** Method to remove node from list, fixing links appropriately. * @param node element to remove from list. **/ public void remove(PositionedSceneElement node){ if (node==this) { System.out.println("I can't remove the first node from the list."); return; };

173. The Removal Loop PositionedSceneElement current = this; // While there are more nodes to consider while (current.getNext() != null) { // Is this it? if (current.getNext() == node){ // Simply make node's next be this next current.setNext(node.getNext()); // Make this node point to nothing node.setNext(null); return; } current = current.getNext(); // If not, keep searching } We’re checking getNext() because we need to stop the step before.

174. insertAfter /** * Insert the input node after this node. * @param node element to insert after this. **/ public void insertAfter(PositionedSceneElement node){ // Save what "this" currently points at PositionedSceneElement oldNext = this.getNext(); this.setNext(node); node.setNext(oldNext); } Think about what’s involved in creating insertBefore()…

175. Animation = (Changing a structure + rendering) * n We can use what we just did to create animation. Rather than think about animation as “a series of frames,” Think about it as:  Repeatedly: Change a data structure Render (draw while traversing) the data structure to create a frame

176. AnimatedPositionedScene public class AnimatedPositionedScene { /** * A FrameSequence for storing the frames **/ FrameSequence frames; /** * We'll need to keep track * of the elements of the scene **/ PositionedSceneElement tree1, tree2, tree3, house, doggy, doggyflip;

177. Setting up the animation public void setUp(){ frames = new FrameSequence("D:/Temp/"); FileChooser.setMediaPath("D:/cs1316/mediasources/"); Picture p = null; // Use this to fill elements p = new Picture(FileChooser.getMediaPath("tree- blue.jpg")); tree1 = new PositionedSceneElement(p); p = new Picture(FileChooser.getMediaPath("tree- blue.jpg")); tree2 = new PositionedSceneElement(p); p = new Picture(FileChooser.getMediaPath("tree- blue.jpg")); tree3 = new PositionedSceneElement(p); p = new Picture(FileChooser.getMediaPath("house- blue.jpg")); house = new PositionedSceneElement(p); p = new Picture(FileChooser.getMediaPath("dog- blue.jpg")); doggy = new PositionedSceneElement(p); doggyflip = new PositionedSceneElement(p.flip()); }

178. Render the first frame public void make(){ frames.show(); // First frame Picture bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.setNext(doggy); doggy.setNext(tree2); tree2.setNext(tree3); tree3.setNext(house); tree1.drawFromMeOn(bg); frames.addFrame(bg);

179. Render the doggy moving right // Dog moving right bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.remove(doggy); tree2.insertAfter(doggy); tree1.drawFromMeOn(bg); frames.addFrame(bg); bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.remove(doggy); tree3.insertAfter(doggy); tree1.drawFromMeOn(bg); frames.addFrame(bg); bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.remove(doggy); house.insertAfter(doggy); tree1.drawFromMeOn(bg); frames.addFrame(bg);

180. Moving left //Dog moving left bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.remove(doggy); house.insertAfter(doggyflip); tree1.drawFromMeOn(bg); frames.addFrame(bg); bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.remove(doggyflip); tree3.insertAfter(doggyflip); tree1.drawFromMeOn(bg); frames.addFrame(bg); bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.remove(doggyflip); tree2.insertAfter(doggyflip); tree1.drawFromMeOn(bg); frames.addFrame(bg); bg = new Picture(FileChooser.getMediaPath("jungle.jpg")); tree1.remove(doggyflip); tree1.insertAfter(doggyflip); tree1.drawFromMeOn(bg); frames.addFrame(bg); }

181. Results

182. Version 2: Layering > Picture bg = new Picture(400,400); > LayeredSceneElement tree1 = new LayeredSceneElement( new Picture(FileChooser.getMediaPath("tree-blue.jpg")),10,10); > LayeredSceneElement tree2 = new LayeredSceneElement( new Picture(FileChooser.getMediaPath("tree-blue.jpg")),100,10); > LayeredSceneElement tree3 = new LayeredSceneElement( new Picture(FileChooser.getMediaPath("tree-blue.jpg")),200,100); > LayeredSceneElement house = new LayeredSceneElement( new Picture(FileChooser.getMediaPath("house-blue.jpg")),175,175); > LayeredSceneElement doggy = new LayeredSceneElement( new Picture(FileChooser.getMediaPath("dog-blue.jpg")),150,325); > tree1.setNext(tree2); tree2.setNext(tree3); tree3.setNext(doggy); doggy.setNext(house); > tree1.drawFromMeOn(bg); > bg.show();

183. First version of Layered Scene

184. Reordering the layering > house.setNext(doggy); doggy.setNext(tree3); tree3.setNext(tree2); tree2.setNext(tree1); > tree1.setNext(null); > bg = new Picture(400,400); > house.drawFromMeOn(bg); > bg.show(); Basically, we’re reversing the list

185. Reordered (relayered) scene Think about what’s involved in creating a method to reverse() a list…

186. What’s the difference? If we were in PowerPoint or Visio, you’d say that we changed the layering.  “Bring to front”  “Send to back”  “Bring forward”  “Send backward” These commands are actually changing the ordering of the layers in the list of things to be redrawn. Change the ordering in the list. Render the scene Now it’s a different layering!

187. LayeredSceneElement public class LayeredSceneElement { /** * the picture that this element holds **/ private Picture myPic; /** * the next element in the list **/ private LayeredSceneElement next; /** * The coordinates for this element **/ private int x, y;

188. Constructor /** * Make a new element with a picture as input, and * next as null, to be drawn at given x,y * @param heldPic Picture for element to hold * @param xpos x position desired for element * @param ypos y position desired for element **/ public LayeredSceneElement(Picture heldPic, int xpos, int ypos){ myPic = heldPic; next = null; x = xpos; y = ypos; }

189. Linked List methods (We can sort of assume these now, right?) /** * Methods to set and get next elements * @param nextOne next element in list **/ public void setNext(LayeredSceneElement nextOne){ this.next = nextOne; } public LayeredSceneElement getNext(){ return this.next; }

190. Traversing /** * Method to draw from this node on in the list, using bluescreen. * Each new element has it's lower-left corner at the lower-right * of the previous node. Starts drawing from left-bottom * @param bg Picture to draw drawing on **/ public void drawFromMeOn(Picture bg) { LayeredSceneElement current; current = this; while (current != null) { current.drawMeOn(bg); current = current.getNext(); } /** * Method to draw from this picture, using bluescreen. * @param bg Picture to draw drawing on **/ private void drawMeOn(Picture bg) { this.getPicture().bluescreen(bg,x,y); }

191. Linked list traversals are all the same current = this; while (current != null) { current.drawMeOn(bg); current = current.getNext(); }

192. New Version: Trees for defining scenes Not everything in a scene is a single list.  Think about a pack of fierce doggies, er, wolves attacking the quiet village in the forest.  Real scenes cluster. Is it the responsibility of the elements to know about layering and position?  Is that the right place to put that know how? How do we structure operations to perform to sets of nodes?  For example, moving a set of them at once?

193. The Attack of the Nasty Wolvies

194. Closer…

195. Then the Hero Appears!

196. And the Wolvies retreat

197. What’s underlying this This scene is described by a tree  Each picture is a BlueScreenNode in this tree.  Groups of pictures are organized in HBranch or VBranch (Horizontal or Vertical branches)  The root of the tree is just a Branch.  The branches are positioned using a MoveBranch.

198. Labeling the Pieces VBranch with BlueScreenNode wolves MoveBranch to (10,50) Branch (root) HBranch with BSN trees HBranch with 3 BSN houses and a VBranch with 3 BSN houses MoveBranch to (10,400) MoveBranch to (300,450)

199. It’s a Tree VBranch with BlueScreenNode wolves MoveBranch to (10,50) Branch (root) HBranch with BSN trees HBranch with 3 BSN houses and a VBranch with 3 BSN houses MoveBranch to (10,400) MoveBranch to (300,450)

200. The Class Structure DrawableNode knows only next, but knows how to do everything that our picture linked lists do (insertAfter, remove, last, drawOn(picture)).  Everything else is a subclass of that. PictNode knows it’s Picture myPict and knows how to drawWith(turtle) (by dropping a picture) BlueScreenNode doesn’t know new from PictNode but knows how to drawWith(turtle) by using bluescreen.

201. Branch Class Structure Branch knows its children—a linked list of other nodes to draw. It knows how to drawWith by:  (1) telling all its children to draw.  (2) then telling all its children to draw. A HBranch draws its children by spacing them out horizontally. A VBranch draws its children by spacing them out vertically.

202. The Class Structure Diagram DrawableNode Knows: next Branch Knows: children HBranch Knows how to drawWith horizontally VBranch Knows how to drawWith vertically PictNode Knows: myPict Knows how to drawWith BlueScreenNode Knows how to drawWith as bluescreen Note: This is not the same as the scene (object) structure!

203. Rest of the implementation goes here… Note that there is a challenge and research question here  The first trees that they’re seeing are scene graphs.  These are realistic (authentic), but more more complex than traditional binary trees.  Does the motivational aspects overcome the additional complexity?  Check back next year…