CPSC 120 Syllabus

Week 1: 1/20-1/22

Topics: introduction

Week 2: 1/25-1/29

Topics: HTML

Reading:

• 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

Examples:

• in-class exercises (Introduction to HTML)
• sample solution (choose View->Page Source when you are viewing the page in Firefox to see the HTML)

Reading:

• HTML - Attributes
• 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:

• web-safe colors (hexadecimal color values)

Examples:

• in-class exercises (colors, images, links)
• sample solution (choose View->Page Source when you are viewing the page in Firefox to see the HTML)

• HTML - Horizontal Rule
• HTML - Lists
• HTML - Image Links

Week 3: 2/1-2/5

Topics: creating interactive pictures with Processing

• Learning Processing, chapters 1 and 2 [available on Blackboard]

Examples:

• in-class demo (four colored rectangles)
• in-class exercises (introduction to processing)
• sample solution (#5 - stacked boxes and circles)

• Learning Processing, chapter 3 [available on Blackboard]

Examples:

• in-class demo (mouse interaction)
• in-class exercises (mouse interaction)
• sample solution (#2 - interactive snowman)
• sample solution (#3 - line sketcher)

When you view the demos and sample solutions, you may need to click inside the drawing area in order for the mouse tracking to start.

Week 4: 2/8-2/12

Topics: representation and animation

• Learning Processing, sections 4.1-4.5 [available on Blackboard]

Examples:

• in-class demo (variables and animation)
• in-class exercises (variables)
• sample solution (#2 - using width, height, and variables)

• Learning Processing, sections 4.6-4.7 [available on Blackboard]

Examples:

• in-class exercises (mouse interaction)
• sample solution (#3 - moving, growing circle)
• sample solution (#4 - animated car)

Week 5: 2/15-2/19

Topics: making choices

• Learning Processing, sections 5.1-5.5

Examples:

• in-class demo (mouse rollover, using 'if' and &&)
• in-class demo (mouse rollover using 'if', 'else if', and 'else')
• in-class demo (mouse rollover using 'if' and ||)
• in-class exercises (conditionals)
• code for #1 (expanding circle)
• sample solution (#3 - expanding circle which starts over when it reaches the edge)
• sample solution (#4 - circle only expands when mouse is outside the circle)

• Learning Processing, sections 5.6-5.8

Examples:

• in-class demo (conditionals, mousePressed)
• in-class demo (conditionals, mousePressed, mouseClicked)
• in-class exercises (conditionals, mousePressed, mouseClicked)
• code for #1 (colored square when mouse button is being pressed)
• sample solution (part of #4 - colored square when mouse button is being pressed, color gets darker and then resets with each click)

Week 6: 2/22-2/26

Topics: more complex animation and interaction

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

Examples:

• in-class demo (more complex animation: zigzags)
• in-class demo (more complex animation: click to pause or unpause)
• in-class demo (more complex animation: click to hide)
• in-class demo (more complex animation: physical simulation of gravity, air resistance)

• in-class demo (more complex animation: bouncing ball with gravity, air resistance)
• in-class demo (more complex animation: sliding down a ramp, then across the bottom of the window)
• in-class demo (more complex animation: moving in a circle)
• in-class demo (more complex animation: swinging pendulum - moving in a circle, gravity, air resistance, and mousePressed)

Week 7: 3/1-3/5

Topics: modularity and reuse

• Learning Processing, sections 7.1-7.6

Examples:

• in-class demo (functions)
• in-class exercises (functions)
• code for #1 (snowman)
• sample solution (#4 - snowman function with position and width parameters)

Week 8: 3/8-3/12

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, and the unfamiliar syntax in some of the examples)

Examples:

• in-class demo (recursion and fractals - Sierpinski carpet)
• in-class exercises (recursion and fractals)
• sample solution (#1 - t-square fractal)
• sample solution (#2 - Sierpinski gasket)

• in-class demo (noise vs random)
• in-class demo (generating terrain using noise)

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

Examples: (click the mouse to increase the maximum depth)

• in-class demo (L-systems: Koch snowflake)
• in-class demo (L-systems: plant)

Spring Break

Week 9: 3/22-3/26

Topics: repetition

• in-class demo (stacked circles: one loop variable)
• in-class demo (leaning tower of circles: two loop variables)
• in-class exercises (loops)
• sample solution (#1 - bullseye pattern)
• sample solution (#2 - offcenter bullseye pattern)

• Learning Processing, sections 6.1-6.4

Examples:

• in-class demo (one loop, multiple loop variables, loop body does one thing)
• in-class demo (one loop, one loop variable, loop body does multiple things)
• in-class demo (one loop, one loop variable, loop body does multiple things)
• in-class demo (one loop after the other, one loop variable in each, each loop body does multiple things)
• in-class demo (nested loops, one loop variable in each)
• in-class demo (two sets of nested loops, one loop variable in each loop)
• in-class demo (animation - no loop)
• in-class demo (animation + one loop, one loop variable, loop body does multiple things)
• in-class demo (animation + one loop, one loop variable, loop body does multiple things)
• in-class exercises (loops)
• sample solution (#1 - nested loops)

Week 10: 3/29-4/2

Topics: repetition, again

• in-class exercises (loops and animation)
• sample solution (#3 - ever-expanding bullseye)
• sample solution (#4 - increasing spacing between circles)
• sample solution (#5 - spacing between circles increasing over time)

• in-class exercises (counting loops)
• sample solution (#1 - 50 random circles)
• sample solution (#2 - stacked boxes)

Week 11: 4/5-4/9

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:

• in-class demo (single bouncing circle)
• in-class demo (row of bouncing circles)
• in-class demo (staggered bouncing circles, using arrays)

Week 12: 4/12-4/16

Topics: more of the same

Examples:

• in-class demo (staggered bouncing circles, using arrays)
• in-class exercises (arrays)
• sample solution (#2 - animation with arrays)

• Learning Processing, section 9.6

Examples:

• in-class demo (differently moving circles, using arrays)
• in-class exercises (arrays)
• sample solution (#2 - animation with arrays)

Week 13: 4/19-4/23

Topics: images

• Learning Processing, sections 15.1, 15.5-15.8

Examples:

• in-class demo (loading images, animated images)
• in-class demo (image processing - brighten)
• in-class exercises (images)

• Learning Processing, section 15.10

Examples:

• in-class demo (selectively applied filter)
• in-class demo (artistic effects - circle color comes from image)
• in-class exercises (images)
• sample solution (#1 - darken)
• sample solution (#2 - red, green, blue filters)

Week 14: 4/26-4/30

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

Examples:

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

Examples:

• emergent behavior: huge flocks of starlings
• artificial life: fish
• machine learning: computer learns to win at nim

Week 15: 5/3-5/4

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

Examples:

• genetic algorithms: eaters and plants

Exams: 5/8-5/11

last updated: --Mon May 3 15:35:16 EDT 2010--
page owned by: bridgeman@hws.edu