1. IS313 Today: projects! AI? UI? Project plans I hope I'm involved! Role-based access control (James) PyGame - Snake! (Ivan, with SQL!) PyGame - Snake! (Sucheng, James) PyGame - Bomberman Jetters! TextClouds (HsingHuei) TextClouds (Bridget and Laura) vPool (Igho and Yernur) (Congshan, Bill, Spencer) IT placement app (Phil, Tim, Hamdan)

2. IS313 Schedule Wednesday, Dec. 2 - Projects… ! Thursday, Dec. 3 - progress report due – with code Wednesday, Dec. 9 - In-class project presentations Thursday, Dec. 10 - progress report due – with code Wednesday, Dec. 16 - no class meeting Thursday, Dec. 17 - Final project due! Wednesday, Dec. 23 - Player class due (Hw #9)

3. What does this mean? 3P's: Projects

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

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

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

7. this does not seem very original! inspired by the three projects using PyGame (two 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-15 minutes since there are so many parenthetical comments!

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

9. No one writes programs from scratch! Start with the example! (bouncing ball program) Work Approach Tinker: learning the library requires testing it out… Plan: best done as you tinker… You can probably leave this slide out! www.pygame.org/docs/tut/intro/intro.html

10. 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 ?!?

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

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

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

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

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

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

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

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

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

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

21. Examples! other resources

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

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

24. End of example presentation Phew!

25. For next Thursday…

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

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

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

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

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

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

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

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

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

35. The designers aren't the users…

36. Lab / project … Remember: preliminary.zip is due tomorrow evening…

37. Thinking about User Interfaces Command LineTablet / Touch

38. Ambient Information

39. Display Walls

40. Thinking about User Interfaces What other types of human/computer interfaces can you think of? #1 WIMPWIMP indows cons enus ointer GUI

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

42. Why is this a better design?

43. Keypad numbers layout A case of external inconsistency 12 3 456 7 89 7 89 12 3 456 0 0 (a) phones, remote controls(b) calculators, computer keypads

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

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

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

47. Physical Affordances

48. What do the Zune wheel and the door handle have in common?

49. Virtual Affordances Click Me

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