IS313 Today: projects!

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

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... Tuesday, Dec. 7 - intermediate.zip due ... Monday, Dec. 13 - no formal class meeting Friday, Dec. 17 - project.zip due ...

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

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

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

7. 2nd of 3P's: Presentation What does this mean? (1) An introduction and overview of your progress… 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. Project: PySnake! this does not seem very original! inspired by the three projects using PyGame (one of which are implementing a Snake game!) 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. Libraries PyGame: multi-platform (and means it!) but needs Python 2.6 My goal is at least one picture per slide Resorting to unrelated pictures only when absolutely necessary… Features:classes for 2d single-screen game support Fun: supports sounds and game controllers, as well…

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

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

13. [ [ 1, 1, 1, 1, 1, … ], [ 1, 0, 0, 3, 4, … ], [ 1, 0, 2, 0, 0, … ], … ] Game Plan To go from Bouncing Ball to Snake! Data structures: A 2d list of cells - similar to the game of life - each of which might have a wall empty space http://www.cs.hmc.edu/~cs60grad/Spampede/Spring02/btagiku6 food! body and head 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/

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

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

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

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

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

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

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

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

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

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… The 3rd P! Post your final project on your ePortfolio page in a .zip file 1. Include on the page a text description of 2. • 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

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

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

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

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

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

33. Visibility is making functionality apparent "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 From: www.baddesigns.com Slide projector… Shower?

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

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

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

37. Lab / project … Have a great Thankgiving weekend! preliminary.zip is due Dec. 1st! 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? GUI #1 W I M P indows cons enus ointer

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? But why might this not be feasible? How could it be better w/in constraints?

44. Keypad numbers layout • A case of external inconsistency (a) phones, remote controls (b) calculators, computer keypads 8 9 1 2 7 3 4 5 6 4 5 6 8 9 1 2 7 3 0 0 Do you have trouble with this? Why or why not?

45. Projects! The project ideas… 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) In what way might the text be seen to be clickable? Virtual afford. are LEARNED!

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

48. Physical Affordances Mixed affordances. Bad mapping—why not Linear?

49. Physical Affordances Mixed affordances. Bad mapping—why not Linear? What do the Zune wheel and the door handle have in common?

50. Virtual Affordances Click Me Click Me