CPSC 120 Syllabus

Week 1: 1/23-1/25

Topics: introduction

• introduction

Week 2: 1/28-2/1

Topics: HTML

• HTML - Introduction
• HTML - Elements
• HTML - Tags
• HTML - Paragraphs
• HTML - Bold

How to read this material: Don't worry about memorizing all the details of exactly how to write particular tags - you can always look up the details when you need them. Focus instead on the terms that are introduced (what are tags?), the structure of an HTML document (what's the title? the head? the body? how do the elements fit together?), and what kinds of things can be done (e.g. bold, various ways to align paragraphs).

Reference:

• HTML Tutorial - the long list of things under "HTML Tutorial" and "Formatting Tags" provides reference and examples for many things you can do in HTML
• The Bare Bones Guide to HTML - a quick reference, useful if you are familiar with HTML and just need to look up a particular tag

Slides:

• introduction to HTML

Examples:

• in-class exercises
• solution to the in-class exercises: roses.html (in Firefox, right-click on a page and choose "View Page Source" to see the HTML that produced the page)

• HTML - Bgcolor ("bgcolor" section only)
• HTML - Font
• HTML - Color Codes ("color names" and "hexadecimal" sections only)
• HTML - Links ("text links" and "link targets" sections only)
• HTML - Images

Reference:

• HTML Color Picker (hexadecimal color values)

Examples:

• in-class exercises
• roses2.html (for the in-class exercises; in Firefox, right-click on a page and choose "View Page Source" to see the HTML that produced the page)
• solution to the in-class exercises: roses2.html (Try removing the clear attribute from the br tag - what happens? Now remove the align attribute from the img tag instead - what happens?)

Week 3: 2/4-2/8

Topics: creating interactive pictures with Processing

• Learning Processing, chapters 1 and 2

How to read this material: Don't worry about memorizing every detail of syntax the first time you read it. Instead, focus on what information is there (e.g. chapter 1 covers coordinates, colors, and drawing simple shapes) so that you can look up the details later. Pay attention to the examples, and make sure you understand why they produce the results they do.

Examples:

• four rectangles and an ellipse - click on the "source code" link below the sketch to see the program
• in-class exercises (solution for #1-2, 4-5 - click on the "source code" link below the sketch to see the program)

• Learning Processing, chapter 3

Examples:

• antialiasing (smooth)
• interaction (circle follows mouse)
• in-class exercises (solution for #1, solution for #2-3 - click on the "source code" link below the sketch to see the program)

Week 4: 2/11-2/15

Topics: representation and animation

• Learning Processing, sections 4.1-4.5

Slides:

• variables

Examples:

• variables and animation (rectangle moves, changes size, changes color)

• Learning Processing, sections 4.6-4.7

Examples:

• in-class exercises (solution for #2, solution for #3)

Week 5: 2/18-2/22

Topics: making choices

• Learning Processing, sections 5.1-5.5

Examples:

• mouseover ('if' statements, boolean expressions, &&)
• anti-mouseover ('else', ||, !)
• in-class exercises (solution for #1-3)

• Learning Processing, sections 5.6-5.8

Examples:

• red-on-click ('if' statements, variables to track state, mouseClicked)
• toggle-on-click ('if' statements, variables to track state, mouseClicked)
• toggle-on-click-in-rect ('if' statements, variables to track state, mouseClicked)
• mouse button down ('if' statements, variables to track state, mouseClicked, mousePressed)
• in-class exercises

Week 6: 2/25-3/1

Topics: more complex animation and interaction

• Learning Processing, sections 5.7-5.8 (review from last week's reading)

Examples: (developing 'if' statements)

• move and reset
• move right and left
• move right and left, another solution
• move in a square
• move and vanish
• move, shrink, vanish

• complex motion

Examples: (complex motion)

• sliding down a ramp
• acceleration
• acceleration down a ramp
• bouncing
• gravity and bouncing
• gravity, air resistance, bouncing
• acceleration down a ramp followed by gravity, bouncing
• circular motion

Week 7:3/4-3/8

Topics: modularity and reuse

• Learning Processing, sections 7.1-7.6

• functions

Examples:

• functions
• in-class exercises (solution for #2-#4)

• review information

Week 8: 3/11-3/15

Topics: modeling the natural world

• Learning Processing, section 13.6
• Learning Processing, section 13.10
  (focus on what it has to say about recursion; try to ignore the mentions of loops and iteration if that doesn't make sense, and the unfamiliar syntax in some of the examples)

Examples:

• perlin (using perlin noise)
• perlin2 (using perlin noise)
• Sierpinski carpet (fractals and recursion)
• in-class exercises (solution for #1, solution for #2)

• Learning Processing, sections 14.1, 14.5, 14.8
  (focus on what it has to say about 2D; also, some of the example use syntax that we haven't covered yet - just try to concentrate on how translate(), rotate(), pushMatrix(), and popMatrix() are used)

Examples: (click to increase max depth)

• Koch snowflake (L-systems)
• plant (L-systems)
• in-class exercises

Spring Break: 3/18-3/22

Week 9: 3/25-3/29

Topics: repetition

• exam #1 redo option (due Mon 4/8)

Examples:

• diagonally-stacked circles (loops)
• road stripes (loops)
• animated stacked circles (loops and animation)
• random flowers (counting loop)

• Learning Processing, sections 6.1-6.4

Examples: (decomposing a problem into loops)

• example 1
• example 2
• example 3
• example 4
• example 5 and an alternative using functions
• example 6
• example 7
• example 8
• in-class exercises (solutions: #1, #2, #3)

Week 10: 4/1-4/5

Topics: repetition, again

• stack of boxes (counting loop)
• stacks of boxes (nested counting loops)
• in-class exercises

• in-class exercises (solutions: #1, #2, #4)

Week 11: 4/8-4/12

Topics: more of the same

• Learning Processing, sections 9.1-9.5
  (don't worry about the examples where things like Car and Human are used as types or when it talks about objects - just think of them as another type like int or float)

Examples:

• bouncing circle (animation)
• bouncing row of circles (animation and loops)
• staggered bouncing circles (arrays)
• time-release bouncing circles (arrays)

• review information

Week 12: 4/15-4/19

Topics: more of the same

• review sections 9.1-9.5

• in-class exercises (solutions: #1, #2, #3)

• Learning Processing, section 9.6

• in-class exercises (solutions: #1, #2)

Week 13: 4/22-4/26

Topics: images

• exam #2 redo option (due Mon 5/6)

Reading:

• Learning Processing, sections 15.1, 15.5-15.8

Examples:

• load, display, animate image
• brighten (image filter)

• Learning Processing, section 15.10

• marmot picture
• in-class exercises (solutions: #1, #2)
• selective image filter (only applied near the mouse)
• colored spot (getting the color at a particular spot in the image)

Week 14: 4/29-5/3

Topics: principles of computer science; what computing can (and can't) do

• slides from class

Examples:

• try to solve TSP: traveling salesman problem game
• Avatar performance capture video

• slides from class

Examples:

• starlings video
• boids video
• article about swarming (and ants)
• artificial fish: Jack Cousto video, "Artificial Animals for Computer Animation: Biomechanics, Locomotion, Perception, and Behavior" (the thesis)
• talk to Elbot

Week 15: 5/6-5/7

Topics: what computing can (and can't) do

• slides from class

Examples:

• eaters (genetic algorithms)

Reading Period: 5/8-/10

Exams: 5/11-5/14

• review information

last updated: --Wed May 8 21:18:37 EDT 2013--
page owned by: bridgeman@hws.edu