Examples and other materials from lectures


Shape programs, from C to C++ to Java  
  1. Encapsulation
  2. shape1: shape1.c
  3. shape2: shape2.c
  4. shape3: shape3.cc
  5. shape4: Rect.java
  6. shape4: Circle.java
  7. shape4: Tester.java
  8. shape5: Rect.java
  9. shape5: Circle.java
  10. shape5: Tester.java
  11. shape6 (Tester.java is same as before): Rect.java
  12. shape6 (Tester.java is same as before): Circle.java
  13. shape7: Shape.java
  14. shape7: Rect.java
  15. shape7: Circle.java
  16. shape8: Rect.java
  17. shape8: Circle.java
  18. shape9: Tester.java
  19. shape9: Shape.java
  20. shape10: Tester.java
  21. Workshop: Java Setup
Java GUI programs  
  1. Window Systems
  2. SimpleButton1: Main.java
  3. SimpleButton1: Button.java
  4. Workshop: SimpleButton1
  5. SimpleButton2 (other file is same as before): Button.java
  6. Workshop: Modify SimpleButton2
  7. Scroll (Button.java file is same as before): ScrollBar.java
  8. Scroll (Button.java file is same as before): Main.java
  9. AWT class hierarchy
Java Language  
  1. Introduction to Java language
  2. Typical jobs for constructors
  3. Typical class file
Java GUI: Draw  
  1. Draw1 (the WRONG way): Main.java
  2. Draw1 (the WRONG way): Canvas.java
  3. Draw2: Canvas.java
  4. Draw2: Main.java
  5. Java graphics commands
  6. More on Java graphics commands
  7. Spline curve
  8. Workshop: Java Drawing
  9. Draw3 (other files are same as before): Canvas.java
  10. Workshop: Java Mouse and Drawing
  11. Draw4 (other files are same as before): Canvas.java
Java GUI: Widgets  
  1. Widgets: Main.java
  2. Widgets: GetButton.java
  3. Widgets: Button.java
  4. Widgets: ComboBox.java
  5. Widgets: List.java
  6. Widgets: Radio.java
  7. Widgets: ScrollBar.java
  8. Widgets: TextField.java
Java GUI: Menus  
  1. Menus: Main.java
  2. Menus: MyModel.java
  3. Menus: MyCanvas.java
  4. Simple MVC
Java GUI: Layout  
  1. Different kinds of components
  2. Layout1: Main.java
  3. Layout2: Main.java
Java GUI: Animation  
  1. Timeout1: Main.java
  2. Timeout1: Canvas.java
  3. (Movie frames)
  4. Timeout2 (other files are same as before): Canvas.java
  5. Workshop: Simple Animation
ButtonApp1  
  1. ButtonApp1 (with BAD modularization): Main.java
  2. ButtonApp1 (with BAD modularization): Canvas.java
ButtonApp2  
  1. Three Hierarchies for ButtonApp2
  2. ButtonApp2: Main.java
  3. ButtonApp2: Canvas.java
  4. ButtonApp2: Square.java
  5. ButtonApp2: ButtonLeft.java
  6. ButtonApp2: ButtonRight.java
  7. ButtonApp2: ButtonBigger.java
  8. ButtonApp2: ButtonSmaller.java
  9. ButtonApp2: ButtonFill.java
ButtonApp3  
  1. Hierarchies for ButtonApp3
  2. ButtonApp3 (other files are same as before): Main.java
  3. ButtonApp3 (other files are same as before): ColSquare.java
  4. ButtonApp3 (other files are same as before): Button.java
  5. ButtonApp3 (other files are same as before): ArrowButton.java
  6. ButtonApp3 (other files are same as before): TextButton.java
  7. ButtonApp3 (other files are same as before): ButtonLeft.java
  8. ButtonApp3 (other files are same as before): ButtonRight.java
  9. ButtonApp3 (other files are same as before): ButtonSmaller.java
  10. ButtonApp3 (other files are same as before): ButtonBigger.java
  11. ButtonApp3 (other files are same as before): ButtonFill.java
ButtonApp4  
  1. Design for ButtonApp4 Program
  2. ButtonApp4: Main.java
  3. ButtonApp4: Canvas.java
  4. ButtonApp4: Model.java
  5. ButtonApp4: Square.java
  6. ButtonApp4: ControlPanel.java
  7. ButtonApp4: ControlSingle.java
  8. ButtonApp4: ControlGlobal.java
  9. ButtonApp4: Button.java
  10. ButtonApp4: ArrowButton.java
  11. ButtonApp4: TextButton.java
  12. ButtonApp4: ButtonX.java
  13. ButtonApp4: ButtonLeft.java
  14. ButtonApp4: ButtonRight.java
  15. ButtonApp4: ButtonBigger.java
  16. ButtonApp4: ButtonSmaller.java
  17. Workshop: Pan and Zoom
OO Design  
  1. Overall steps for object-oriented design
  2. Abstraction 1
  3. Abstraction 2
  4. (UML diagram examples)
  5. UML class diagrams 1
  6. UML class diagrams 2
  7. UML class diagrams 3
  8. UML class diagrams 4
  9. UML class diagrams 5
  10. UML class diagrams 6
  11. UML class diagrams 7
  12. (CRC cards)
  13. (CRC examples)
  14. Coupling vs Cohesion
  15. ButtonApp4 UML base
  16. ButtonApp4 UML collab
  17. ButtonApp4 UML aggreg
  18. ButtonApp4 UML inherit
  19. ButtonApp4 UML all

  20. UML sequence diagrams 1
  21. UML sequence diagrams 2
  22. UML sequence diagrams 3

  23. UML state diagrams 1
  24. UML state diagrams 2
  25. UML state diagrams 3
Incdec  
  1. IncdecApp1: Incdec.java
  2. IncdecApp1: Main.java

  3. IncdecApp2: Incdec.java
  4. IncdecApp2: IncdecVert.java
  5. IncdecApp2: IncdecHor.java
  6. IncdecApp2: Main.java

  7. IncdecApp3: Incdec.java
  8. IncdecApp3: IncdecVert.java
  9. IncdecApp3: IncdecPie.java
  10. IncdecApp3: Canvas.java
  11. IncdecApp3: Main.java

  12. IncdecApp4: Incdec.java
  13. IncdecApp4: Main.java
Rawbutton  
  1. Rawbutton: Main.java
  2. Rawbutton: Rawbutton.java
  3. Rawbutton: CircleButton.java
  4. Video with CrossY
Javascript and Browser Interfaces  
  1. SimpleButton1 (plain HTML): SimpleButton1.html
  2. SimpleButton1 (plain HTML): SimpleButton1a.html
  3. SimpleButton1 (plain HTML): SimpleButton1b.html
  4. SimpleButton2 (Javascript): SimpleButton2.html
  5. Draw: Draw.html
  6. Introduction to Javascript
  7. SimpleButton3: SimpleButton3.html
  8. Workshop: User Interface Programming in Javascript
  9. Timeout1: Timeout1.html
  10. Timeout2: Timeout2.html
  11. Bounce: Bounce.html
  12. IncdecApp1: IncdecApp1.html
  13. IncdecApp2: IncdecApp2.html
  14. Books (optional): Books.html
  15. Ajax: Ajax.html
  16. Ajax: Ajax.php
  17. ButtonApp4: ButtonApp4.html
  18. Breakout game: Breakout.html
  19. Workshop: Breakout Game
Non-WIMP Interaction Styles  
  1. Trackingjs: Web page
  2. Trackingjs: Head tracking example code: usetrackingjs.html
  3. Trackingjs: Color tracking example code: usetrackingjs2.html

  4. Handtrackjs: Web page
  5. Handtrackjs: More info
  6. Handtrackjs: Usage example code: usehandtrackjs.html

  7. Webgazer: Web page (by Jeff Huang, Brown Univ.)
  8. Webgazer: Usage example code: usewebgazer.html

  9. Affectiva: paper
  10. Affectiva: UI example code: useaffdex.html

  11. Heart rate by remote photoplethysmography: Demo
  12. ditto: Intro documentation
  13. ditto: Github

  14. One dollar recognizer: Web page
  15. $Q multi-stroke recognizer: Web page
  16. One dollar recognizer: Example code: dollar.html

  17. Topcodes: Web page
  18. Topcodes: Video
  19. Topcodes: Code for algorithm: Scanner.java
  20. Topcodes: Code for algorithm: TopCode.java

  21. Web speech API: Web page
  22. Web speech API: Demo
  23. Web speech API code: Example code: speech.html
3D Graphics in Three.js  
  1. Immediate mode
  2. Retained mode
  3. Simple scene graph
  4. More complex scene graph
  5. box: box.html
  6. scene: scene.html
  7. lights: lights.html
  8. robot1: robot1.html
  9. robot2: robot2.html