COSC 225: Algorithms and Visualization
course materials for Spring 2023
Welcome to the inaugrual edition of COSC 225: Algorithms and Visualization! Course materials and assignments will be posted to this website. Please start by reading the course syllabus:
Coordinates
- Lecture M/W 2:00–3:20 Science Center, A131
- Will’s Drop-in Office Hours (Science Center C216)
- Monday 3:30–4:30
- Friday 2:00–3:00
- Will’s Office Hours by Appointment: sign up here
- Thursday 1:00–2:30
- TA Office Hours with Oren (Science Center C109)
- Wednesday 5:00–6:00
Resources
Lecture Materials
Note that all assigned readings should be completed before the beginning of the indicated class.
Week 01 (01/30 - 02/03)
- Lecture 01 (Monday, 01/30)
- Topics:
- course introduction
- HTML structure, syntax, and semantics
- Readings: course syllabus
- Examples: (right click to download)
- Activities:
- inspecting website source
- getting set up with git
- lecture slides (annotated pdf)
- Topics:
- Lecture 02 (Wednesday, 02/01)
- Topics: boxes, position, color, and existential dread
- Readings:
- MDN Introduction to HTML (read all sections, but just skim Advanced Text Formatting and Debugging HTML)
- Watch:
- Examples & Tools:
- Activity: boxes and color
overlapping-boxes.html- example solution:
overlapping-boxes-sol.html
- lecture slides (annotated pdf)
- Assignment 01 (due Friday 02/03)
Week 02 (02/06 - 02/10)
- Lecture 03 (Wednesday, 02/08)
- Topics:
- color perception and representation
- intro to CSS
- Readings
- MDN Multimedia and Embedding
- Images in HTML
- Adding vector graphics to the web
- HTML tables
- HTML table basics
- MDN position documentation
- Syntax and Description sections only
- MDN Multimedia and Embedding
- Examples & Tools
- Activity
- QUIZ 01 identifying HTML elements from their display
rainbow-eight.html
- Further Reading
- Color Vision from the Feynman Lectures on Physics
- Color Vision Simulation simulating color blindness in the Firefox browser
- Lecture slides (annotated pdf)
- Topics:
Week 03 (02/13 - 02/17)
- Assignment 02 (due
Friday, 02/10Monday, 02/13) - Lecture 04 (Monday, 02/13)
- Topics:
- color spaces
- intro to JavaScript
- Readings:
- MDN CSS first steps (all sections)
- MDN CSS building blocks all section sup to Backgrounds and borders, CSS values and units, Sizing items in CSS
- MDN Fundamental text and font styling
- MDN Introduction to CSS layout
- Examples
- Activity:
- flag of many colors:
rainbow-eight.html
- flag of many colors:
- Lecture slides (annotated pdf)
- Topics:
Lecture 05 (Wednesday, 02/15)Class Canceled :/- Topics:
- cellular automata
- more JavaScript interactions
- Readings:
- Activities
- Quiz 02: css and positioning—laptop required
- Simulating cellular automata by hand (rule 90)
- Topics:
- Assignment 03 (Friday, 02/17)
Week 04 (02/20 - 02/24)
- Lecture 05 (Monday, 02/20)
- Topics:
- cellular automata
- more JavaScript interactions
- Readings:
- Activity: cellular automata (html version), (pdf version)
- Demo: lec05-interactive-grid.zip
- Lecture 05 Slides (annotated pdf)
- Topics:
- Lecture 06 (Wednesday, 02/22)
- Topics:
- even more JavaScript interactions
- scalable vector graphics (SVG)
- Readings: (forthcoming)
- Activities:
- draw a cat: lec06-cat.zip
- Demo: lec06-dots.zip
- Lecture 06 Slides (annotated pdf)
- Topics:
- Assignment 04 (due Friday, 02/24)
Week 05 (02/27 - 03/03)
- Lecture 07
- Topics:
- JavaScript events
- JavaScript objects
- Graphs
- Readings
- MDN Introduction to events
- MDN SVG from Scratch, up to “Fills and Strokes”
- Activity: lec07-dots.zip
- Demos:
- Lecture 07 Slides (annotated pdf)
- Topics:
- Lecture 08 (Wednesday 03/01)
- Topics:
- More on JavaScript Objects
- Visualizing DFS
- Demo: lec08-dfs.zip
- Lecture 08 Slides (annotated pdf)
- Topics:
- Assignment 05 (due
Friday, 03/03Monday, 03/06)
Week 06 (03/06 - 03/10)
- Lecture 09 (Monday 03/06)
- Topic: Convex Hulls
- Activity: Compute the Convex Hull (pdf)
- Lecture 09 Slides (annotated pdf)
- Lecture 10 (Wednesday 03/08)
- Topics: Convex Hulls, Animations
- Readings: Convex Hulls (pdf) from Computational Geometry by de Berg et al.
- Demos:
- Animation Documentation:
- Lecture 10 Slides (annotated pdf)
Week 07 (03/20 - 03/24)
- Lecture 11 (Monday, 03/20)
- Topics: coordinate transformations and self-similarity
- Demos:
- Activities
- Lecture 11 Slides (annotated pdf)
- Lecture 12 (Wednesday, 03/22)
- Topics: coordinate transformations, recursion, and self-similarity
- Readings: MDN
transformDocumentation - Activities
- Demos:
- Lecture 12 Slides (annotated pdf)
- Assignment 06: Convex Hulls (due
Friday, 03/24Monday, 03/27)
Week 08 (03/27 - 03/31)
- Lecture 13 (Monday, 03/27)
- Topic: Drawing binary trees
- Demos:
- Lecture 13 Slides (annotated pdf)
- Lecture 14 (Wednesday 03/29)
- Topic: Tidy Drawings of Trees
- Quiz: coordinate transofrmations
- Reference: MDN
transformdocumentation
- Reference: MDN
- Lecture 14 Slides (annotated pdf)
Week 09 (04/03 - 04/07)
- Lecture 15 (Monday 04/03)
- Drawing general graphs: circular layouts
- Demos:
- Lecture 15 Slides (annotated pdf)
- Lecture 16 (Wednesday 04/05)
- Drawing general graphs: force-directed layouts
- Demos:
- Lecture 16 Slides (annotated pdf)
Week 10 (04/10 - 04/14)
- Lecture 17 (Monday 04/10)
- Topic: Typesetting I, greedy linebreaking
- Activity:
- Lecture 17 Slides (annotated pdf)
- Lecture 18 (Wednesday 04/12)
- Topic: Typesetting II, Knuth-Plass linebreaking
- Activity:
- Lecture 18 Slides (annotated pdf)
Week 11 (04/17 - 04/21)
- Lecture 19 (Wednesday, 04/19)
- Topic: \(k\)-means Clustering
- Demo:
lec19-k-means.zip - Lecture 19 Slides
Week 12 (04/24 - 04/28)
- Lecture 20 (Monday, 04/24)
- Topic: Pattern Matching, Part I
- Activity:
lec20-pattern-matching.zip - Lecture 20 Slides
- Lecture 21 (Monday, 04/26)
- Topic: Pattern Matching, Part II
- Demos:
- Lecture 21 Slides
Week 13 (05/01 - 05/09)
- Lecture 22
- Final Project Demos!
- Lecture 23
- Topic: Stable Matchings
- Demo:
lec23-stable-matchings.zip - Lecture 23 Slides
Assignments
- Assignment 01: Basic Website (due Friday, 02/03)
- Assignment 02: Stylish Website (due
Friday, 02/10Monday, 02/13) - Assignment 03: Color Grid (due Friday, 02/17)
- Assignment 04: Cellular Automata (due Friday, 02/24)
- Assignment 05: Drawing (due
Friday, 03/03Monday, 03/06) - Assignment 06: Convex Hulls (due
Friday, 03/24Monday, 03/27) - Assignment 07: Self-Similarity (due Friday, 04/07)
- Assignment 08 (Optional): Tidy Drawings of Trees (due
Friday, 04/14Wednesday, 05/17 by 5:00pm) - Final Project
- preliminary plan (due Friday, 04/14)
- working prototype (due Monday, 05/01 by 2:00pm)
- final submission (due Wednesday, 05/10 by 5:00pm)
- peer review (due Friday, 05/19 by 5:00pm)
Quizzes
- Quiz 01 (Wednesday 02/08)
- Quiz 02 (Wednesday 02/15)
- Quiz 03 (Wednesday 03/29)
- Quiz 04 (Monday 04/10)