COMM 308: Software Design and Society

Morgan Schwartz

office: Nugent 560, Room A
tel: 1-212-774-4865
email: mschwartz AT mmm DOT edu
web: http://sodacity.net/courses/

FALL 2009

Section 02 Monday, 7:15 pm - 9:55 pm

Nugent 556

Syllabus

Course Description

Software is embedded in many objects that we use on a quotidian basis. These range from the more obvious (computers, cell phones) to the often imperceptible (elevators, toasters, toys). Software as such has social implications: software designers play a large role in crafting both our virtual worlds and our interactions in the physical world. In this course you will learn basic computer programming concepts that can be applied to a wide range of programming languages. You will collaboratively experiment with these languages to create your own software projects. Through critical readings and case-studies of mainstream software applications you will gain greater understanding of the social, political and technological forces at work in software development.

Note - previous experience with computer programming is NOT necessary.

Learning Goals

Students will:

Demonstrate an awareness of the history of computers and the evolution of programming languages.
Demonstrate an understanding of algorithms, data structures and basic programming patterns as well as various approaches to the software development process.
Demonstrate an ability to author original algorithms and to see software as an expressive medium not unlike drawing, writing, singing and knitting.
Demonstrate an ability to critically analyze the societal impact of computing and software design.

Textbooks and Materials

materials:
USB Flash Drive (256MB or bigger) - OR - portable Hard Drive

software:
Download and install the free Processing programming environment to your computer.

texts:
all required readings will be available online or handed out in class

attitude:
Your enthusiasm, curiosity and willingness to learn.

optional technical texts:
Processing.org is an invaluable online resource. There are also many good books available on computer programming and software design in general and Processing specifically. Please feel free to speak with me directly if you'd like to explore some additional texts.

optional history/theory texts:

Grade Weights

Class involvement: 20%

A large amount of class time will be dedicated to group critiques, knowledge sharing, in-class assignments and class discussion. I encourage you to take an active role in contributing to make our class a fun and dynamic place to be.

Programming Sketchbook: 40%

You will have 8 homework assignments to complete. Also, by the end of each class period, you will create and turn in a new computer program. In the spirit of a sketchbook, your code needn’t be perfect (or even have to entirely work) - but should reflect an attempt to utilize the concepts presented in class that day.

Presentation OR Technical Workshop: 10%

In groups of 2 students, choose one:

Give a 20 minute presentation to the class case studying projects that use software to make art, architecture or design works.
Give a 20-minute demo/workshop of a particular software technology and develop a participatory activity so that the class can learn how to use it.

Final Project: 30%

Your final project will be a novel software design. You will prepare a technical and conceptual proposal for a new piece of software as well as a small prototype or component of this project realized in code. The emphasis will be on the conceptual design which must be thorough and well-conceived. The prototype does not need to be a fully functional piece of software, but should demonstrate a grasp of basic computer programming principles and best practices. You will demo this prototype for the class. You will work collaboratively in design teams on this project.

Tips

Warning - this course demands substantial work outside of class time to complete the projects. You should plan on an additional 3 hours of work outside of class every week.
Attendance is essential to succeed in this class. The skills and techniques taught are cumulative - they build upon previous ones. Missing just one week can make it very difficult to catch up. You will also note that class participation makes up a sizable percentage of your final grade - if you are absent you cannot participate and your grade will suffer.
Save different versions of your projects and save often. Make back-ups of your files.
Work in the lab with a friend - when learning new technology, 2 brains are usually better than one. You are welcome to work on your assignments at home but many students use the Multimedia Lab in room 556. Lab hours will be posted after the first week of classes. Students may not use the lab when another class is in session. If the lab is locked during regular lab hours you may get a key from the Security Desk.
Ask for help!!!

Safety

Electrical:
Water/liquids are a excellent conductors. You can be shocked if you are touching water that touches electricity. Be careful with drinks around the computers!

Carpal Tunnel
Computer keyboarding, typing and use of the mouse are among many common activities that have been identified as contributing to repetitive stress induced carpal tunnel syndrome.

Eye Strain
Staring at a glowing monitor for extended periods of time can cause headaches, eyestrain and problems with your eyesight. Remember to take frequent short breaks by looking away from the monitor and focusing on something in the distance, or close your eyes for a moment. Your eyes need a break!

Attendance Policy

Attendance will be taken in each class. You are allowed one unexcused (no questions asked) absence, after which your final grade will drop substantially with each absence. In the event that an extraordinary circumstance will require you to miss a class, please let me know ahead of time, by calling me, or by email.

Disabilities

Students with disabilities who require reasonable accommodations or academic adjustments for this course must either enroll in the Program for Academic Access or register with the Office of Student Support Services. For any accommodation, the instructor must be presented with either a letter from the Assistant Director of the Program for Academic Access or an Accommodations Card from the Office of Student Support Services during the first week of classes.

Academic Honesty Policy

MMC fosters an academic community where students and faculty work together to create a learning experience that imparts knowledge and forms character. To achieve this, the College requires all members of the community to adhere to the policy of Academic Honesty that can be found in the Student Handbook, the College Catalogue and on the College website.

Schedule

Week 1 - September 14 - Surrounded by Instructions

In-class:

Course overview
Discussion: What is language? What is a programming language?
Presentation: Processing demo - environment, code, coordinates, primatives

Due:

in-class exercise - peanut butter
in-class exercise - "Hello, World!"

Week 2 - September 21 - Pseudo Code (think small)

In-class:

Presentation: Instructional art (Fluxus), Algorithms, Sol LeWitt
Presentation: variables, data types, operators, arithmetic, decisions

Read for today:

"Software and Drawing" by Casey Reas
"Getting Started with Processing" from Visualizing Data by Ben Fry

Due:

Program 00
in-class sketch: 4 Lines - Part 1

Week 3 - October 5 - User Stories

In-class:

Presentation: Software design
Presentation: User stories and Software design
Presentation: repetition, vertices, curves, color, images

Read for today:

"What is Interaction Design" from Designing Interactions by Gillian Crampton Smith PDF

Due:

4 Lines - Part 2 - Complete Part 2 of the in-class exercise from last week
in-class exercise: bounce
in-class exercise: imagine

Week 4 - October 19 - Simplicity

In-class:

Presentation: Stages of software development
Presentation: text, typography, data, math

Read for today:

"The Laws of Simplicity" by John Maeda PDF

Due:

Program DRAW - Complete Part 2 of the in-class exercise from last week
in-class exercise - musical chairs

Week 5 - October 26 - Getting Loopy

In-class:

Presentation: Approaches to algorithms
Presentation: transformations, continuous, functions

Read for today:

TBA

Due:

Program TYPE
in-class exercise - clear

Week 6 - November 2 - What if?

In-class:

Presentation: Software and self-expression
Presentation: input, mouse, keyboard, events

Read for today:

"1. Intermediation" from My Mother Was a Computer: Digital Subjects and Literary Texts by N. Katherine Hayles [PDF]

Due:

Program TIME
in-class exercise -

Week 7 - November 9 - Lists of lists

In-class:

Presentation: Code and Culture
Presentation: mouse, time, response

Read for today:

"Larry Tesler" from Designing Interactions by Bill Moggridge PDF
"Bill Verplank" from Designing Interactions by Bill Moggridge PDF

Week 8 - November 16 - Interactions

In-class:

Presentation: Design Patterns
Presentation: capturing user interactions

Read for today:
* "Chapter 10 – People and Prototypes" from Designing Interactions by Bill Moggridge [PDF]

Due:

Program MAP
Student Presentation v0.1
Student Presentation v0.2
Student Presentation v0.3

Week 9 - November 23 - Data

In-class:

Presentation: working with data

Read for today:

"The Seven Stages of Visualizing Data" from Visualizing Data by Ben Fry [PDF]

Due:

Final Project Proposal
Student Presentation v0.3
Student Presentation v0.4
Student Presentation v0.5

Week 10 - November 30

In-class:

Team Meetings
Working Sessions

Due:

Rough Draft - Design Document
Student Presentation v0.6
Student Presentation v0.7
Student Presentation v0.8

Week 11 - December 7 - Begin Coding

In-class:

Team Meetings
Working Session

Week 12 - December 14 - Demo Critique

In-class:

Critique of project demos
Team Meetings

Due:

Final project demos

Week 13 - December 15

In-class:

Class recap

Due:

Presentation of final projects

Attachment	Size
Gillian-Crampton-Smith_What-is-Interaction-Design.pdf.pdf	1.03 MB
John-Maeda_The-Laws-of-Simplicity.pdf	1.88 MB
Bill-Moggridge_Larry-Tesler.pdf	1.82 MB
Bill-Moggridge_Bill-Verplank.pdf	1.14 MB

Exercises

A series of exercises for learning computer programming with Processing

A Basic into to Processing

Sketch 00 : Peanut Butter Sandwich

Using the following five items, write instructions for making a peanut butter and jelly sandwich:

knife
jar of peanut butter
jar of jelly
loaf of bread
plate

save your instructions as a text file:
yourLastName_peanutButter.txt (mine would be schwartz_peanutButter)

Sketch 01 : Hello World

Sample file: Hello, World!

Copy and paste the code from the sample file into a new processing sketch. Manipulate the file to do the following things:

Alter what the text says
Change the background color and size of the sketch
Display a numerical calculation (23*77 or 243/13, etc)
Change the font & position of the text
Display more text in a different font

Try to make an interesting composition given your limited set of tools.

Export and save your sketch in your student folder on the server with the folder name:

yourLastName_helloWorld (for me it would be schwartz_helloWorld)

Program 00

Identify an activity that you perform daily
Perform the activity and pay close attention to each step (try to be as granular as possible)
Write a series of instructions explaining how to perform the activity
Try to include at least one "improvement" in your "code" and explain this enhancement after your instructions. The improvement could be a way to perform the activity in less steps or with less money or that is easier/better in some way

Save your file as:
yourLastName_observationalAlgorithm

Sketch 02: 4 Types of Lines

note: - you may only use horizontal, vertical, or diagonal lines

Part 1:

Draw (on paper) a regular pattern with 10 lines of 1 type.
Write pseudo code to instruct someone else on how to create this pattern
Replicate someone else's drawing with a Processing sketch
Save it as yourLastName_oneLine

Part 2:
1. Replicate your sketch from Part 1 but use a for structure to automate your code.
2. Save it as yourLastName_oneLineFor

If time permits:)

Part 3:

Draw (on paper) a regular pattern that includes your pattern from Part 1 and incorporates another pattern using the other 3 line types.
Write pseudo code
Replicate your pattern with a Processsing sketch
Save it as yourLastName_fourLinesFor

Sketch 03 : Bounce

3.0 Move a shape from left to right across the screen.
3.1 Move a shape from left to right across the screen. When it moves off the right edge return it to the left;
3.2 Move a shape from left to right across the screen. When it hits the wall make it bounce back from right to left (forever)
Save it as yourLastName_bounce

Sketch 04 : Imagine

// create an image variable PImage img;

// load the image (it must be in your sketch's data folder
img = loadImage("someimage.jpg");

// tint (gray, alpha) or tint (val,val,val,alpha) tint(255,0,0,50);

// display the image image(name, x, y, width, height)
image(img,0,0);

4.1 load an image
4.2 load 3 versions of an image with 3 different tints
4.3 using a "for" loop, load lots of images and change their location and tint
Save your file as yourLastName_Imagine

Program DRAW

Design a Drawing Application using User Stories
Implement your Drawing Application in Processing
You may work in pairs
Save your program as yourLastName_draw and turn in your User Stories

Class notes

example and code for: bouncing growing line
code for: bouncing bowie
example and code: simple drawing tool
code for: drawing bowie

User Stories

Try to break up your project into specific user stories - you should have at least 2 (but more might be necessary). The idea is to think about your software design in terms of specific requirements and to create a user story about each one. These can simply be typed into a text document and included in your processing project folder.

here's the basic format:
1. statement in the form "As a [user role], I want to [goal], so I can [reason]."
2. brief discussion/explanation of the requirement (including a diagram/sketch if necessary)
3. confirmation - how will you know if the feature is working

for example
1. As a [user], I want to [press/release the mouse], so I can [start/stop drawing]
2. Discussion - the tool should only draw when the mouse button is pressed down, when the user releases the button, drawing should stop
3. Confirmation
1. success: user presses the mouse and drawing starts, user releases the mouse and drawing stops
2. failure: drawing continues if user is not pressing the mouse button

Sample Code

// set an image variable PImage arrow;

// set a speed variable
float speed;

void setup() {
// set your display size(400,400);

// load the image
arrow = loadImage("arrow.png");

}

void draw() {
// draw with points
//point(mouseX, mouseY);

// calculate speed
speed = abs(mouseX-pmouseX);

// control the stroke weight strokeWeight(speed);

// draw with lines
//line(mouseX, mouseY,pmouseX,pmouseY);

// draw with an image
image(arrow,mouseX,mouseY,speed,speed);
}

Program TYPE

Create a typing program to display a different image for each letter on the keyboard.

Class Notes

capture keyboard input
int x = 100; int y = 100;

PFont font;

void setup() {
size(500,300);
smooth();
strokeWeight(4);
font = loadFont("Arial-Black-48.vlw");
textFont(font); }

void draw () {
background(204);
if (keyCode == UP) {
y--;
}
line (20,y,100,y);

text(key,28,75);
}

create simple mouse buttons
void setup() { size(500,300); noStroke(); }

void draw() {
background(204);
if ((mouseX <= width/2) && (mouseY <= height/2)) {
fill(0);
rect(0,0,width/2,height/2); // upper left
} else if ((mouseX <= width/2) && (mouseY > height/2)) {
fill(255,0,0);
rect(0,height/2,width/2,height/2); // upper right
} else if ((mouseX > width/2) && (mouseY < height/2)) {
fill(0,255,0);
rect(width/2,0,width/2,height/2); // lower left
} else {
fill(0,0,255);
rect(width/2,height/2,width/2,height/2); // lower left
}
}

capture mouse input
void setup () { smooth(); size(300,300); noStroke(); }

void draw() {
background(222);
float x = mouseX;
float y = mouseY;
float ix = width - mouseX;
float iy = width - mouseY;
if (mousePressed) {
cursor(CROSS); // ARROW, CROSS, HAND, MOVE, TEXT, WAIT
ellipse(ix,iy,20,20); }

}

Program TIME

Create a clock that communicates the passage of time through graphical quantity or imagery rather than numerical symbols.

basic clock:

int s,m,h; String time; PFont myfont;

int x = 65;
int y = 60;

void setup() {
size(300,100);
myfont = loadFont("Garamond-48.vlw"); textFont(myfont);

}

void draw() { background(0);

s = second();
m = minute();
h = hour();

time = h + ":" + m + ":" + s;

text(time,x,y);

}

line clock:

void setup() {

size(100,100); stroke(255);

}

void draw () {
background(0);
float s = map(second(),0,60,0,100);
float m = map(minute(),0,60,0,100);
float h = map(hour(),0,60,0,100);
line (s,0,s,33);
line (m,34,m,66);
line (h,67,h,100);

}

Program MAP

Examples

Step 0 - show the map

Step 1 - a dot for every state

Step 2 - change dot size by population

Step 3 - change dot color by population

Step 4 - add rollovers

download all examples

Assignment

Find a source of data about all 50 states and present it on a map.

Presentations

In groups of 2 students, choose one:

Give a 20 minute presentation to the class case studying 2-3 projects that use software to make art, architecture or design works.
Give a 20-minute demo/workshop of a particular software technology and develop a participatory activity so that the class can learn how to use

Schedule

Week 8 - November 16 - Interactions

Student Presentation v0.1 - Meagan, Hope, Matt - Yoko Ono
Student Presentation v0.2 - Owen, Lindsey, Myles - Thomas Briggs
Student Presentation v0.3 - Alyssa, Adriana - Datum

Week 9 - November 23 - Data

Student Presentation v0.3 - Eric, Heather A, Allison - MIDI
Student Presentation v0.4 - Sam Caitlin, Danielle - Brooke Singer
Student Presentation v0.5 -

Week 10 - November 30 - Project Proposal

Student Presentation v0.6 - Nicole, Heather B
Student Presentation v0.7 - Noah, Heather G - Video Game Design
Student Presentation v0.8 - Sarah

Possible topics:

Scratch - a programming language designed for young people
Games for Change - games that engage contemporary social issues in meaningful ways to foster a more just, equitable and/or tolerant society
Arduino - Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It's intended for artists, designers, hobbyists, and anyone interested in creating interactive objects or environments.
Pipes - Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.
Drupal - Drupal is a free software package that allows an individual or a community of users to easily publish, manage and organize a wide variety of content on a website
Brooke Singer - Media artist and Associate Professor of New Media at Purchase College
Processing Exhibition - extensive archive of projects created in processing
Casey Reas - Software artist and creator of processing
Ben Fry - Software artist and creator of processing
Thomas Briggs - Software artist
Carnivore - a surveillance tool for data networks
runme.org - archive of software art
Bicycle Built for 2,000 - audio artwork made with Amazon's Mechanical Turk web service
Mint.com - online money management software
MAPLight - public database that illuminates the connection between campaign donations and legislative votes
mycrocosm - a web service that allows you to share snippets of information from the minutiae of daily life in the form of simple statistical graph
Daytum - counts and communicates the personal statistics generated by each of us every day

Final Project

note - You must work in groups of 2 or 3.

Software design is all around us. It governs large systems like financial markets and also subtle experiences such as how we select a song on an MP3 player. Software affects us in countless ways everyday. It is our responsibility to participate in envisioning its future.

Imagine: you have been provided with 10 gazillion dollars of venture capital and a crack team of engineers and computer programmers who can make anything you design.

The Challenge: develop a novel software design. You will prepare a technical and conceptual proposal for a new piece of software as well as a small prototype or component of this project realized in code. The emphasis will be on the conceptual design which must be thorough and well-conceived. The prototype does not need to be a fully functional piece of software, but should demonstrate a grasp of basic computer programming principles and best practices. You will demo this prototype for the class. You will work collaboratively in design teams on this project.

Questions:

What are you making, what does it do?
Who are you making it for - who is your audience?
What kind of information does it take in? What kind of information does it produce?
Is the software used in public, private, both?
How do users interact with it?
What problem does it set out to address?
What are some related software/products/services - how does yours differ?

Ideas:

"Data visualization" - design an interface that allows a user to explore a specific data set in an interesting/revealing/joyful/surprising way. As one option, you can work with a set of of data for female and male homicide rates for each state for each year between 1980-2004. This data is being made available by a criminal sociologist who is interested in seeing visualizations of her research.
"Design your own ..." - this semester we have made a drawing tool, a typewriter, and a clock. Choose another familiar technology and re-imagine it. A visual calculator, a weather service, a calendar ...
"Musical Instrument" - design an interface that allows a user(s) to create sounds/music in a novel way
"Design a Game"

Any idea is welcome - you just have to make your case.

Format:

Project Proposal – due November 23
In this section, write a few paragraphs that describe what the project or software will do. What is the problem it is trying to solve? Why does it need to exist? Who will use it? By answering these questions, you establish the scope of your design.

Design Document – Rough Draft due November 30

Project Name

Background

How did the idea for this software come about? What is the problem it is trying to solve? Why does it need to exist? Who will use it?

Specifically address:

Scope - What are you developing? What does the software do? What does the software NOT do?
Audiences - Who are the major types of users you want the software to serve?
Objectives - What goals should the software help your users meet?

Competitive Analysis - Assess current alternatives/options. What are their strengths and weaknesses? How does your idea fit into the current landscape? You should case study at least 2 other software products in this section.

Implementation

Aesthetics

What is the look and feel for this project? How can specific design decisions make this software appealing and usable to your target audience?

Architectural Strategy

What is a suitable development platform for your project? What kinds of existing technologies can you leverage (open-source code, hardware)? What kinds of new software/hardware needs to be developed to realize your project? You should present your research on the pros and cons of at least 2 different technologies that could be used in developing your project.

Interaction

A use case is a description of how users will perform tasks with your software. Who can do what?

A use case includes two main parts:

the steps a user will take to accomplish a particular task
the way the software should respond to a user's actions

Each use case captures:

The actor - Who is using the software? What specific characteristics does this user have?
The interaction - What can the user do? How does the software respond?
The goal - What is the user's goal?

You should write at least two use cases for your software. You should write each a use case as a mini-narrative.

Prototype

A prototype is a draft version of your software. Prototypes allow you to explore your ideas before investing time and money into development. A prototype can be anything from drawings on paper (low-fidelity), click-through of a few images or pages, or fully functioning software (high-fidelity).

You will create 2 prototypes: a UI prototype and a software prototype.

UI Prototype
This can be done with photoshop/illustrator to create a series of pages that will simulate how a user will interact with your creation. You can think of this as a storyboard or flowchart. The storyboard should represent important UI features (menus, buttons, etc) and demonstrate the ways that a user can interact with your software. These can be presented as a series of PowerPoint slides or in the form of a simple website. For your rough draft, this can be in the form of sketches on paper.

Software Prototype
You will determine a suitable aspect of your project and attempt to prototype it in Processing. I’ll work with each group individually to determine the appropriate part of your project to implement. Please turn in the code for this part of the project. This is not due for the rough draft.

Presentation & Final Design Document – due Last Class
A 10 minute presentation in the form of Power Point or a webpage/blog. Please turn in either a copy burned to CD or a URL.

The presentation should incorporate the following:

A name for your software.
Answers to the above questions.
Use cases or scenarios that demonstrate typical user experiences.
Visual designs - at least 4 visualizations that depict what the service/device/interface looks like and how it would be used.
Code prototype – identify an aspect of your software project and implement it in Processing.

!!! your device/service does not have to completely work - but you need to explain how it would work.