georgia institute of technology introduction to media computation barb ericson georgia institute of...

Georgia Institute of Technology

Introduction to Media Computation

Barb Ericson


May 2006


Media Computation: Teaching in a Relevant Context

• Presenting CS topics with media projects and examples– Iteration as creating negative

and grayscale images– Indexing in a range as

removing redeye– Algorithms for blending both

images and sounds– Linked lists as song

fragments woven to make music

– Information encodings as sound visualizations


Examples of Student Work

Soup-Audio Collage

Canon- LinkedList of (MIDI) Music


Where is it being used?

• Introductory media computing in Python– Used for non-majors at Georgia Tech and ANU– Used for CS majors at U. Ill-Chicago, Kalamazoo College,

Gainesville College.

• Introduction to data structures in Java– Used at Georgia Tech and Gainesville College

• Introduction to object-oriented programming in Java– Used at Dennison University, Duke, and U.Mass-Boston– Used in several high schools in Georgia


Results

• Average CS1 success pre-MediaComp: Average 72.8%In MediaComp (51% female): Average 84% (as high as 90%)– Similar results at Gainesville, U.Ill-Chicago, ANU– Specific majors more dramatic:

Management majors’s success rate 49% => 88%

• Students are excited, and becoming CS majors, CS minors, CS teachers, and Computational Media majors (over 100, 25% female)


What works, Where it doesn’t

• What works– Open-ended assignments to allow for student

creativity and expression• Especially with their own media

– Collaborative space for students to publicly share their media artifacts with others.

– Transfer from Python =>Java

• Where it doesn’t– MediaComp isn’t “just the slow path”– Not allowing students to be creative


• Introduction to Java– Math operators, printing results, data types, casting,

relational operators, Strings, variables

• Introduction to Programming– Creating and naming objects

• Using a turtle and a world

– Creating new Turtle methods• Draw simple shapes• Using parameters

Syllabus


Syllabus - Continued

• Modifying Pictures using Loops– One-dimensional

arrays– Use for-each, while,

and for loops to– Increase/decrease

colors, fake a sunset, lighten and darken, create a negative, and grayscale



• Modifying Pixels in a Matrix– Two-dimensional

arrays– Nested loops– Copying, mirroring,

blending, rotation, scaling



• Conditionally Modifying Pixels– Boolean expressions– Using && and ||– Replacing a color,

reducing red-eye, edge detection, sepia-toned, posterize, highlight extremes, blurring, background subtractions, chromakey



• Drawing on Pictures– Using existing Java

classes – Inheritance– Interfaces– Drawing simple

shapes, drawing text, general copy, general scale, shearing, gradient paint, general blending, clipping



• Modifying all Samples in a Sound– 1D arrays– Loops– Conditional execution– Change volume,

normalizing a sound (make it as loud as possible), force to extremes



• Modifying Samples using Ranges– Loops– Clipping, splicing,

reversing, mirroring



• Combining and Creating Sounds– Class and private

methods– Composing sounds,

blending sounds, changing frequencies, and creating echoes

– Creating sounds• Sine Waves, Square

Waves, Triangle Waves

– MP3 and MIDI



• Creating Classes– Identifying objects and classes– Defining a class– Overloading constructors– Creating and initializing an array– Creating getters and setters– Creating a main method– Javadoc comments

• Reusing a class via inheritance– ConfusedTurtle

ConfusedTurtleTurtle



• Creating and Modifying Text– String methods– Reading from and writing to

files• Handling Exceptions

– Creating a form letter– Modifying programs– Getting text from networks– Creating random sentences– Using text to shift between

media



• Making Text for the Web– Throwing exceptions,

“unnamed” package, HashMap, Generics, and Iterators

– Generating HTML– Create a web page from a

directory– Create a web page from

other web pages– Databases– Creating a web page from

a database



• Encoding, Manipulating, and Creating Movies– Frame-based animations

with simple shapes and text

– Special effects – fade out, fake sunset, and chromakey



• Speed– What makes programs

fast?• Compilers and Interpreters

• Writing a graphics interpreter and compiler

• Searching

• Algorithms that can’t be written

– What makes computers fast?

• Clock rates, Storage, Display



• Javascript– Syntax– User Interfaces– Multimedia


Introduction to Java

• Introduction to DrJava• Math Operators• Integer and Floating Point• Casting• Primitive Types• Relational Operators• Order of Operations• How to print to the console• Representing Text (Strings)• Invoking Class and Object Methods• Using the Java API to find the methods for a class


What is DrJava?

• DrJava is a free integrated development environment for doing Java programming– From Rice University– It is written in Java

• It has several window panes in it– For creating programs

(definitions pane)– For trying out Java code

(interactions pane)– Listing of open files (files

pane)


Math Operators Exercise

• Open DrJava and do the following in the interactions pane– Subtract 8 from 12– Add 7 to 5– Divide 5 by 2– Divide 4.6 by 2– Multiply 8 by 10– Find the remainder when

you divide 13 by 5


Console Output Exercise

• Use System.out.println() to print the results of expression to the console– System.out.println(3 * 2);– System.out.println(14 – 5);– System.out.println(12 / 2);– System.out.println(256 + 234);– System.out.println("My" + "name");– System.out.println("256 + 234");

• Try using System.out.print() instead– What is the difference?


Strings

• Java has a type called: String• A string is an object that has a sequence of characters in

Unicode– It can have no characters (the null string "")– It can have many characters

• "This is one long string with spaces in it. “– Everything in a string will be printed out as it was entered

• Even math operations “128 + 234”

• Java knows how to add strings– It returns a new string with the characters of the second string

after the characters of the first• With no added space


Methods

• Classes in Java define methods– Recipes or functions f(x) = x2

– May take input – May produce an output

• Two Types– Object method

• Sent as a message to an object• Implicitly passed the current object

– Class method• Sent as a message to a class• Declared using the keyword static


Method Exercise

• In DrJava’s interaction pane try these– Object methods

• "HELLO".toLowerCase()• "This is a string".indexOf("is")• " This is ".trim()

– Class methods• Math.abs(53)• Math.abs(-3)• Math.min(22,1)• Character.getNumericValue('b')


Message Always Have Parenthesis

• You can tell that out.println() is sending a message – Because of the ()

• Messages always have () – Even if there are no parameters (arguments)

• If you are sending data along with a message it goes inside the parentheses– Separated by commas– Math.min(3,4);


Java is Case Sensitive

• Some programming languages are case sensitive– Meaning that min isn’t the same as Min– Or string isn’t the same as String

• In Java primitive types are all lowercase– double, float, int,

• Class names start with an uppercase letter– So Math and System are the names of classes


Java Naming Conventions

• In Java only Class names start with an uppercase letter– System, BufferedImage, Picture

• All other names start with lowercase letters but uppercase the first letter of each additional word– picture, fileName, thisIsALongName


Teaching Java using Turtles

• How to add classes to your classpath in DrJava• How to create objects in Java• How to declare variables in Java• How to invoke methods on objects in Java• Objects control their data

– And can refuse to do what you ask

• How to create a method in Java• How to pass a parameter to a method in Java


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• Objects can have data and know how to do things


Running a Simulation

• How many objects does it take to get a person fed at a restaurant?– Pick people to be the customer, greeter/seater,

waiter, chef, and cashier and have them role play • What data does each of these people need to do their job?• What do they need to know how to do?• What other objects do you talk about?

• How about simulating going to a dentist?– Or to the movies?


Adding to the Classpath

Click on Add

Add bookClasses

directory

Click on

Edit and then Preferences

Click on Apply then OK


Creating Objects in Java

• In Java to create an object of a class you use new Class(value, value, …);

• Our Turtle objects live in a World object– We must create a World object first – Try typing the following in the interactions pane:

new World();


Creating Objects

• If you just execute – 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


Naming is Important

• If you get a new pet one of the first things you do is name it– Gives you a way to refer to the new pet without saying

• Please take that dog we got yesterday for a walk.

• Please take Fifi for a walk.

• In programming we name things we want to refer to again– Gives us a way to work with them – Like the World object

• This is called declaring a variable


Declaring a Variable

• To be able to refer to an object again we need to specify what type of thing it is and give it a name– This is also called declaring a variable– Type name; OR– Type name = new Class(value, value, …);

• The equal sign doesn’t mean equal– But assign the value of the variable on the left to the result of the

expression on the right – The following creates a variable named earth which refers to a

World object created on the right• World earth = new World();


Declaring Variables

• Variables are names associated with values– If the type of the variable is null

• It doesn’t refer to an object yet

– Variables can be reused• World earth = null;

• earth = new World();

• earth = new World();

earth null

earthWorld

Object 1

earth WorldObject 2


Limits on Declaring Variables

• You can't declare two variables with the same name!

> World earth = new World();


Error: Redefinition of 'earth'

• You can change what an object variable refers to


> earth = new World();


Turtle Basics

• The world starts off with a size of 640 by 480 – With no turtlesWorld earth1 = 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: java.lang.NoSuchMethodException: Turtle constructor

Turtle tommy = new Turtle(earth1);


Creating Several Objects

• You can create several World objectsWorld mars = new World();

• You can create several Turtle objectsTurtle shar = new Turtle(mars);

Turtle jen = new Turtle(mars);– One turtle is on top of the other


What do Objects Look Like?

• Objects are created with space for their data

• Objects have a reference to the object that represents the class– Object of the class “Class”

Name = Turtle

Fields = pos, heading, color

Methods = forward, backward, turnLeft, turn …

Turtle : Class

Pos = 320,240

Color = green

Heading = 0

t1 : Turtle tina : Turtle

Pos = 110, 30

Color = blue

Heading = 90


Looking up Turtle Methods

• Open bookClasses/doc/Turtle.html and find the methods for the following:– How to turn a turtle left 90 degrees?– How to turn a turtle by a specific amount?– How many methods will make a turtle go forward

• How are they different?

– What are the two ways to stop a turtle from being drawn?

– How do you change the color of the pen?– What happens if you use setColor?– How would you draw a letter T with a Turtle?


Objects can Refuse

• Turtles won’t move completely out of the boundaries of the worldWorld world2 = new World();

Turtle turtle2 = new Turtle(world2);

turtle2.forward(600);


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


Creating a Method

• We can name a block of Java statements and then execute them again – By declaring a method in a class

• The syntax for declaring a method is– visibility returnType name(parameterList)– Visibility determines access

• Usually public or private

• The return type is the type of thing returned

• If nothing is returned use the keyword void

– Name the method starting with a lowercase word and uppercasing the first letter of each additional word


Example Method

public void drawT() { this.forward(100); this.turnLeft(); this.penUp(); this.forward(40); this.turn(180); this.penDown(); this.forward(80); this.hide(); }

• The visibility is public• The keyword void means this

method doesn’t return a value• The method name is drawT• There are no parameters

– Notice that the parentheses are still required

• The keyword this means the object this method was invoked on


Adding a Method to a Class

1. Open file Turtle.java

2. Type the method before the last } // end

3. Compile open files


Adding a Parameter to a Method

• The method drawT will always draw the same size T (height of 100 with a cross bar of 80 on top)

• But what if you want to draw different size Ts– By specifying the height– Use .8 x height for the length of the cross bar

• You can pass the height that you want as a parameter– And calculate the length of the cross bar


Draw T with a Parameter

public void drawT(int height) { int lengthCrossBar = (int) (height * 0.8); this.forward(height); this.turnLeft(); this.penUp(); this.forward(lengthCrossBar / 2); this.turn(180); this.penDown(); this.forward(lengthCrossBar); this.hide(); }


Introduction to Media Computation

• What is media computation?• How does color vision work?• How can you make colors with red, green, and

blue light?• How do digital cameras and computer displays

work?• What is a pixel?• How can you show a picture from a file in Java?


What is Media Computation?

• Processing– picture elements– sound fragments– movie frames– Text files and HTML pages

• The speed and storage capacity of modern computers makes this possible– Even for beginning students just learning to program


How Does Color Vision Work?

• Our eyes and brain work together to make sense of what we see

• The cones in our eyes are what allow us to see in color

• The rods allow us to see black, white, and shades of gray

• Our cones are sensitive to red, green, and blue light– All other colors are

combinations of these


Red, Green and Blue Light

• White light is a combination of red, green, and blue – Full intensity red, green, and blue combined

• Black is the absence of all light – No red, green or blue light

• All other colors are combinations – Of red, green, and blue – Of different intensities


Color Exercise

• Start DrJava– In the interactions pane type

ColorChooser.pickAColor();– Click on the RGB tab and move

the sliders to change the intensity of red, green, and blue

– Make white, black, red, blue, green, yellow, violet, and orange


Pictures are made up of Pixels

• Digital cameras record light at pixels

• Monitors display pictures using pixels

• Our limited vision acuity helps us to see the discrete pixels as a smooth picture– If we blow up the picture

we can see the pixels


Digital Pictures

• Capture the intensity of the red, green, and blue colors at each pixel

• Stored as a bunch of numbers– 8 bits for red, 8 bits for green, 8 bits

for blue– Need nearly 1 million bytes to store a

640 x 480 picture– Need 3 million bytes to store an

image from a 1 megapixel (million pixel) camera

• Displayed as red, green, and blue colors on the computer display

– Lots of them close together– Our brain sees a smooth color image


Modifying Pictures using Loops

• Introduce one-dimensional arrays• Change pixel colors one at a time by hand• Change pixel colors in a loop

– For-each– While– For

• Image Manipulations– Decrease/increase a color– Set a color to zero– Negate– Grayscale


Pictures have lots of Pixels

• How can we refer to each pixel?– pixel1, pixel2, pixel3, pixel4, pixel5, …

• Do we really want to name each one?– There are 640 x 480 = 307,200 pixels

• How do we deal with lots of data of the same type?– Use an array


What is an Array?

• Storage for a sequence of items– Of the same type

• You can access items by using an index

• The index starts at 0– The first item is at index 0– The last item is at index

(length – 1)

• Arrays know their length (have a public length field)– arrayObj.length

3 7 9 2 1 5

8 3 2 6

0 1 2 3 4 5

0 1 2 3


Negating an Image

• How would you turn a picture into a negative?– White should become black

• 255,255,255 becomes 0,0,0

– Black should become white• 0,0,0 becomes

255,255,255

• The new color is – 255 – red, 255 – green,

255 - blue


For-Each Loop

• Loops through all of the elements in an array • Syntax

for (type name : array)

• Examplefor (Pixel pixelObj : pixelArray)

• Each time through the loop this will be a different pixel from the array of pixels until all of the pixels in the array have been processed


Negate Method

/** * Method to negate the picture */public void negate(){ Pixel[] pixelArray = this.getPixels(); int redValue, blueValue, greenValue

= 0;

// loop through all the pixels for (Pixel pixelObj : pixelArray)

{

// get the values redValue = pixelObj.getRed(); greenValue = pixelObj.getGreen(); blueValue = pixelObj.getBlue();

// set the pixel's color pixelObj.setColor(

new Color(255 - redValue, 255 - greenValue, 255 - blueValue)); } }


Testing Negate

String file = "c:/intro-prog-java/mediasources/caterpillar.jpg";

Picture pictureObj = new Picture(file);

pictureObj.explore();

pictureObj.negate();

pictureObj.explore();


While Loop

• Executes the body of the loop while the condition is true

• Syntaxwhile (condition)

• Exampleint index = 0;

while (index < pixelArray.length)

• Often needs variables declared before the loop and incremented at the end of the body


Exercise

• Modify the negate method to use a while loop– Add a variable for the current pixel– Add a variable for the current index– Remember to increment the index at the end of the

body of the loop

• Create a new method that keeps only the blue value (sets the red and green values to 0) – Try it with a for-each loop– Try it with a while loop


For Loop

• Has three areas: declaration, condition, and change

• Syntaxfor (declaration; condition; change)

• Examplefor (int i = 0; i < pixelArray.length; i++)

• Do the declaration before the body of the loop then each time through the loop check the condition and if true execute the body of the loop and then do the changes


Exercise

• Modify the negate method to use a for loop– In the declaration area, declare the index– In the condition check that the index is less than the

length of the array– In the increment area, increment the index

• Create a new method that reduces the blue value – Try it with a for-each loop– Try it with a while loop


Modifying Pixels in a Matrix

• Introduce two-dimensional arrays• Use Nested Loops• Image Manipulations

– Copying– Mirroring– Blending– Rotation– Scaling– Create a collage


What is a two-dimensional array?

• The pixels in a picture are really stored in a two-dimensional array– Each pixel has a x value

(horizontal location)– Each pixel has a y value

(vertical location)– pictureObj.getPixel(x,y)

returns the pixel at that location

x

y


Example Two-Dimensional Arrays

• Maps– That street is in D-5

• Battleship– Try I-5

• Hit or miss

• Chairs at a theater or game– Row C seat 20


Nested Loop

• How would you get all the pixels in a picture using their x and y values– From left to right and top to bottom?– x=0 and y=0, x=1 and y=0, x=2 and y=0, …– x=0 and y=1, x=1 and y=1, x=2 and y=1, …– x=0 and y=2, x=1 and y=2, x=2 and y=2, …

• We need to have one loop inside another– The outer loop counts y from 0 to height - 1– The inner loop counts x from 0 to width - 1


Alternative Nested Loop

• How would you get all the pixels in a picture using their x and y values– From top to bottom and left to right?– x=0 and y=0, x=0 and y=1, x=0 and y=2, …– x=1 and y=0, x=1 and y=1, x=1 and y=2, …– x=2 and y=0, x=2 and y=1, x=2 and y=2, …

• We need to have one loop inside another– The outer loop counts x to width - 1– The inner loop counts y from 0 to height - 1


Vertical Mirroring

• What if we want to pretend to place a mirror in the middle of the picture– We would see the left side

of the picture mirrored on the right side


Thinking Through Vertical Mirroring

• If we just think of a number at each x and y location instead of a color– The mirroring would

look like this:

• Can you find the algorithm to do this?

1 2 3 4 5

5 4 3 2 1

1 2 3 4 5

1 2 3 2 1

5 4 3 4 5

1 2 3 2 1

0 1 2 3 4

0

1

2


What is the Vertical Mirror for this?

• Try the solve the problem for small samples

• If you can’t solve it on a small sample– You can’t write a

program to solve it

1 2 3

4 5 6

7 8 9

0 1 2

0

1

2

0 1 2

0

1

2


Mirror Vertical Algorithm

• Loop through all the rows (y starts at 0, increments by 1, and is less than the picture height)

– Loop with x starting at 0 and x less than the midpoint (mirror point) value

• Get the left pixel at x and y • Get the right pixel at width

– 1 - x • Set the color for the right

pixel to be the color of the left pixel

1 2 3 4 5

5 4 3 2 1

1 2 3 4 5

1 2 3 2 1

5 4 3 4 5

1 2 3 2 1


Mirror Vertical Algorithm to Code

• We are going to need the midpointint midpoint = this.getWidth() / 2;

• Loop through the rows (y values)for (int y = 0; y < this.getHeight(); y++) {

– Loop through x values (starting at 1)

for (int x = 0; x < midpoint; x++) {• Set right pixel color to left pixel color

Pixel leftPixel = this.getPixel(x, y);

Pixel rightPixel = this.getPixel(this.getWidth() - 1 - x, y);

rightPixel.setColor(leftPixel.getColor());


Mirror Vertical Method

public void mirrorVertical()

{

int mirrorPoint = this.getWidth() / 2;

Pixel leftPixel = null;

Pixel rightPixel = null;

// loop through the rows

for (int y = 0; y < this.getHeight(); y++)

{

// loop from 0 to just before the mirror point

for (int x = 0; x < mirrorPoint; x++)

{


Mirror Vertical Method - Continued

leftPixel = this.getPixel(x, y);

rightPixel = this.getPixel(this.getWidth() – 1 – x, y);

rightPixel.setColor(leftPixel.getColor());

}

}

}


Trying Mirror Vertical

• Create the picture– Picture p1 = new Picture(

FileChooser.getMediaPath("caterpillar.jpg");

• Invoke the method on the picture– p1.mirrorVertical();

• Show the picture– p1.show();


Mirror Horizontal

• What about mirroring around a mirror held horizontally in the vertical center of the picture?– Like a reflection in a lake?


Thinking Through Mirror Horizontal

• Again think of a number at each x and y location– Instead of a color– And try it with a small sample

• How can we write a nested for loop to do this?

1 2 3

4 5 6

7 8 9

1 2 3

4 5 6

1 2 3

0 1 2

0

1

20 1 2

0

1

2


Horizontal Mirroring?

• Try to solve the problem for several small samples problems

• See if you can come up with the algorithm to solve it– Test it more small

samples

1 2 3 4 5

5 4 3 2 1

8 9 1 2 3

0 1 2 3 4

0

1

2


Mirror Horizontal Algorithm

• Get the vertical midpoint– Picture height / 2

• Loop through all the x values – Loop from y=0 to y < vertical

midpoint• Get the top pixel

– At x and y

• Get the bottom pixel– Height - 1 - y

• Set the bottom pixel’s color to the top pixel color

1 2 3

4 5 6

7 8 9

1 2 3

4 5 6

1 2 3


Mirror Horizontal Exercise

• Write the method to mirror the top half of the picture to the bottom half.– This is a motorcycle

redMotorcycle.jpg

• How about mirroring bottom to top?


Conditionally Modifying Pixels

• Boolean expressions• Using && and || to combine boolean expressions• Image Manipulations

– Replacing a color– Reducing red-eye– Edge detection– Sepia-toned– Posterize– Highlight extremes– Blurring– Background subtraction and Chromakey


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


Red Eye Algorithm

• We can find the area around the eyes to limit where we change the colors– Using pictureObj.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


Conditional Execution

• Sometimes we want a statement or block of statements executed only if some expression is true– We can use the “if”

statement in Java

if (colorDistance < value) Statement or block to

execute

next statement statement

if (expression)

true

false

Statement or block


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 Pixel class to do this

• double dist = pixelObj.colorDistance(color1);


Remove Red Eye Method

public void removeRedEye(int startX, int startY, int endX, int endY, Color newColor) { Pixel pixelObj = 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 pixelObj = getPixel(x,y);


Remove Red Eye Method

// if the color is near red then change it

if (pixelObj.colorDistance(Color.red) < 167)

{

pixelObj.setColor(newColor);

}

}

}

}


Testing removeRedEye

String file =

FileChooser.getMediaPath("jenny-red.jpg");

Picture p = new Picture(file);

p.explore();

p.removeRedEye(110,91,192,103,

java.awt.Color.BLACK);

p.explore();


Exploring Remove Red Eye

Type in x and y


Chroma Key – 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


Chromakey

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


Conditional Operators

• We can check if several things are true - And– Using && (evaluation stops if the first item is false)– Using & (to always evaluate both operands)

• We can check if at least one of several things are true - Or– Using || (evaluation stops if the first item is true)– Using | (to always evaluate both operands)

• We can check if only one and only one of the things is true – Exclusive Or– Using ^


Sepia-Toned Pictures

• Have a yellowish tint, used to make things look old and western


Sepia-toned Algorithm

• First make the picture grayscale.• Loop through the pixels in the picture

– 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


Using Multiple If Statements

• If we are doing different things based on a set of ranges– 0 <= x <= 5– 5 < x <= 10– 10 < x

if (0 <= x && x <= 5)Statement or block

if (5 < x && x <= 10)Statement or block

if (10 < x)Statement or block


Using “else if” for > 2 Options

• If we are doing different things based on a set of ranges– 0 <= x <= 5– 5 < x <= 10– 10 < x

• You don’t need to check if x > 5 since the first if block would have executed if it was

if (0 <= x && x <= 5)Statement or block

else if (x <= 10)Statement or block

else Statement or block


Conditionals with > 2 Choices

if (0 <= x && x <= 5)

{

}

else if (x <= 10)

{

}

else // what is x?

{

}


Sepia-toned Method

public void sepiaTint()

{

Pixel pixelObj = null;

double redValue = 0;

double greenValue = 0;

double blueValue = 0;

// first change the current picture to grayscale

this.grayscale();


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 pixelObj = this.getPixel(x,y); redValue = pixelObj.getRed(); greenValue = pixelObj.getGreen(); blueValue = pixelObj.getBlue();



// 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; }



// tint the highlights a light yellow // by reducing the blue else { blueValue = blueValue * 0.9; }

// set the colors pixelObj.setRed((int) redValue); pixelObj.setGreen((int) greenValue); pixelObj.setBlue((int) blueValue); } } }


Testing sepiaTint

• String file = FileChooser.getMediaPath(“gorge.jpg”);

• Picture p = new Picture(file);• p.explore();• p.sepiaTint();• p.explore();


Summary

• You can use DrJava's interactions pane – To try out Java code

• You can use Turtle and World– To create objects and invoke methods– To declare variables– To write a method

• You can use pictures to teach– One-dimensional and two-dimensional arrays– Looping (for-each, while, for)– Conditionals

georgia institute of technology introduction to media computation barb ericson georgia institute of...

Documents