Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... -...
Transcript of Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... -...
![Page 2: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/2.jpg)
Learning goals for today
To learn how to use interactors in our programs
![Page 3: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/3.jpg)
Learning goals for today
To learn how to use interactors in our programs
To go under the hood of a program
![Page 4: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/4.jpg)
Learning goals for today
To learn how to use interactors in our programs
To go under the hood of a program
To see how we can use Computer Science to understand people
![Page 5: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/5.jpg)
‘…a device that […] had about a hundred tiny flat press buttons and a screen about four inches square on which any one of a million “pages” could be summoned at a moment’s notice. It looked insanely complicated, and […] had the words DON’T PANIC printed on it in large friendly letters’
![Page 6: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/6.jpg)
‘…a device that […] had about a hundred tiny flat press buttons and a screen about four inches square on which any one of a million “pages” could be summoned at a moment’s notice. It looked insanely complicated, and […] had the words DON’T PANIC printed on it in large friendly letters’
- Douglas Adams, The Hitchhiker’s Guide to the Galaxy
![Page 7: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/7.jpg)
How do we interact with programs?
![Page 8: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/8.jpg)
As Console Programs
How do we interact with programs?
![Page 9: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/9.jpg)
As Console Programs public class myProgram extends ConsoleProgram {...}
How do we interact with programs?
![Page 10: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/10.jpg)
As Console Programs public class myProgram extends ConsoleProgram {...}
Using our Mouse and Keyboard
How do we interact with programs?
![Page 11: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/11.jpg)
As Console Programs public class myProgram extends ConsoleProgram {...}
Using our Mouse and Keyboard public void mouseMoved(MouseEvent e){...}
How do we interact with programs?
![Page 12: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/12.jpg)
As Console Programs public class myProgram extends ConsoleProgram {...}
Using our Mouse and Keyboard public void mouseMoved(MouseEvent e){...}
Using UI Elements (buttons, sliders, text fields)
How do we interact with programs?
![Page 13: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/13.jpg)
As Console Programs public class myProgram extends ConsoleProgram {...}
Using our Mouse and Keyboard public void mouseMoved(MouseEvent e){...}
Using UI Elements (buttons, sliders, text fields) // ¯\_(ツ)_/¯
How do we interact with programs?
![Page 14: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/14.jpg)
Using the tools we already have, how could we make a button?
![Page 15: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/15.jpg)
What’s wrong with this approach to making buttons?
![Page 16: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/16.jpg)
What’s wrong with this approach to making buttons?
Not a separate part of the interface
![Page 17: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/17.jpg)
What’s wrong with this approach to making buttons?
Not a separate part of the interface
Doesn’t give any indication that it was clicked
![Page 18: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/18.jpg)
What’s wrong with this approach to making buttons?
Not a separate part of the interface
Doesn’t give any indication that it was clicked
Looks pretty bad
![Page 19: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/19.jpg)
What’s wrong with this approach to making buttons?
Not a separate part of the interface
Doesn’t give any indication that it was clicked
Looks pretty bad
Inconsistent with other programs
![Page 20: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/20.jpg)
What’s wrong with this approach to making buttons?
Not a separate part of the interface
Doesn’t give any indication that it was clicked
Looks pretty bad
Inconsistent with other programs
Can’t use it in ConsolePrograms
![Page 21: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/21.jpg)
What’s wrong with this approach to making buttons?
Not a separate part of the interface
Doesn’t give any indication that it was clicked
Looks pretty bad
Inconsistent with other programs
Can’t use it in ConsolePrograms
Lots of work to create
![Page 22: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/22.jpg)
Making these interfaces would be devastating
![Page 23: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/23.jpg)
Programming is about standing on the shoulders of giants
![Page 24: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/24.jpg)
JComponent
JLabel JTextField JButton JSliderJSpinner
JFileChooserJMenuBar
JScrollBarJTree
.
.
.
Meet today’s giant
![Page 25: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/25.jpg)
JComponent
JLabel JTextField JButton JSliderJSpinner
JFileChooserJMenuBar
JScrollBarJTree
.
.
.
Meet today’s giant
![Page 26: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/26.jpg)
JComponents
Java handles how they look
You handle how they work
![Page 27: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/27.jpg)
Our first JComponents
JLabel label = new JLabel(“banter”);
JTextField field = new JTextField(20); // 20 characters wide
JButton button = new JButton(“Click me”);
// how do we add these to the window?
![Page 28: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/28.jpg)
Regions in a window
Java divides every window into 5 regions
![Page 29: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/29.jpg)
Regions in a window
CENTER
Java divides every window into 5 regions
Center: your ConsoleProgram or GraphicsProgram
![Page 30: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/30.jpg)
Regions in a window
NORTH
SOUTH
WEST
EAST
CENTER
Java divides every window into 5 regions
Center: your ConsoleProgram or GraphicsProgram
The other regions only show up when you add things to them
![Page 31: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/31.jpg)
Putting JComponents on the window
JLabel label = new JLabel(“banter”);
JTextField field = new JTextField(20); // 20 characters wide
JButton button = new JButton(“Click me”);
add(label, SOUTH);add(field, SOUTH);add(button, SOUTH);
} Java automatically arranges the components in the SOUTH region for you
![Page 32: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/32.jpg)
Let’s run() with it
![Page 33: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/33.jpg)
What we know so far
Window appears on the screen
run() method called
mouseListeners start listening
Your program starts here
![Page 34: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/34.jpg)
Diving under the hood
Window appears on the screen
run() method called
mouseListeners start listening
Window needs to be set up, or initialized here
Your program starts here
![Page 35: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/35.jpg)
Diving under the hood
Window appears on the screen
run() method called
mouseListeners start listening
Window needs to be set up, or initialized here
Your program starts here
public void init() {// Set up the window here
}
![Page 36: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/36.jpg)
Diving under the hood
Window appears on the screen
run() method called
mouseListeners start listeninginit() method called
Your program starts here
![Page 37: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/37.jpg)
Let’s run with init()
![Page 38: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/38.jpg)
Let’s run with init()// (sorry)
![Page 39: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/39.jpg)
The takeaway: add JComponents in init()
![Page 40: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/40.jpg)
How to use JComponents
![Page 41: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/41.jpg)
How to use JComponentsWhere else have our programs had to respond to user actions that could happen anytime?
![Page 42: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/42.jpg)
How to use JComponentsWhere else have our programs had to respond to user actions that could happen anytime?
Like MouseListeners, using components requires Event-Driven programming
![Page 43: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/43.jpg)
How to use JComponentsWhere else have our programs had to respond to user actions that could happen anytime?
Like MouseListeners, using components requires Event-Driven programming
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();// Process command
}
![Page 44: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/44.jpg)
public void init() {
}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();// Process command
}
![Page 45: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/45.jpg)
public void init() {JButton button = new JButton(“Click me!”);
add(button, SOUTH);
}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();// Process command
}
![Page 46: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/46.jpg)
public void init() {JButton button = new JButton(“Click me!”);
add(button, SOUTH);
addActionListeners(); // start listening for user actions}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();// Process command
}
![Page 47: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/47.jpg)
public void init() {JButton button = new JButton(“Click me!”);
add(button, SOUTH);
addActionListeners(); // start listening for user actions}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();// Process command
}
![Page 48: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/48.jpg)
public void init() {JButton button = new JButton(“Click me!”);
add(button, SOUTH);
addActionListeners(); // start listening for user actions}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();if (command.equals(“Click me!”)) {
println(“Button clicked!”);}
}
![Page 49: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/49.jpg)
public void init() {JButton button = new JButton(“Click me!”);// TODO:// Set up text field
add(button, SOUTH);// TODO: Add text field to windowaddActionListeners(); // start listening for user actions
}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();if (command.equals(“Click me!”)) {
println(“Button clicked!”);}
}
![Page 50: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/50.jpg)
public void init() {JButton button = new JButton(“Click me!”);field.addActionListener(this); // enable pressing enterfield.setActionCommand(“Typed”); // set the field’s action command
add(button, SOUTH);// TODO: Add text field to windowaddActionListeners(); // start listening for user actions
}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();if (command.equals(“Click me!”)) {
println(“Button clicked!”);}
}
![Page 51: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/51.jpg)
public void init() {JButton button = new JButton(“Click me!”);field.addActionListener(this); // enable pressing enterfield.setActionCommand(“Typed”); // set the field’s action command
add(button, SOUTH);add(field, SOUTH);addActionListeners(); // start listening for user actions
}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();if (command.equals(“Click me!”)) {
println(“Button clicked!”);}
}
![Page 52: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/52.jpg)
public void init() {JButton button = new JButton(“Click me!”);field.addActionListener(this); // enable pressing enterfield.setActionCommand(“Typed”); // set the field’s action command
add(button, SOUTH);add(field, SOUTH);addActionListeners(); // start listening for user actions
}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();if (command.equals(“Click me!”)) {
println(“Button clicked!”);}// TODO:// Deal with action from field
}
![Page 53: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/53.jpg)
public void init() {JButton button = new JButton(“Click me!”);field.addActionListener(this); // enable pressing enterfield.setActionCommand(“Typed”); // set the field’s action command
add(button, SOUTH);add(field, SOUTH);addActionListeners(); // start listening for user actions
}
public void actionPerformed(ActionEvent e){String command = e.getActionCommand();if (command.equals(“Click me!”)) {
println(“Button clicked!”);}if (command.equals(“Typed”)) {
println(field.getText()); // needs to be an instance variable}
}
![Page 54: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/54.jpg)
Diving under the hood
Window appears on the screen
run() method called
mouseListeners start listening
Your program starts here
init() method called
actionListeners start listening
![Page 55: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/55.jpg)
Let’s make something cool!
![Page 56: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/56.jpg)
The xkcd Color survey: what names do people give colors?
Dataset: 2.85 million RGB colors + names
navy blue273498blue41201234lime green9921232red brown1608966...
![Page 57: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/57.jpg)
This is a lot of data
![Page 58: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/58.jpg)
A cool visualization!
![Page 59: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/59.jpg)
Milestone 1: How do we represent this data?
army green 106, 110, 85 184, 179, 50 96, 117, 3
lilac 145, 110, 244 142, 115, 242 248, 141, 243
hot pink 219, 63, 138 253, 18, 181 239, 1, 152
...
...
...
Hint: each of these is a Color
![Page 60: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/60.jpg)
Milestone 1: How do we represent this data? ✅
army green 106, 110, 85 184, 179, 50 96, 117, 3
lilac 145, 110, 244 142, 115, 242 248, 141, 243
hot pink 219, 63, 138 253, 18, 181 239, 1, 152
...
...
...
HashMap<String, ArrayList<Color>> colorMap;
![Page 61: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/61.jpg)
Milestone 2: How do we load data from the file? navy blue273498blue41201234lime green9921232red brown1608966...
private HashMap<String, ArrayList<Color>> readFile() {// fun Scanner shenanigans
}
![Page 62: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/62.jpg)
Milestone 2: How do we load data from the file? ✅ navy blue273498blue41201234lime green9921232red brown1608966...
private HashMap<String, ArrayList<Color>> readFile() {// fun Scanner shenanigans
}
Click here for an animation of the file reading
![Page 63: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/63.jpg)
Milestone 3: How do we set up the interactors?
![Page 64: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/64.jpg)
Milestone 4: How do we put all the pieces together?
Suppose you have a method
private void plotColor(Color color)
that puts a single color dot on the screen in the correct place
and another method
private void clearAll()
that removes all the colored dots
![Page 65: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/65.jpg)
Computer Science helps us learn about people
xkcd's analysis of the results
![Page 66: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/66.jpg)
Overflow slides
1. How do we plot a color?2. A file reading demo
![Page 67: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/67.jpg)
How do we plot a color in xkcd colors?The HSB Color Space
// (you’re not required to know this)
![Page 68: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/68.jpg)
How do we plot a color?We normally break colors into a red, green and blue component
You can think of each color as a point on a 3d graph with a red, green and blue axis
This graph is called the RGB Color Space
Each axis on the graph goes from 0 to 255
RGB Color Space Atlas
![Page 69: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/69.jpg)
How do we plot a color?We don’t have to break a color into RGB values
RGB is easy for computers to understand, but not for humans
What does it mean for a color to be 127 / 255 red? ¯\_(ツ)_/¯
We tend to think of a color in terms of its general color range, how vivid it is, and how bright it is.
![Page 70: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/70.jpg)
How do we plot a color?We can also break a color into these three components:
The color’s hue represents its general color range (its location on the color wheel)
The color’s saturation represents how vivid it is
The color’s brightness represents how bright it is
Each color is a now a point in the HSB Color Space
source
![Page 71: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/71.jpg)
How do we plot a color?Java gives us a method to break a color up into HSB Components:
float[] HSBComponents = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
HSBComponents has three elements, which are in order:
1. color’s hue2. color’s saturation3. color’s brightness
don’t worry about the float data type!
(it’s like a double, but for smaller numbers)
![Page 72: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/72.jpg)
How do we plot a color?We use the color’s hue and saturation to figure out where in the circle the color’s point goes
We color the point with its corresponding color, which
captures brightness
Saturation
Hue
![Page 73: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/73.jpg)
How do we plot a color?float[] components = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
double radius = getRadius() * components[1];double theta = components[0] * Math.PI * 2.0;
double x = getWidth() / 2.0 + radius * Math.cos(theta);double y = getHeight() / 2.0 - radius * Math.sin(theta); GRect pt = new GRect(x, y, 1, 1);pt.setFilled(true);pt.setColor(color);
Get HSB Components from color
![Page 74: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/74.jpg)
float[] components = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
double radius = getRadius() * components[1];double theta = components[0] * Math.PI * 2.0;
double x = getWidth() / 2.0 + radius * Math.cos(theta);double y = getHeight() / 2.0 - radius * Math.sin(theta); GRect pt = new GRect(x, y, 1, 1);pt.setFilled(true);pt.setColor(color);
How do we plot a color?
radius is based on saturation (as a fraction of 100) and angle is
based on hue (as a fraction of 360)
![Page 75: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/75.jpg)
How do we plot a color?
Calculate exact position of the point on the screen using
trigonometry
float[] components = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
double radius = getRadius() * components[1];double theta = components[0] * Math.PI * 2.0;
double x = getWidth() / 2.0 + radius * Math.cos(theta);double y = getHeight() / 2.0 - radius * Math.sin(theta); GRect pt = new GRect(x, y, 1, 1);pt.setFilled(true);pt.setColor(color);
![Page 76: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/76.jpg)
How do we plot a color?
Plot the point on the screen
float[] components = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
double radius = getRadius() * components[1];double theta = components[0] * Math.PI * 2.0;
double x = getWidth() / 2.0 + radius * Math.cos(theta);double y = getHeight() / 2.0 - radius * Math.sin(theta); GRect pt = new GRect(x, y, 1, 1);pt.setFilled(true);pt.setColor(color);
![Page 77: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/77.jpg)
How colorMap is madeA more detailed animation
back to main slides
![Page 78: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/78.jpg)
Scanner sc = new Scanner(new File(COLORS_FILE));HashMap<String, ArrayList<Color>> result =
new HashMap<String, ArrayList<Color>>(); while (sc.hasNextLine()) { String colorName = sc.nextLine(); String red = sc.nextLine(); String green = sc.nextLine(); String blue = sc.nextLine(); int r = Integer.parseInt(red); int g = Integer.parseInt(green); int b = Integer.parseInt(blue); Color color = new Color(r, g, b); if (!result.containsKey(colorName)) { result.put(colorName, new ArrayList<Color>()); } result.get(colorName).add(color);}
navy blue273498blue41201234lime green9921232red brown1608966...
![Page 79: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/79.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
while (sc.hasNextLine()) {
result
NO KEYS
![Page 80: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/80.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String colorName = sc.nextLine();
result
NO KEYS
while loop variables
colorName: “navy blue”\
![Page 81: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/81.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String red = sc.nextLine();
result
NO KEYS
while loop variables
colorName: “navy blue”red: “27”
![Page 82: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/82.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String green = sc.nextLine();
result
NO KEYS
while loop variables
colorName: “navy blue”red: “27”green: “34”
![Page 83: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/83.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String blue = sc.nextLine();
result
NO KEYS
while loop variables
colorName: “navy blue”red: “27”green: “34”blue: “98”
![Page 84: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/84.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
int r = Integer.parseInt(red);
result
NO KEYS
while loop variables
colorName: “navy blue”red: “27”green: “34”blue: “98”r: 27
![Page 85: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/85.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
int g = Integer.parseInt(green);
result
NO KEYS
while loop variables
colorName: “navy blue”red: “27”green: “34”blue: “98”r: 27g: 34
![Page 86: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/86.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
int b = Integer.parseInt(blue);
result
NO KEYS
while loop variables
colorName: “navy blue”red: “27”green: “34”blue: “98”r: 27g: 34b: 98
![Page 87: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/87.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
Color color = new Color(r, g, b);
result
NO KEYS
while loop variables
colorName: “navy blue”red: “27” color: aaaaa green: “34”blue: “98”r: 27g: 34b: 98
![Page 88: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/88.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
if (!result.containsKey(colorName)) { result.put(colorName, new ArrayList<Color>()); }
result
“navy blue”: {}
while loop variables
colorName: “navy blue”red: “27” color: aaaaa green: “34”blue: “98”r: 27g: 34b: 98
![Page 89: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/89.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
result
“navy blue”: {aaaaa}
while loop variables
colorName: “navy blue”red: “27” color: aaaaa green: “34”blue: “98”r: 27g: 34b: 98
result.get(colorName).add(color);
![Page 90: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/90.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
result
“navy blue”: {aaaaa}
while (sc.hasNextLine()) {
![Page 91: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/91.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String colorName = sc.nextLine();
while loop variables
colorName: “blue”
result
“navy blue”: {aaaaa}
![Page 92: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/92.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String red = sc.nextLine();
while loop variables
colorName: “blue”red: “41”
result
“navy blue”: {aaaaa}
![Page 93: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/93.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String green = sc.nextLine();
while loop variables
colorName: “blue”red: “41”green: “201”
result
“navy blue”: {aaaaa}
![Page 94: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/94.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
String blue = sc.nextLine();
while loop variables
colorName: “blue”red: “41”green: “201”blue: “234”
result
“navy blue”: {aaaaa}
![Page 95: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/95.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
int r = Integer.parseInt(red);
while loop variables
colorName: “blue”red: “41”green: “201”blue: “234”r: 41
result
“navy blue”: {aaaaa}
![Page 96: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/96.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
int g = Integer.parseInt(green);
while loop variables
colorName: “blue”red: “41”green: “201”blue: “234”r: 41g: 201
result
“navy blue”: {aaaaa}
![Page 97: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/97.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
int b = Integer.parseInt(blue);
while loop variables
colorName: “blue”red: “41”green: “201”blue: “234”r: 41g: 201b: 234
result
“navy blue”: {aaaaa}
![Page 98: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/98.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
Color color = new Color(r, g, b);
while loop variables
colorName: “blue” color: aaaaared: “41” green: “201”blue: “234”r: 41g: 201b: 234
result
“navy blue”: {aaaaa}
![Page 99: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/99.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
if (!result.containsKey(colorName)) { result.put(colorName, new ArrayList<Color>()); }
while loop variables
colorName: “blue” color: aaaaared: “41” green: “201”blue: “234”r: 41g: 201b: 234
result
“navy blue”: {aaaaa}“blue”: {}
![Page 100: Interactors - Stanford University...words DON’T PANIC printed on it in large friendly ... - Douglas Adams, The Hitchhiker’s Guide to the Galaxy. How do we interact with programs?](https://reader033.fdocuments.us/reader033/viewer/2022050109/5f47396599ac5062bb0cf319/html5/thumbnails/100.jpg)
navy blue273498blue41201234lime green9921232red brown1608966...
while loop variables
colorName: “blue” color: aaaaared: “41” green: “201”blue: “234”r: 41g: 201b: 234
result
“navy blue”: {aaaaa}“blue”: {aaaaa}
result.get(colorName).add(color);
back to main slides