Project “Georgia Computes!” First Courses Workshop Day 2 Mark Guzdial College of Computing...

Project “Georgia Computes!”First Courses WorkshopDay 2

Mark Guzdial College of Computing

Georgia Institute of Technologyguzdial@cc.gatech.edu

http://www.cc.gatech.edu/~mark.guzdialhttp://www.georgiacomputes.org

Workshop Plan-Day 2

9-10:30: Introduction to Computing using Robotics in Python

10:30-11:30: Tackling a homework assignment in Robotics Follow the light

11:30-12:30: Lunch 12:30-2:30: Introduction to Computing for Engienering

using MATLAB 2:30-2:45: Break

2:45-4:30: Data Structures in Media Computation using Java

4:30-5: Wrap-up discussion and evaluation of workshop

CS1 Robotics with Python

Microsoft Research has funded the Institute for Personal Robotics in Education Tucker Balch, Directing

Monica Sweat, Developing GT’s CS1 Joint between Bryn Mawr and

Georgia Tech Doug Blank (Developing Myro) Deepak Kumar (Teaching their first

CS1 with robots) http://www.roboteducation.org

Curriculum Goals

Make entry into computer science more accessible Revamp CS1 & CS2 curricula Use personal robots as a “vehicle” Fresh approach to introducing computing Influence robot design based on past experience Influence software development

Pilot CS1 in Spring 2007

Offered at Bryn Mawr (Deepak Kumar) and GaTech (Monica Sweat)

Use the Parallax Scribbler robot Wireless bluetooth interface designed by

GaTech enables Scribbler interface Myro software running under Dr. Python (IDE) to

control Scribbler Course will provide additional data on curriculum

design

Curriculum Development Strategy

Step One: Figure out something that students will want to do.

Step Two: Teach the CS and Robotics to make that happen.

Goals: Relevance Motivation Context for Transferrable Learning

Example CS1 Exercises: Early Focus on variables, arguments, functions, giving

commands to a computer, sequencing commands

Personalize your robot (use colors, pens, stickers, etc.). Give it a personality, and a specific “move” Then experiment with difference basic robot movement

behaviors (go forward, backward, spin, turn, etc.) and learn how to upload and play a tune. Design a series of steps for your robot to perform a dance while playing a tune.

Test the sensitivity and range of IR sensors for light detection, obstacle detection. The latter will vary depending on the reflectance of the object being sensed... Put these results in Excel to introduce ideas of computational

science: Gathering data from sensors and analyzing it.

Example CS1 Exercises: Later Iteration Focus on iterating, sequencing within an iteration, limiting iteration

Experiment with simple behaviors like going forward for a while and then backward. Repeat these behaviors several times. Does the robot track the same space or are the movements shifting its space? A good way to test these would be to insert a pen and let the robot draw its path each time. This will help observe and get used to variations in your robots motor behaviors.

Write a loop to input a sound (could be on laptop instead of robot) then play it back. Do this in a group of robots. Make a sound, allowing the group behavior and dynamics to create a cacophony.

Write programs for the robot to draw a square, a circle, a figure-8, a 5 point star...and other shapes...a spiral?

Example CS1 Exercises: Powerful Representation and Interpretation Using some other data structure or sensed data as a command to drive

other behavior

Create a file with commands like "left on 30 \n right on 30 \n beep" Write a program to read these commands and execute them – in other words, define a mini robot language and write an interpreter for it. Gives us the opportunity to address string processing, a typical CS1 topic.

Have one robot "call out" audio commands (perhaps specific tones, via the speaker), and have other robots "hear" the commands (via microphones) and execute the commands.

Follow a line of symbols/fiducials, where the symbols (colors or scan codes) can be interpreted as music. Start the robot on the line, and as it encounters the markings, it plays a note. The spacing is the timing of the songs. Put one after another, and they play in a round. Have two go together (on two lines) and they play a harmony. The robot could also write the music with a pen. First robot writes the song, second robot plays it.

Parallax Scribbler Robot

Low cost ($80) and features 3 photosensors IR sensors in front IR on chasis Servo controlled motors 3 Programmable LEDs Speaker Battery operated (6 AAs) Serial interface

Assessment Methods

Within term: Initial, midterm, final surveys.

Focus group or individual student interviews. Across term:

Tracking – do they stay in CS?How well do they do?

Installing Myro on Windows

1. Download the latest Myro from http://wiki.roboteducation.org/Windows_Setup

2. Save it, open it, and expand it.

3. Double-click on install.bat

Setting up Bluetooth

Testing Myro

Testing the Robot

In other words:

initialize(“com5”)

Controlling the robot’s motors

Most Myro robot movement functions control the speed (specifically, amount of power) of the motor. motors(1.0,0.5) # Gives full power to motor Left,

# half power to motor Right

forward(1.0) #Both motors, full speed ahead backward(0.5) #Backwards, half speed turnLeft (0.1) #Turn left, slowly turnRight(0.25) # Turn right, slightly more quickly stop() #STOP EVERYTHING

same as motors(0,0)

Defining a robot function: Yoyo

def yoyo():forward(1)

wait(1) # Wait one second

backward(1)

wait(1)

stop()

Can just type this in, and then execute it as:

yoyo()

Or can enter it into a module (filename)

Parameterizing our YoYo

def yoyo1(speed):forward(speed)

wait(1) # Wait one second

backward(speed)

wait(1)

stop()

Further parameterizing

def yoyo2(speed, wait):forward(speed)

wait(wait) # Wait a bit

backward(speed)

wait(wait)

stop()

Can do something forever

from myro import *initialize(“com5”)def yoyo2(speed, wait):

forward(speed)wait(wait) # Wait one

secondbackward(speed)wait(wait)stop()

def wiggle(speed,waitTime):rotate(speed)wait(waitTime)rotate(-speed)wait(waitTime)stop()

def dance():while True:

yoyo2(1.0,1)wiggle(1.0,0.2)yoyo2(0.5,0.5)wiggle(0.5,0.5)

Use Control-C to stop this.

Using the robot as an object

Robot can be controlled using global functions,or as methods to robot objects.

Review

from myro import *

robot = Scribbler(“com4”)

robot.turnRight(0.25); wait(0.25); robot.stop()

robot.forward(0.25); wait(0.25); robot.stop()

def function():

while True:

Reading the Light Sensors

robot.getLight(0)

robot.getLight(1)

robot.getLight(2)

>>> robot.getLight()

[657, 1453, 1025]

Light sensors

Which one is which?

Exercise: Playing blind man’s bluff 0,1,2: left, right, center? Do the values go up with darkness or with light?

Modeling Animals

How do animals sense light? Why do moths move to the light? How do they know which way to turn to

get there? Does it matter if you see vs. smell?

Let’s model light-seeking behavior

Choosing action depending on senses

New statement: if Allows us to test conditions (logical expressions)

and choose actions based on those conditions. if (some logical test goes here) :

The actions go on the line below, indented.if robot.getLight(0) > 800:

robot.turnLeft(0.25)

Blocks

Just like the lines after def and while, all the lines indented the same after if are part of the same block

A block is defined in Python by indentation. Lines at the same level of indentation are in the same block.

A block is used to define the body of a function and the loop.

A block is used to define the actions of a successful if test.

Where’s the light?

We can compare against a value, but what we really care about is the relative light values.

if robot.getLight(0) > robot.getLight(2):

print "LEFT!"

Signaling a Turn

def signalingTurn(): left = 0 right = 2 while True: if robot.getLight(left) < robot.getLight(right): print “Left!" if robot.getLight(right) < robot.getLight(left): print "Right!"

signalingTurn()

Audibly signaling a turn

def signalingTurn(): left = 0 right = 2 while True: if robot.getLight(left) < robot.getLight(right): robot.beep(0.25,400) if robot.getLight(right) < robot.getLight(left): robot.beep(0.25,800)

signalingTurn()

Making Music

beep(1,400) #Plays at frequency 400 Hz # for 1 second

computer.beep(0.5,440)# Has the computer beep at A-above-middle C

# (440 Hz) for ½ second

Can they play a duet?Try it!

Myro Song Format

Myro has a more music-like format that it supports:s = makeSong(“c 1; d .5; d#4 1/2”)

# C in the fifth octave for a whole note

# D in the fifth octave for a 1/2 note

# D-sharp in fourth octave for a 1/2 note

robot.playSong(s,0.75) # Play this for ¾ second

Exercises

Option #1: Follow the Light Write a function that will turn the robot toward

the light, much as an insect might follow the light. Can you turn based on the amount of light?

Option #2: Make the Robot Dance Write a program to play music and “dance” your

Scribbler Use beep() and playSong to make music Use movements like yoyo and wiggle

CS1 for Engineering in MATLAB

Syllabus Sample lessons on getting started

Syllabus Getting started with MATLAB

Introduction to Vectors, the main MATLAB data type Conditionals, iteration, and functions Cell arrays (mini-databases) Structures Problem solving General arrays Graphing (MATLAB does professional quality graphics) Bodies of Rotation and Matrices File I/O Multimedia: Image and sound manipulation Serious CS: Numerical methods, Big O, Sorting,

Queues, and Graphs

Objectives – the MATLAB User Interface■ How to use the Command window to explore single

commands interactively and how to recall earlier commands to be repeated or changed

■ Where to examine the variables and files created in MATLAB

■ How to view and edit data tables created in MATLAB■ How MATLAB presents graphical data in separate

windows■ How to create scripts to solve simple arithmetic problems

The Default WindowFile menu

Close icon

Current directoryCurrent

directory

Command window

Workspace window

Command history

Array Editor

New variable icon

If you don’t have MATLAB, Octave!

2.4 Scripts

Create a script derived from the Pythagorean theorem to compute the hypotenuse of a right triangle:

H2 = A2 + B2

where A and B are the sides adjacent to the right angle, and H is the hypotenuse opposite.

clearclc

A = 3; % the first side of a triangleB = 4; % the second side of a trianglehypSq = A^2 + B^2; % the square of the% hypotenuseH = sqrt(hypSq) % the answer

2.5 Engineering Example—Spacecraft Launchclearclc

cmPerInch = 2.54; % general knowledgeinchesPerFt = 12; % general knowledgemetersPerCm = 1/100; % general knowledgeMetersPerFt = metersPerCm * cmPerInch * inchesPerFt;startFt = 25000; % ft - givenstartM = startFt * MetersPerFt;g = 9.81; % m/sec^2top = 100; % km - givens = (top*1000) - startM; % minitial_v = (2*g*s)^0.5 % the final answer

3.1 Concept: Using Built-in Functions In this chapter we will see the use of some of the functions built into

MATLAB. At the end of each chapter that uses built-in functions, you will find a

summary table listing the function specifications. For help on a specific function, you can type the following:

>> help <function name> For example:

>> help sqrt SQRT Square root.

SQRT(X) is the square root of the elements of X. Complex results are produced if X is not positive.

3.2 Concept: Data Collections

This section considers two very common ways to group data: in arrays and in vectors.Data Abstraction allows us to refer to groups of data collectively:

“all the temperature readings for May” or “all the purchases from Wal-Mart.”

We can not only move these items around as a group, but also perform mathematical or logical operations on these groups, e.g.:

compute the average, maximum, or minimum temperatures for a month

A Homogeneous Collection is constrained to accept only items of the same data type – in this case, they will all be numbers

3.3 MATLAB Vectors

Individual items in a vector are usually referred to as its elements. Vector elements have two separate and distinct attributes that make them unique in a specific vector:

their numerical value and their position in that vector.

For example, the individual number 66 is the third element in this vector. Its value is 66 and its index is 3. There may be other items in the vector with the value of 66, but no other item will be located in this vector at position 3.

Vector Manipulation

We consider the following basic operations on vectors:

Creating a Vector Determining the size of a Vector Extracting data from a vector by indexing Shortening a Vector Mathematical and logical operations on Vectors

Creating a Vector – Constant Values Entering the values directly, e.g.

A = [2, 5, 7, 1, 3] Entering the values as a range of numbers e.g.,

B = 1:3:20

Using the linspace(...) function e.g. C = linspace (0, 20, 11)

Using the functions zeros(1,n), ones(1,n), rand(1,n) and randn(1,n) to create vectors filled with 0, 1, or random values between 0 and 1

Size of Vectors and Arrays

MATLAB provides two functions to determine the size of arrays in general (a vector is an array with one row):

the function size(A) when applied to the array A returns vector containing two quantities: the number of rows and the number of columns

The function length(A) returns the maximum value in the size of an array; for a vector, this is its length.

Indexing a Vector

The process of extracting values from a vector, or inserting values into a vector

Syntax: v(index) returns the element(s) at the location(s)

specified by the vector index. v(index) = value replaces the elements at the

location(s) specified by the vector index. The indexing vector may contain either

numerical or logical values

Numerical Indexing

The indexing vector may be of any length It should contain integer (non-fractional)

numbers The values in the indexing vector are

constrained by the following rules:For reading elements, all index values must be

1 <= element <= length(vector)For replacing elements, all index values must be

1 <= element

Replacement Rules

1. Either:• All dimensions of the blocks on either side of the replacement

instruction must be equal, or• There must be a single element on the RHS of the

replacement

2. If you replace beyond the end of the existing vector, the vector length is automatically increased.

• Any element not specifically replaced remains unchanged.• Elements beyond the existing length not replaced are set to 0.

Logical Indexing The indexing vector length must be less than or equal to

the original vector length It must contain logical values (true or false) Access to the vector elements is by their relative position

in the logical vector When reading elements, only the elements corresponding to

true index values are returned When replacing elements, the elements corresponding to true

index values are replaced Beware – logical vectors in Matlab echo in the Command

window as 1 or 0, but they are not the same thing.

Shortening an Array

Never actually necessary. It is advisable to extract what you want by indexing rather than removing what you don’t want.

Can lead to logic problems when changing the length of a vector

Accomplished by assigning the empty vector ([]) to elements of a vector, or to complete rows or columns of an array.

Operating on Vectors

Three techniques extend directly from operations on scalar values:

■ Arithmetic operations■ Logical operations■ Applying library functions

Two techniques are unique to arrays in general, and to vectors in particular:

■ Concatenation■ Slicing (generalized indexing)

Arithmetic operations

In the Command window, enter the following:>> A = [2 5 7 1 3];>> A + 5ans =7 10 12 6 8>> A .* 2ans =4 10 14 2 6>> B = -1:1:3B =-1 0 1 2 3

Arithmetic operations (continued)

>> A .* B % element-by-element multiplicationans =-2 0 7 2 9>> A * B % matrix multiplication!!??? Error using ==> mtimesInner matrix dimensions must agree.>> C = [1 2 3]C =1 2 3>> A .* C % A and C must have the same length??? Error using ==> timesMatrix dimensions must agree.

Logical operations

>> A = [2 5 7 1 3];>> B = [0 6 5 3 2];>> A >= 5ans =0 1 1 0 0>> A >= Bans =1 0 1 0 1>> C = [1 2 3]>> A > C??? Error using ==> gt

Matrix dimensions must agree.

Logical operations (continued)

>> A = [true true false false];>> B = [true false true false];>> A & Bans =1 0 0 0>> A | Bans =1 1 1 0>> C = [1 0 0]; % NOT a logical vector>> A(C) % yes, you can index logical vectors, but ...??? Subscript indices must either be real positive

integers or logicals.

A Footnote: the find function

Continuing the code above:>> C = find(B)ans = [1 3]

The find(...) function consumes a logical vector and returns the numerical indices of the elements of that vector that are true.

Applying library functions

All MATLAB functions accept vectors of numbers rather than single values and return a vector of the same length. Special Functions:■ sum(v) and mean(v) consume a vector and return a number■ min(v) and max(v) return two quantities: the minimum ormaximum value in a vector, plus the position in that vectorwhere that value occurred. ■ round(v), ceil(v), floor(v), and fix(v) remove the fractional part of the numbers in a vector by conventional rounding, rounding up, rounding down, and rounding toward zero, respectively.

Concatenation

MATLAB lets you construct a new vector by concatenating other vectors: A = [B C D ... X Y Z]where the individual items in the brackets may be any vector defined as a constant or variable, and the length of A will be the sum of the lengths of the individual vectors. A = [1 2 3 42]is a special case where all the component elements are scalar quantities.

Slicing (generalized indexing)

A(4) actually creates an anonymous 1 × 1 index vector, 4, and then using it to extract the specified element from the array A.

In general, B(<rangeB>) = A(<rangeA>)

where <rangeA> and <rangeB> are both index vectors, A is an existing array, and B can be an existing array, a new array, or absent altogether (giving B the name ans). The values in B at the indices in <rangeB> are assigned the values of A from <rangeA> .

Rules for Slicing

■ Either the dimensions of <rangeB> must be equal to the dimensions of <rangeA> or <rangeA> must be of size 1

■ If B did not exist before this statement was implemented, it is zero filled where assignments were not explicitly made

■ If B did exist before this statement, the values not directly assigned in <rangeB> remain unchanged

Representing Mathematical Vectors

An unfortunate clash of names Vectors in mathematics can be represented by Matlab

vectors The first, second and third values being the x, y and z

components Matlab vector addition and subtraction work as expected. Matlab magnitude and scaling works as expected. Dot product is just the sum of A .* B Cross product has a Matlab function

Engineering Example—Forces and Moments So given a pair of forces A

and B acting at a point P, find: The resultant force, and The moment of that resultant

about the origin

Vector SolutionclearclcPA = [0 1 1]PB = [1 1 0]P = [2 1 1]M = [4 0 1]% find the resultant of PA and PBPC = PA + PB% find the unit vector in the direction of PCmag = sqrt(sum(PC.^2))unit_vector = PC/mag% find the moment of the force PC about M% this is the cross product of MP and PCMP = P - Mmoment = cross( MP, PC )

MATLAB Arrays

A Transposed Array

Array Manipulation

We consider the following basic operations on vectors:

Creating an array Extracting data from an array by indexing Shortening an array Mathematical and logical operations on arrays

Creating an Array – Constant Values Entering the values directly, e.g.

A = [2, 5, 7; 1, 3, 42] the semicolon identifies the next row, as would a new line in the command

Using the functions zeros( rows, cols), ones(rows, cols), rand(rows, cols) and randn(rows, cols) to create vectors filled with 0, 1, or random values between 0 and 1

Indexing an Array

The process of extracting values from an array, or inserting values into an array

Syntax: A(row, col) returns the element(s) at the location(s)

specified by the array row and column indices. A(row, col) = value replaces the elements at the

location(s) specified by the array row and column indices.

The indexing row and column vectors may contain either numerical or logical values

Numerical Indexing

The indexing vectors may be of any length It should contain integer (non-fractional)

numbers The values in the indexing vectors are

constrained by the following rules:For reading elements, all index values must be

1 <= element <= length(array dimension)For replacing elements, all index values must be

1 <= element

Replacement Rules

1. Either:• All dimensions of the blocks on either side of the replacement

instruction must be equal, or• There must be a single element on the RHS of the

replacement

2. If you replace beyond the end of any dimension of the existing array, the size in that dimension is automatically increased.

• Any element not specifically replaced remains unchanged.• Elements beyond the existing dimension length not replaced

are set to 0.

Logical Indexing

The indexing vector length must be less than or equal to the original array dimension

It must contain logical values (true or false) Access to the array elements is by their relative

position in the logical vectors When reading elements, only the elements

corresponding to true index values are returned When replacing elements, the elements

corresponding to true index values are replaced

Operating on Arrays

Four techniques extend directly from operations on vectors:

■ Arithmetic operations■ Logical operations■ Applying library functions■ Slicing (generalized indexing)

The following deserves an additional word because of the nature of arrays:

■ Concatenation

Array Concatenation

Array concatenation can be accomplished horizontally or vertically: R = [A B C] succeeds as long as A, B and C have the

same number of rows; the columns in R will be the sum of the columns in A, B and C.

R = [A; B; C] succeeds as long as A, B and C have the same number of columns; the rows in R will be the sum of the rows in A, B and C.

Reshaping Arrays

Arrays are actually stored in column order in Matlab. So internally, a 2 × 3 array is stored as a column vector: A(1,1) A(2,1) A(1,2) A(2,2) A(1,3) A(2,3)

Any n × m array can be reshaped into any p × q array as long as n*m = p*q using the reshape function.

3.6 Engineering Example—Computing Soil Volume Consider the example where you are given the

depth of soil from a survey in the form of a rectangular array of soil depth.

You are also given the footprint of the foundations of a building to be built on that site and the depth of the foundation.

Compute the volume of soil to be removed.

Survey Data

Building Footprint

Solutionclearclc% soil depth data for each square produced % by the surveydpth = [8 8 9 8 8 8 8 8 7 8 7 7 7 7 8 8 8 78 8 8 8 8 8 8 7 7 7 7 7 8 7 8 8 8 7 . . .9 8 8 7 7 8 7 7 7 7 8 8 9 9 9 8 7 8];% estimated proportion of each square that should % be excavatedarea = [1 1 1 1 1 1 1 1 1 1 .3 0 0 0 0 0 0 0 . . .0 0 0 0 0 0 .4 .8 .9 1 1 1 1 1 1 1 1 .6];square_volume = dpth .* area;total_soil = sum(sum(square_volume))

4.1 Concept: Code Blocks A code block is a collection of zero or more MATLAB instructions

identified for one of two reasons:1. you wish to execute them only under certain circumstances, or2. You wish to repeat them a certain number of times

Some languages identify code blocks by enclosing them in braces ({. . .}); others identify them by the level of indentation of the text.

MATLAB uses the occurrence of key command words in the text to define the extent of code blocks: if, switch, while, for, case, otherwise, else,

elseif, end Code blocks are identified with blue coloring by the MATLAB text

editor. They are not part of the code block, but they serve both as instructions on what to do with the code block, and as delimiters that define the extent of the code block.

4.2 Conditional Execution in General Basic conditional execution

requires two things: A logical expression, and A code block

If the expression is true, the code block is executed.

Otherwise, execution is resumed at the instruction following the code block

Compound conditionals

By introducing elseif and else, we allow for the possibility of either conditional or unconditional execution when a test returns false as illustrated.

4.3 if Statements

The general template for if statements is:if <logical expression 1> <code block 1>elseif <logical expression 2> <code block 2>...elseif <logical expression n> <code block n>else <default code block>end

General Observations

A logical expression is any statement that returns a logical result.

If that result is a logical vector, v, the if statement behaves as: if all(v)

While indentation has no effect on the logical flow, it helps to clarify the logical flow. The MATLAB editor automatically creates suitable indentation as you type.

4.4 switch Statements

The template for a switch statement is:switch <parameter> case <case specification 1> <code block 1> case <case specification 2> <code block 2> . . case <case specification n> <code block n> otherwise <default code block> end

General Observations

The switch statement is looking for the parameter to have an exact match to one of the cases.

One case specification may have multiple values enclosed in braces( {…}).

The default case catches any values of the parameter other than the specified cases.

The default case should trap bad parameter values.

4.5 Iteration in General

Iteration allows controlled repetition of a code block. Control statements at the beginning of the code block specify the manner and extent of the repetition:

The for loop is designed to repeat its code block a fixed number of times and largely automates the process of managing the iteration.

The while loop is more flexible in character. Its code block can be repeated a variable number of times. It is much more of a “do-it-yourself” iteration kit.

4.6 for Loops

The template for a for loop is:for <variable> = <vector> <code block>end

The for loop automatically sets the value of the variable to each element of the vector in turn and executes the code block with that value.

4.7 while Loops

The code block will be repeated as long as the logical expression returns true.

The while loop template is:<initialization>while <logical expression> <code block> % must make some changes % to enable the loop to terminateend

4.8 Engineering Example—Computing Liquid LevelsGive a tank as shown, how do you calculate the volume of liquid? The answer of course is “it depends on h.”If h <= r, do one calculation;otherwise if h < (H-r) do a second;Otherwise if h <= H, do a third;Otherwise there is an error!

The Solutionif h < r v = (1/3)*pi*h.^2.*(3*r-h);elseif h < H-r v = (2/3)*pi*r^3 + pi*r^2*(h-r);elseif h <= H v = (4/3)*pi*r^3 + pi*r^2*(H-2*r) ... - (1/3)*pi*(H-h)^2*(3*r-H+h);else disp(‘liquid level too high’) continueendfprintf( ... 'rad %0.2f ht %0.2f level %0.2f vol %0.2f\n', ... r, H, h, v);

5.1 Concept: Abstraction

Procedural abstraction permits a code block that solves a particular sub-problem to be packaged and applied to different data inputs.

analogous to the concept of data abstraction where individual data items are gathered to form a collection.

We have already used a number of built-in procedural abstractions in the form of functions.

They allow us to apply a code block about which we know nothing to data that we provide.

5.1 Concept: Encapsulation

Encapsulation is the concept of putting a wrapper around a collection that you wish to protect from outside influence. Functions encapsulate the code they contain in two ways:

the variables declared within the function are not visible from elsewhere, and

the function’s ability to change the values of variables (otherwise known as causing side effects) is restricted to its own code body.

5.2 Black Box View of a Function

<param 1...n> are the formal parameters – the names given to the incoming data inside the function.

<item 1...n> are the actual parameters provided to the function by its caller. They may have names different from the formal parameter names They are correlated to the formal parameter names by their position

5.3 MATLAB Implementation

The template for defining a function is:function <return info> <function name> (<parameters>) <documentation> <code body> % must return the results

The function code must be stored in a file whose name is the name of the function.

Functions return data to the caller by assigning values to the return variable(s)

MATLAB throws an error if a function does not make assignments to all the return variables.

5.4 Engineering Example—Measuring a Solid Object

We need to compute the volume and wetted area of this object.

This requires one function that computes the volume and wetted area of a cylinder

We have a range of disk heights for which we require this information.

Solution

The function stored in cylinder.mfunction [area, volume] = cylinder(height, radius)% function to compute the area and volume of a cylinder% usage: [area, volume] = cylinder(height, radius)base = pi .* radius.^2;volume = base .* height;area = 2 * pi * radius .* height + 2 * base;

The test script

clearclch = 1:5; % set a range of disk thicknessesR = 25;r = 3;[Area Vol] = cylinder(h, R) % dimensions of large disk[area vol] = cylinder(h, r) % dimensions of the hole% compute remaining volumeVol = Vol - 8*volArea = Area + 8*(area - 2*2*pi*r.^2)

Background

Two relationships between characters and numbers1. Individual characters have an internal numerical

representation: The shapes we see in windows are created by a character generator.

2. Strings of characters represent numerical values: Numerical values are stored in MATLAB in a special, internal

representation for efficient numerical computation. Whenever we need to see the value of a number, the internal

representation is converted into a character string representing its value in a form we can read.

Similarly, to enter numerical values, we create a character string and have it converted to the internal representation

Concept: Mapping

Mapping defines a relationship between two entities. e.g. the idea that the function f(x) = x2 defines the mapping between the value of x and the value

of f(x).

We will apply that concept to the process of translating a character (like ‘A’) from its graphical form to a numerical internal code. Character mapping allows each individual graphic character to be uniquely represented by a numerical value.

Concept: Casting

Casting is the process of changing the way a language views a piece of data without actually changing the data value. Under normal circumstances, a language like MATLAB automatically presents a set of data in the “right” form. However, there are times when we wish to force the language to treat a data item in a specific way; we might want to view the underlying numerical representation as a number rather that as a character, in which case we have to cast the variable containing the character to a numerical data type.MATLAB implements casting as a function with the name of the data type expected. In essence, these functions implement the mapping from one character representation to another.

MATLAB Implementation of Casting

>> uint8('A') % uint8 is an integer data type % with values 0 - 255ans = 65>> char(100) % char is the character classans = d>> char([97 98 99 100 101])ans = abcde>> double('fred')ans = 102 114 101 100>> fred = 'Fred'fred = Fred>> next = fred + 1next = 71 115 102 101>> a = uint8(fred)a = 70 114 101 100>> name = char(a + 1)name = Gsfe

String Operations

Since strings are internally represented as vectors of numbers, all the normal vector operations apply: Arithmetic and logical operations Concatenation Shortening Indexing Slicing

Conversion from Numbers to Strings

Use the following built-in MATLAB functions for a simple conversion of a single number, x, to its string representation:

int2str(x) if you want it displayed as an integer value num2str(x, n) to see the decimal parts; the parameter n

represents the number of decimal places required—if not specified, its default value is 3

sprintf(…) provides finer-grained format control Its first parameter is a format control string that defines how

the resulting string should be formatted. A variable number of value parameters follow the format string,

providing data items as necessary to satisfy the formatting.

Format Control in sprintf(…) Characters in the format string are copied to the result string. Special behavior is introduced by two special characters:

'%' introduces a conversion specification: %d (integer), %f (real), %g (general), %c (character) and %s(string).

Each conversion requires a value parameter in the sprintf(…) call.A number may be placed immediately after the % character to specify the minimum number of characters in the conversion. The %f and %g conversions can include '.n' to indicate the number of decimal places required.

'\' introduces escape characters for format control. The most common: \n (new line) and \t (tab).

Conversion from Strings to Numbers:input(…)

When possible, allow input(...) to do the conversion. The function input(str) presents the string parameter to the user in the

Command window and waits for the user to type some characters and the Enter key, all of which are echoed in the Command window. Then it converts the input string according to the following rules. If the string begins with:

a numerical character, MATLAB converts the string to a number An alpabetic character, MATLAB constructs a variable name and looks

for its definition an open bracket, '[', an array is constructed the single quote character, MATLAB creates a string If a format error occurs, MATLAB repeats the prompt.

This behavior can be modified if 's' is provided as the second parameter to input(…), in which case the complete input character sequence is saved as a string regardless of content.

Conversion from Strings to Numbers: sscanf

In its simplest form, CV = sscanf(str, fmt) scans the string str and converts each data item according to the conversion specifications in the format string fmt.

Each item discovered in str produces a new row on the result array, CV, a column vector.

If you convert strings this way, each character in the string becomes a separate numerical result in the output vector.

MATLAB allows you to substitute thecharacter '*' for the conversion size parameter to suppress any strings in the input string. For example:str = 'are 4.700 1.321 4.800000'B = sscanf( str, '%*s %f %f %f')B =4.70001.32104.8000

Miscellaneous Character String Operations disp(…) shows the contents of a variable in the

Command Window fprintf(…) formats data for the Command Window exactly

as sprintf does to produce a string.

String Comparison Strings may be compared as vectors; however, they must then obey vector

comparison rules strcmp(…) and strcmpi(…) compare strings of any length.

>> 'abcd' == 'abcd'ans = 1 1 1 1>> 'abcd' == 'abcde'??? Error using ==> eqArray dimensions must match for binary array op.>> strcmp('abcd', 'abcde')ans = 0>> strcmp('abcd', 'abcd')ans = 1>> 'abc' == 'a'ans = 1 0 0>> strcmpi('ABcd', 'abcd')ans = 1

6.5 Arrays of Strings

Character string arrays can be constructed by either of the following: As a vertical vector of strings, all of which must be the

same length By using a special version of the char(…) cast

function that accepts a variable number of strings with different lengths, pads them with blanks to make all rows the same length, and stores them in an array of characters

Engineering Example—Encryption

Encryption is the process of somehow changing a message in the form of a string of characters so that it can be understood at its destination, but is unintelligible to a third party who does not have access to the

original encryption scheme.

Early encryption schemes involved shifting characters in the alphabet either by a constant amount or according to a one-time message pad.

However, these schemes are relatively easily cracked by examining letter frequencies.

Our Approach

We will use a scheme that makes use of the MATLAB random number generator to create a random character shift unique to each occurrence of characters in a message, so that letter frequency cannot be used to determine the encryption technique.

At the destination, as long as the random number generator is seeded with an agreed value, the message can be reconstructed by shifting back the message characters.

A few minor modifications wrap the characters on the alphabet to remain within the set of printable letters.

The Solution - encryption%%% encryption section% seed the random generator to a known staterand('state', 123456)loch = 33;hich = 126;range = hich+1-loch;rn = floor( range * rand(1, length(txt) ) );change = (txt>=loch) & (txt<=hich);enc = txt;enc(change) = enc(change) + rn(change);enc(enc > hich) = enc(enc > hich) - range;disp('encrypted text')encrypt = char(enc);

The Solution - decryption

%% good decryption% seed the random generator to the same staterand('state', 123456);rn = floor( range * rand(1, length(txt) ) );change = (encrypt>=loch) & (encrypt <= hich)dec = encrypt;dec(change) = dec(change) - rn(change) + range;dec(dec > hich) = dec(dec > hich) - range;disp('good decrypt');decrypt = char(dec)

String Functions

num2str(a,n) Converts a number to its numerical representation with n decimal places

disp(...) Displays matrix or textfprintf(...) Prints formatted informationinput(...) Prompts the user to enter a valuesscanf(...) Formats input conversionsprintf(...) Formats a string resultstrcmp(s1, s2) Compares two strings; returns true if equalstrcmpi(s1, s2) Compares two strings without regard to

case; returns true if equal

1-116

11.1 Plotting in General The fundamental container for plotting is a

MATLAB figure Simple plot of x versus y: plot(x, y) Plot enhancements

axis, colormap, grid on, hold on, legend, shading, text, title, view, xlabel, ylabel, zlabel

Use subplot(r, c, n) for multiple plots on one figure

1-117

Plot Enhancements1. clf

2. x = -2*pi:.05:2*pi;

3. subplot(2,3,1)

4. plot(x, sin(x))

5. title('1 - sin(x)');

6. subplot(2,3,2)

7. plot(x, cos(x))

8. title('2 - cos(x)');

9. subplot(2,3,3)

10. plot(x, tan(x))

11. title('3 - tan(x)');

12. subplot(2,3,4)

13. plot(x, x.^2)

14. title('4 - x^2');

15. subplot(2,3,5)

16. plot(x, sqrt(x))

17. title('5 - sqrt(x)');

18. subplot(2,3,6)

19. plot(x, exp(x))

20. title('4 - e^x');

1-118

11.2 2-D Plotting Basic function for 2-D plots: plot(x, y, str)

x and y are vectors of the same length str specifies optional line color & style control

Plot options subplot, axis, hold on, title

Parametric plotting Allows the variables on each axis to be dependent on

a separate, independent variable

1-119

Multiple 2-D Plots

1-120

Special 2-D Effects% Code for the first three plots

1. clear

2. clc

3. close all

4. x = linspace(0, 2*pi);

5. subplot(2, 3, 1)

6. plot(x, sin(x))

7. axis([0 2*pi -0.5 0.5])

8. title('Changing Data Range on an Axis')

9. subplot(2, 3, 2)

10. plot(x, sin(x))

11. hold on

12. plot(x, cos(x))

13. axis tight

14. title('Multiple Plots with hold on')

15. subplot(2, 3, 3)

16. plot(x, sin(x), 'ó')

17. hold on

18. plot(x, cos(x), 'r:')

19. axis tight

20. title('Multiple Plots with hold on')

1-121

Transforming a Circle to an Airfoil

1-122

11.3 3-D Plotting 2-D plots in MATLAB are actually 3-D plots (select

the Rotate 3D icon on the tool bar) Linear 3-D Plots

Extend 2-D plots by adding a set of z values Use plot3(x, y, z, str)

Linear Parametric 3-D Plots Allow variables on each axis to be dependent on a

separate, independent variable Other plot capabilities

bar3(x, y), barh3(x, y), pie3(y)

1-123

3-D View of a 2-D Plot

1-124

3-D Line plots

1-125

Parametric Line Plots

1-126

11.4 Surface Plots Production of images based on mapping a 2-D

surface create a plaid Basic capabilities

meshgrid(x, y): compute mappings for the 3-D coordinates

mesh(xx, yy, zz): plots the surface as white facets outlined by colored lines

surf(xx, yy, zz): plots the surface as colored facets outlined by black lines

1-127

Designing a Cube Surface plot

1-128

Cube Surfaces

1-129

Simple Surface Plot

1-130

Compound Surface Plot

1-131

Using External Illumination

1-132

Designing a Cylinder Plot

1-133

Cylinder Plot

1-134

Sphere Plot

Bodies of Rotation Created by rotating a linear curve about a

specified axis i.e. rotate z = f(x) about the x or z axes (not y)

Rotate z = f(x) about the x-axis y = r cos(θ), z = r sin(θ)

Rotate z = f(x) about the z-axis x = r cos(θ), y = r sin(θ)

1-135

1-136

Rotating About the X Axis

1-137

Rotating About the Z Axis

1-138

Bodies of Rotation

1-139

Rotating Arbitrary Shapes

General Rotation TechniquesRotating about an Arbitrary Axis

1-140

• Calculate the matrix that will place your axis of rotation along the x-axis

• Transform x and z with that rotation

• Rotate the results about the x-axis

• Invert the transformation on the resulting surface

1-141

A Solid Disk

1-142

A Klein Bottle

1-143

11.5 Engineering Example—Visualizing Geographic Data

Two files of data atlanta.txt: presents streets of Atlanta ttimes.txt: travel times between suburbs and city

Analyzing the Data Determine the file format Discern the street map file content Discern the travel time file content

1-144

Map of Atlanta

Multimedia CS2 in Java

Driving question: “How did the wildebeests stampede in The Lion King?”

Spring 2005: 31 students, 75% female, 91% success rate.

Connecting to the WildebeestsIt’s all about data structures

Syllabus

Introduction to Java and Media Computation Manipulating turtles, images, MIDI, sampled sounds. Insertion and deletion (with shifting) of sampled

sounds (arrays).

Structuring Music Goal: A structure for flexible music composition Put MIDI phrases into linked list nodes.

Use Weave and Repeat to create repeating motifs as found in Western Music

At very end, create a two-branched list to start on trees.

CanonSwan

Bells Fur Elise

HW2: Create a collage, but must use turtles

Syllabus (Continued)

Structuring Images Using linearity in linked list to

represent ordering (e.g., left to right) Using linearity in linked list to

represent layering (as in PowerPoint) Mixing positioned and layered in one

structure, using abstract super classes.

Structuring a scene in terms of branches—introducing a scene graph (first tree)

(We’ll see these slides as an example later.)

Syllabus (Cont’d)

Structuring Sound Collecting sampled

sounds into linked lists and trees, as with images.

But all traversals are recursive.

Use different traversals of same tree to generate different sounds.

Replace a sound in-place

Original

Scale the children

Scale the next

Syllabus (cont’d)

Generalizing lists and trees Create an abstract class

“Linked List Node” (LLNode) on top of the sound and image class hierarchies

Make all image and sound examples work the same

abstract LLNode

Knows next

Knows how to do all basic list operations

Syllabus (Cont’d)

GUIs as trees We introduce construction

of a Swing frame as construction of a tree.

Different layout managers are then different renderers of the same tree.

JFrame

JPanel

JLabel “This is panel1!”

JPanel

JButton “Make a sound”

JButton “Make a picture”

Syllabus (cont’d)

Lists that Loop Introduce circular linked lists as a way of create

Mario-Brothers’ style cel animations. Introduce trees that loop as a way of introducing

graphs.

gal1-rightface.jpg gal1-

right2.jpg

gal1-right1.jpg

gal1-rightface.jpg

Syllabus (cont’d)

Introducing Simulations Introduce continuous and discrete event simulations, and

Normal and uniform probability distributions We do wolves and deer,

disease propagation,political influence.

Create a set of classes for simulation, then re-write our simulations for those classes.

Writing results to a file for later analysis

Finally, Making the Wildebeests and Villagers Mapping from positions of our turtles to an animation frame. Creating an animation from a simulation.

HW7: Simulate European emigration to America Students are

required to try several different scenarios, aiming for historical accuracy.

Counts of Europeans, Americans, and in-transit per year are written to a file for graphing in Excel

Syllabus (cont’d)

Introduction to Discrete Event Simulations Create a discrete event simulation of trucks, factories,

salespeople, and markets. Use turtles to create an animated display. Now, the real focus is the simulation, and the

animation is just a mapping from the simulation. Animation becomes yet another medium in which we can

review results, like data in an Excel spreadsheet, music, or sound.

Example Slides

These come from the section on Structuring Music then Structuring Images

Version 3: SongNode and SongPhrase SongNode instances will hold pieces (phrases)

from SongPhrase. SongNode instances will be the nodes in the

linked list Each one will know its next.

Ordering will encode the order in the Part. Each one will get appended after the last.

Using SongNode and SongPhrase

Welcome to DrJava.> import jm.JMC;> SongNode node1 = new SongNode();> node1.setPhrase(SongPhrase.riff1());> SongNode node2 = new SongNode();> node2.setPhrase(SongPhrase.riff2());> SongNode node3 = new SongNode();> node3.setPhrase(SongPhrase.riff1());> node1.setNext(node2);> node2.setNext(node3);> node1.showFromMeOn(JMC.SAX);

All three SongNodes in one Part

How to think about it

node1

myPhrase: riff1

next: node2

node2

myPhrase: riff2

next: node3

node3

myPhrase: riff1

next: null

Declarations for SongNode

import jm.music.data.*;import jm.JMC;import jm.util.*;import jm.music.tools.*; public class SongNode { /** * the next SongNode in the list */ private SongNode next; /** * the Phrase containing the notes and durations associated with this node */ private Phrase myPhrase;

SongNode’s know their Phrase and the next node in the list

Constructor for SongNode

/**

* When we make a new element, the next part is empty, and ours is a blank new part

*/

public SongNode(){

this.next = null;

this.myPhrase = new Phrase();

}

Setting the phrase

/**

* setPhrase takes a Phrase and makes it the one for this node

* @param thisPhrase the phrase for this node

*/

public void setPhrase(Phrase thisPhrase){

this.myPhrase = thisPhrase;

}

Linked list methods /** * Creates a link between the current node and the input node * @param nextOne the node to link to */ public void setNext(SongNode nextOne){ this.next = nextOne; } /** * Provides public access to the next node. * @return a SongNode instance (or null) */ public SongNode next(){ return this.next; }

insertAfter /** * Insert the input SongNode AFTER this node, * and make whatever node comes NEXT become the next of the input node. * @param nextOne SongNode to insert after this one */ public void insertAfter(SongNode nextOne) { SongNode oldNext = this.next(); // Save its next this.setNext(nextOne); // Insert the copy nextOne.setNext(oldNext); // Make the copy point on to the rest

}

Using and tracing insertAfter()

> SongNode nodeA = new SongNode();> SongNode nodeB = new SongNode();> nodeA.setNext(nodeB);> SongNode nodeC = new SongNode()> nodeA.insertAfter(nodeC);

public void insertAfter(SongNode nextOne) { SongNode oldNext = this.next(); // Save its next this.setNext(nextOne); // Insert the copy nextOne.setNext(oldNext); // Make the copy point on to the rest

}

Traversing the list

/** * Collect all the notes from this node on * in an part (then a score) and open it up for viewing. * @param instrument MIDI instrument (program) to be used in playing this list */ public void showFromMeOn(int instrument){ // Make the Score that we'll assemble the elements into // We'll set it up with a default time signature and tempo we like // (Should probably make it possible to change these -- maybe with inputs?) Score myScore = new Score("My Song"); myScore.setTimeSignature(3,4); myScore.setTempo(120.0); // Make the Part that we'll assemble things into Part myPart = new Part(instrument); // Make a new Phrase that will contain the notes from all the phrases Phrase collector = new Phrase(); // Start from this element (this) SongNode current = this; // While we're not through... while (current != null) { collector.addNoteList(current.getNotes()); // Now, move on to the next element current = current.next(); }; // Now, construct the part and the score. myPart.addPhrase(collector); myScore.addPart(myPart); // At the end, let's see it! View.notate(myScore);

}

The Core of the Traversal// Make a new Phrase that will contain the notes from all the phrases

Phrase collector = new Phrase(); // Start from this element (this) SongNode current = this; // While we're not through... while (current != null) { collector.addNoteList(current.getNotes()); // Now, move on to the next element current = current.next(); };

Then return what you collected

// Now, construct the part and the score.

myPart.addPhrase(collector);

myScore.addPart(myPart);

// At the end, let's see it!

View.notate(myScore);

}

getNotes() just pulls the notes back out

/** * Accessor for the notes inside the node's phrase * @return array of notes and durations inside the phrase */ private Note [] getNotes(){ return this.myPhrase.getNoteArray(); }

SongPhrase

SongPhrase is a collection of static methods. We don’t ever need an instance of SongPhrase. Instead, we use it to store methods that return

phrases. It’s not very object-oriented, but it’s useful here.

SongPhrase.riff1()import jm.music.data.*;import jm.JMC;import jm.util.*;import jm.music.tools.*;

public class SongPhrase { //Little Riff1 static public Phrase riff1() { double[] phrasedata = {JMC.G3,JMC.EN,JMC.B3,JMC.EN,JMC.C4,JMC.EN,JMC.D4,JMC.EN}; Phrase myPhrase = new Phrase(); myPhrase.addNoteList(phrasedata); return myPhrase;

SongPhrase.riff2()

//Little Riff2 static public Phrase riff2() { double[] phrasedata =

{JMC.D4,JMC.EN,JMC.C4,JMC.EN,JMC.E4,JMC.EN,JMC.G4,JMC.EN};

Phrase myPhrase = new Phrase(); myPhrase.addNoteList(phrasedata); return myPhrase; }

Computing a phrase

//Larger Riff1 static public Phrase pattern1() { double[] riff1data = {JMC.G3,JMC.EN,JMC.B3,JMC.EN,JMC.C4,JMC.EN,JMC.D4,JMC.EN}; double[] riff2data = {JMC.D4,JMC.EN,JMC.C4,JMC.EN,JMC.E4,JMC.EN,JMC.G4,JMC.EN};

Phrase myPhrase = new Phrase(); // 3 of riff1, 1 of riff2, and repeat all of it 3 times for (int counter1 = 1; counter1 <= 3; counter1++) {for (int counter2 = 1; counter2 <= 3; counter2++) myPhrase.addNoteList(riff1data); myPhrase.addNoteList(riff2data); }; return myPhrase; }

As long as it’s a phrase…

The way that we use SongNote and SongPhrase, any method that returns a phrase is perfectly valid SongPhrase method.

10 Random Notes(Could be less random…) /* * 10 random notes **/ static public Phrase random() { Phrase ranPhrase = new Phrase(); Note n = null; for (int i=0; i < 10; i++) { n = new Note((int) (128*Math.random()),0.1); ranPhrase.addNote(n); } return ranPhrase; }

10 Slightly Less Random Notes /* * 10 random notes above middle C **/ static public Phrase randomAboveC() { Phrase ranPhrase = new Phrase(); Note n = null; for (int i=0; i < 10; i++) { n = new Note((int) (60+(5*Math.random())),0.25); ranPhrase.addNote(n); } return ranPhrase; }

Going beyond connecting nodes

So far, we’ve just created nodes and connected them up.

What else can we do? Well, music is about repetition and interleaving

of themes. Let’s create those abilities for SongNodes.

Repeating a Phrase

Welcome to DrJava.

> SongNode node = new SongNode();

> node.setPhrase(SongPhrase.randomAboveC());

> SongNode node1 = new SongNode();

> node1.setPhrase(SongPhrase.riff1());

> node.repeatNext(node1,10);

> import jm.JMC;

> node.showFromMeOn(JMC.PIANO);

What it looks like

node node1 node1 node1 …

Repeating /** * Repeat the input phrase for the number of times

specified. * It always appends to the current node, NOT insert. * @param nextOne node to be copied in to list * @param count number of times to copy it in. */ public void repeatNext(SongNode nextOne,int count) { SongNode current = this; // Start from here SongNode copy; // Where we keep the current copy for (int i=1; i <= count; i++) { copy = nextOne.copyNode(); // Make a copy current.setNext(copy); // Set as next current = copy; // Now append to copy } }

Note! What happens to this’s next? How would you create a looong repeat chain of several types of phrases with this?

Here’s making a copy

/** * copyNode returns a copy of this node * @return another song node with the same notes */ public SongNode copyNode(){ SongNode returnMe = new SongNode(); returnMe.setPhrase(this.getPhrase()); return returnMe; }

Step 1:public void repeatNext(SongNode nextOne,int count) { SongNode current = this; // Start from here SongNode copy; // Where we keep the current copy

node

phrase: 10 random notes

next: null

current

node1

phrase: riff1()

next: null

nextOne

Step 2:copy = nextOne.copyNode(); // Make a copy

node

phrase: 10 random notes

next: null

current

node1

phrase: riff1()

next: null

phrase: riff1()

next: null

copy nextOne

Step 3:current.setNext(copy); // Set as next

node

phrase: 10 random notes

next:

current

node1

phrase: riff1()

next: null

phrase: riff1()

next: null

copy nextOne

Step 4: current = copy; // Now append to copy

node

phrase: 10 random notes

next:

current

node1

phrase: riff1()

next: null

phrase: riff1()

next: null

copy nextOne

Step 5 & 6: copy = nextOne.copyNode(); // Make a copy current.setNext(copy); // Set as next

node

phrase: 10 random notes

next:

current

node1

phrase: riff1()

next: null

phrase: riff1()

next:

copy

phrase: riff1()

next: null

nextOne

Step 7 (and so on): current = copy; // Now append to copy

node

phrase: 10 random notes

next:

current

node1

phrase: riff1()

next: null

phrase: riff1()

next:

copy

phrase: riff1()

next: null

nextOne

What happens if the node already points to something? Consider repeatNext and how it inserts:

It simply sets the next value. What if the node already had a next? repeatNext will erase whatever used to come

next. How can we fix it?

repeatNextInserting

/** * Repeat the input phrase for the number of times specified. * But do an insertion, to save the rest of the list. * @param nextOne node to be copied into the list * @param count number of times to copy it in. **/ public void repeatNextInserting(SongNode nextOne, int count){ SongNode current = this; // Start from here SongNode copy; // Where we keep the current copy for (int i=1; i <= count; i++) { copy = nextOne.copyNode(); // Make a copy current.insertAfter(copy); // INSERT after current current = copy; // Now append to copy } }

Weaving /** * Weave the input phrase count times every skipAmount nodes * @param nextOne node to be copied into the list * @param count how many times to copy * @param skipAmount how many nodes to skip per weave */ public void weave(SongNode nextOne, int count, int skipAmount) { SongNode current = this; // Start from here SongNode copy; // Where we keep the one to be weaved in SongNode oldNext; // Need this to insert properly int skipped; // Number skipped currently for (int i=1; i <= count; i++) { copy = nextOne.copyNode(); // Make a copy //Skip skipAmount nodes skipped = 1; while ((current.next() != null) && (skipped < skipAmount)) { current = current.next(); skipped++; }; oldNext = current.next(); // Save its next current.insertAfter(copy); // Insert the copy after this one current = oldNext; // Continue on with the rest if (current.next() == null) // Did we actually get to the end early? break; // Leave the loop

} }

Should we break before the last insert (when we get to the end) or after?

Creating a node to weave

> SongNode node2 = new SongNode();> node2.setPhrase(SongPhrase.riff2());> node2.showFromMeOn(JMC.PIANO);

Doing a weave

> node.weave(node2,4,2);

> node.showFromMeOn(JMC.PIANO);

Weave Results

Before:

After

Walking the Weave

public void weave(SongNode nextOne, int count, int skipAmount)

{ SongNode current = this; // Start from here SongNode copy; // Where we keep the one to be weaved in SongNode oldNext; // Need this to insert properly int skipped; // Number skipped currently

Skip forwardfor (int i=1; i <= count; i++) { copy = nextOne.copyNode(); // Make a copy //Skip skipAmount nodes skipped = 1; while ((current.next() != null) && (skipped < skipAmount)) { current = current.next(); skipped++; };

Then do an insert

if (current.next() == null) // Did we actually get to the end early? break; // Leave the loop oldNext = current.next(); // Save its next current.insertAfter(copy); // Insert the copy after this one current = oldNext; // Continue on with the rest }

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.

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.

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

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

What this looks like:

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.

Slightly different picture

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!

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

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!

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

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

}

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

Removing the doggy

> tree1.setNext(tree2); tree2.setNext(tree3); tree3.setNext(doggy); doggy.setNext(house);

> tree1.remove(doggy);> tree1.drawFromMeOn(bg);

Putting the mutt back

> bg = new Picture(FileChooser.getMediaPath("jungle.jpg"));

> tree1.insertAfter(doggy);

> tree1.drawFromMeOn(bg);

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

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

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

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;

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

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

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

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

Results

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

First version of Layered Scene

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

Reordered (relayered) scene

Think about what’s involved in creating a method to reverse() a list…

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!

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

Linked list traversals are all the same

current = this;

while (current != null)

{

current.drawMeOn(bg);

current = current.getNext();

}

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?

The Attack of the Nasty Wolvies

Closer…

Then the Hero Appears!

And the Wolvies retreat

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.

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)

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)

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.

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.

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!

Funding Sources

• National Science Foundation

• Georgia Tech's College of Computing

• Georgia’s Department of Education

• GVU Center,

• Al West Fund

• President's Undergraduate Research Award

• Toyota Foundation