The document outlines class project plans and schedules for the IS313 course, including various project ideas using Pygame and deadlines for submissions. It emphasizes the importance of preliminary programming, presentations, and user interface design principles. Key deliverables include libraries, project descriptions, and e-portfolios that summarize the projects and their functionalities.

1. IS313 Today: projects!
AI?
UI?
Project plans
I hope I'm
involved!
Dice (and RegDice!) (James)
PyGame – Snake! (Mohammed Alateeq)
PyGame – Tarot!! (Karen Sun)
PyGame – Collector!!! (Baris A.)
PyGame – Pong!!!! (Sarah A.)
PyGame – PicoGirl!!!!! (Maria A.)
Go (Charles)
Restaurant rating/Django (Peter)
Tic-tac-toe player (Payal)
Scholarship survey (Zara, Roni, Joanne)
+map-based writing prompt
Picobot! (Michael)
Mystery (M. Alyami & Abdul A.)
VPool (Jonathan)
Kyle (Tea-file documentation)
Google event tracker (Joe)
SillyLibs! (Amin and Mohammad)
Binary object DB (Jeff w/Twitter + OCR)

2. Thanks to Kyle… !

3. IS313 Schedule
Monday, Nov. 29 - no class meeting...
Wednesday, Dec. 1 - preliminary.zip due ...
Monday, Dec. 6 - in-class project presentations...
Monday, Dec. 13 - no formal class meeting
Tuesday, Dec. 7 - intermediate.zip due ...
Friday, Dec. 17 - project.zip due ...

4. What does this mean?
1st
of 3P's: Project preliminaries

5. What does this mean?
(1) Get your libraries working!
(2) preliminary programming
(0) Choose your libraries…
For Dec. 1st…

6. Getting started !
Feel free to use existing code...
www.cs.hmc.edu/twiki/bin/view/CS5/GoldRobots2010
VPython/VPool
starting code...
+ be sure to explain how
you've extended it, too...

7. What does this mean?
(1) An introduction and overview of your progress…
2nd
of 3P's: Presentation
certainly no expectations that things are complete!
but they should be further along than preliminary

8. Example presentation
with running commentary !
feel free to use these slides as a starting point
(but it's by no means required!)

9. this does not
seem very
original!
inspired by the three projects using PyGame
(one of which are implementing a Snake game!)
Project:
PySnake!
I usually imagine about 1 slide per minute, but this
van vary considerably… Also, this will be longer than 10
minutes since there are so many parenthetical comments!

10. My goal is at
least one picture
per slide
PyGame: multi-platform (and means it!)
Libraries
Features: classes for 2d single-screen game support
Fun: supports sounds and game controllers, as well…
Resorting to unrelated
pictures only when
absolutely necessary…
but needs Python 2.6

11. No one writes
programs from
scratch!
Start with the example! (bouncing ball program)
Work Approach
Tinker: learning the library requires testing it out…
Planning: adjust this as you tinker…
You can
probably
leave this
slide out!
www.pygame.org/docs/tut/intro/intro.html
Your project: will need to extend any starter code...

12. Reading the FAQ
and other online
resources is a
great place to
start!
Suggestions?
Having a ball…
This is an interesting piece of
advice… who wrote this ?!?

13. To go from Bouncing Ball to Snake!
Game Plan
Data structures:
There is always a set of data
structures that represents your
application…
Describing these data structures
is the application design - or your
"game plan" - especially when the
application is a game!
Inspiration:
http://www.cs.hmc.edu/~cs60grad/Spampede/
http://www.cs.hmc.edu/~cs60grad/Spampede/Spring02/btagiku6
A 2d list of cells -
similar to the game
of life - each of
which might have
a wall
empty space
food!
[ [ 1, 1, 1, 1, 1, … ],
[ 1, 0, 0, 3, 4, … ],
[ 1, 0, 2, 0, 0, … ],
… ]
body and head

14. Design
Where possible, include details…
Challenge:
How to display a
gameboard cell?
Thus, the game knows what to color each cell
based on the gameboard's contents…
empty space is 0
[ [ 1, 1, 1, 1, 1, … ],
[ 1, 0, 0, 3, 4, … ],
[ 1, 0, 2, 0, 0, … ],
… ]
food is 2
gameboard =

15. Details
Something about the library that
required some work to figure out!
Challenge:
How about more than one!
To create a region of color, you blit an object of the Surface class
Result:

16. Details
How did these
checkerboard
patterns arise?
2d lists are used to create patterns of different color surfaces…
Look familiar?

17. Walls and the Snake
That snake looks like
it's in trouble!
The edges are set to be walls, and the snake is started in the upper left…
Problems?

18. Snake motion
It's always better to
use descriptive
variable names!
The snake has one
of five directions:
NORTH = ( -1, 0 )
something's missing…
SOUTH = ( +1, 0 )
WEST = ( 0, -1 )
EAST = ( 0, +1 )
STOPPED = ( 0, 0 ) This makes it easy to
go diagonally in the
future, if we want
to!

19. Snake control
It's always better to
use descriptive
variable names!
Need to use
the kbd
NORTH = ( -1, 0 )
Crash!
SOUTH = ( +1, 0 )
WEST = ( 0, -1 )
EAST = ( 0, +1 )
STOPPED = ( 0, 0 ) This makes it easy to
go diagonally in the
future, if we want
to!

20. Key class
It's always better to
use descriptive
variable names!
Need to use
the kbd
NORTH = ( -1, 0 )
SOUTH = ( +1, 0 )
WEST = ( 0, -1 )
EAST = ( 0, +1 )
STOPPED = ( 0, 0 )
Note that capital Q
is tricky to specify…

21. Key feature
Good variable names
make the code self-
documenting!
Response to food!
Snake = [ (1,1), (1,2) ]
A list keeps track of the
cells in the Snake.
Response to
walls and other
obstacles!
What should
happen here?
Demo!

22. Still to go…
What are you planning on
implementing before the
final version?
Sound Need examples
AI mode
I don't want to take time to play the game …
let's have the computer play it for me!
More than simple cells of color
BIGGER!
Done!
Not done…

23. Examples!
other resources

24. Problems encountered? Aargh!
error messages
too much spam!

25. Design question… That's me!
Which of these steps took the most time?

26. End of example presentation
Phew!

27. ePortfolios…
1.
Post your final
project on your
ePortfolio page
in a .zip file
2.
Include on the
page a text
description of
• What it does
• What software
prerequisites it needs
(libraries, Python)
• How to run it
• What you would add
if you had more time
about a paragraph each
The 3rd P!

28. because software designers aren't the main users…
User interfaces are more difficult than they might seem...

29. User Inferfaces
No undo!
% ls
file1.txt file2.txt
file3.txt |
% rm *|
(long pause…)

30. Design for software and beyond
0. Conceptual models
1. Mapping
2. Visibility
3. Feedback
4. Affordances
Don Norman's key principles:

31. Conceptual Models
Users always bring something "to the table"
these don't work!
Images from The Design of Everyday Things
Ony a human
would think of
these!

32. Mapping
is matching expected (spatial) relationships
Where to plug in the keyboard and mouse?
?

33. Visibility
is making functionality apparent
Shower?
Slide projector…
From: www.baddesigns.com
"I used to have that awful shower controller where you
pull down on the nozzle to turn it on. I had to tell every
guest how to do it, and when we sold our house, we got a
call from the new owners about 5 days later asking how
to turn on the shower. They had been taking baths for 5
days! Unbelievable." - BL

34. Feedback
providing information back to the user
from the UI Hall of Shame
Microsoft Access
Microsoft Outlook
http://homepage.mac.com/bradster/iarchitect/shame.htm
But some of us
graphics aren't
so lazy!

35. Affordances
are the functions that form suggests…
Opening the XO? Door handles
built-in user's manual

36. Where do these go wrong?
Mapping
How to open this gas cap?
Visibility Feedback Affordances
This handle unfastens
the seat from the floor. How to turn on this stove?
Set to 5
minutes?
Win NT Dialog

37. Lab / project …
preliminary.zip is due Dec. 1st
!
Have a great
Thankgiving weekend!
Remember:
We do not meet on Mon., Nov. 29th
...

38. Thinking about User Interfaces
Command Line Tablet / Touch

39. Ambient Information

40. Display Walls

41. Thinking about User Interfaces
What other types of human/computer
interfaces can you think of?
#1 W
I
M
P
indows
cons
enus
ointer
GUI

42. Affordances
~ physical and cultural expectations
0. Conceptual models
1. Mapping
Matching user expectations
e.g., Directory structures
Visibility and Feedback
Banks of glass doors
Slide projector
Affordances
The functions that form suggests!
Phone settings

43. Why is this a better design?

44. Keypad numbers layout
• A case of external inconsistency
1 2 3
4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a) phones, remote controls (b) calculators, computer keypads

45. The project ideas…
Projects!
show text clouds !
local server…

46. Affordances: to give a clue
• Affordances: The perceived and actual
properties of an object that signal of the
object can be used (from The Design of
Everyday Things)

47. The project ideas…
Projects!
show text clouds !
local server…

48. Physical Affordances

49. Physical Affordances
What do the Zune wheel and the door handle
have in common?

50. Virtual Affordances
Click Me Click Me

51. "Quiz"
Name(s):
Note the perceived
affordances in
this interface.
Are there any
that are missing?
Misleading?

52. For next Thursday…

53. For Dec. 1st…
What does this mean?
(1) Get your libraries working!
(2) preliminary planning
(0) Choose your libraries…

54. For Dec. 1st…
What does this mean?
(1) Get your libraries working!
(2) preliminary planning
(0) Choose your libraries…

55. IS313 Today: projects!
AI?
UI?
Project plans
I hope I'm
involved!
Dice (and RegDice!) (James)
PyGame – Snake! (Mohammed Alateeq)
PyGame – Tarot!! (Karen Sun)
PyGame – Collector!!! (Baris A.)
PyGame – Pong!!!! (Sarah A.)
PyGame – PicoGirl!!!!! (Maria A.)
Go (Charles)
Restaurant rating/Django (Peter)
Tic-tac-toe player (Payal)
Scholarship survey (Zara, Roni, Joanne)
+map-based writing prompt
Picobot! (Michael)
Mystery (M. Alyami & Abdul A.)
VPool (Jonathan)
Kyle (Tea-file documentation)
Google event tracker (Joe)
SillyLibs! (Amin and Mohammad)
Binary object DB (Jeff w/Twitter + OCR)

56. IS313 Schedule
Monday, Nov. 29 - no class meeting...
Wednesday, Dec. 1 - preliminary.zip due ...
Monday, Dec. 6 - in-class project presentations...
Monday, Dec. 13 - no formal class meeting
Tuesday, Dec. 7 - intermediate.zip due ...
Friday, Dec. 17 - project.zip due ...

57. What does this mean?
(1) Get your libraries working!
(2) preliminary programming
(0) Choose your libraries…
For Dec. 1st…

58. Getting started !
Feel free to use existing code...
www.cs.hmc.edu/twiki/bin/view/CS5/GoldRobots2010
VPython/VPool
starting code...
+ be sure to explain how
you've extended it, too...

59. What does this mean?
(1) An introduction and overview of your progress…
2nd
of 3P's: Presentation
certainly no expectations that things are complete!
but they should be further along than preliminary

60. Example presentation
with running commentary !
feel free to use these slides as a starting point
(but it's by no means required!)

61. this does not
seem very
original!
inspired by the three projects using PyGame
(one of which are implementing a Snake game!)
Project:
PySnake!
I usually imagine about 1 slide per minute, but this
van vary considerably… Also, this will be longer than 10
minutes since there are so many parenthetical comments!

62. My goal is at
least one picture
per slide
PyGame: multi-platform (and means it!)
Libraries
Features: classes for 2d single-screen game support
Fun: supports sounds and game controllers, as well…
Resorting to unrelated
pictures only when
absolutely necessary…
but needs Python 2.6

63. No one writes
programs from
scratch!
Start with the example! (bouncing ball program)
Work Approach
Tinker: learning the library requires testing it out…
Planning: adjust this as you tinker…
You can
probably
leave this
slide out!
www.pygame.org/docs/tut/intro/intro.html
Your project: will need to extend any starter code...

64. Reading the FAQ
and other online
resources is a
great place to
start!
Suggestions?
Having a ball…
This is an interesting piece of
advice… who wrote this ?!?

65. To go from Bouncing Ball to Snake!
Game Plan
Data structures:
There is always a set of data
structures that represents your
application…
Describing these data structures
is the application design - or your
"game plan" - especially when the
application is a game!
Inspiration:
http://www.cs.hmc.edu/~cs60grad/Spampede/
http://www.cs.hmc.edu/~cs60grad/Spampede/Spring02/btagiku6
A 2d list of cells -
similar to the game
of life - each of
which might have
a wall
empty space
food!
[ [ 1, 1, 1, 1, 1, … ],
[ 1, 0, 0, 3, 4, … ],
[ 1, 0, 2, 0, 0, … ],
… ]
body and head

66. Design
Where possible, include details…
Challenge:
How to display a
gameboard cell?
Thus, the game knows what to color each cell
based on the gameboard's contents…
empty space is 0
[ [ 1, 1, 1, 1, 1, … ],
[ 1, 0, 0, 3, 4, … ],
[ 1, 0, 2, 0, 0, … ],
… ]
food is 2
gameboard =

67. Details
Something about the library that
required some work to figure out!
Challenge:
How about more than one!
To create a region of color, you blit an object of the Surface class
Result:

68. Walls and the Snake
That snake looks like
it's in trouble!
The edges are set to be walls, and the snake is started in the upper left…
Problems?

69. Key class
It's always better to
use descriptive
variable names!
Need to use
the kbd
NORTH = ( -1, 0 )
SOUTH = ( +1, 0 )
WEST = ( 0, -1 )
EAST = ( 0, +1 )
STOPPED = ( 0, 0 )
Note that capital Q
is tricky to specify…

70. Still to go…
What are you planning on
implementing before the
final version?
Sound Need examples
AI mode
I don't want to take time to play the game …
let's have the computer play it for me!
More than simple cells of color
BIGGER!
Done!
Not done…

71. Examples!
other resources

72. Problems encountered? Aargh!
error messages
too much spam!

73. End of example presentation
Phew!

74. ePortfolios…
1.
Post your final
project on your
ePortfolio page
in a .zip file
2.
Include on the
page a text
description of
• What it does
• What software
prerequisites it needs
(libraries, Python)
• How to run it
• What you would add
if you had more time
about a paragraph each
The 3rd P!

75. because software designers aren't the main users…
User interfaces are more difficult than they might seem...

76. Design for software and beyond
0. Conceptual models
1. Mapping
2. Visibility
3. Feedback
4. Affordances
Don Norman's key principles:

77. Mapping
is matching expected (spatial) relationships
Where to plug in the keyboard and mouse?
?

78. Visibility
is making functionality apparent
Shower?
Slide projector…
From: www.baddesigns.com
"I used to have that awful shower controller where you
pull down on the nozzle to turn it on. I had to tell every
guest how to do it, and when we sold our house, we got a
call from the new owners about 5 days later asking how
to turn on the shower. They had been taking baths for 5
days! Unbelievable." - BL

79. Feedback
providing information back to the user
from the UI Hall of Shame
Microsoft Access
Microsoft Outlook
http://homepage.mac.com/bradster/iarchitect/shame.htm
But some of us
graphics aren't
so lazy!

80. Affordances
are the functions that form suggests…
Opening the XO? Door handles
built-in user's manual

81. Where do these go wrong?
Mapping
How to open this gas cap?
Visibility Feedback Affordances
This handle unfastens
the seat from the floor. How to turn on this stove?
Set to 5
minutes?
Win NT Dialog

82. Lab / project …
preliminary.zip is due Dec. 1st
!
Have a great
Thankgiving weekend!
Remember:
We do not meet on Mon., Nov. 29th
...