Intro to Computational Media (Fall 2015)

What is computational media?
- What is programming?
- How can I apply programming to _____________?
- As a ____________, why would I want or need to write software?
- Example projects.
Programming language discussion
- General discussion of programming languages
- History of creative coding frameworks
  - Processing and p5.js (and what's processing.js?): What is p5.js video
  - openframeworks, cinder
  - max/msp dataflow programming
  - How does arduino fit in?
p5.js in the context of the browser
- Landscape of HTML, CSS, and JavaScript
- Other JS frameworks
- Server-side vs. client-side
- What is the difference between p5 and JavaScript?
Participating in an open-source community
- What are git and github?
- When should you post to a forum vs. file a github issue?
- Who makes these things?
- p5.js working group mailing list
Getting started, your first program
- Download Examples
- Drawing with numbers: video tutorial
- Shape and color functions: video tutorial
- setup() and draw()
- Downloading p5.js
- Start by downloading the p5.js editor.
- p5.js reference
Uploading your sketch

Homework
- Sign up for the ITP ICM Google Group (also sign up for your section's group)
- Sign up for a Github Account. You are not required to use github, but you will need an account to edit the wiki here.
- Create your own screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes – arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() – and basic color functions – background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use createCanvas() to specify the dimensions of your window.
- Post link to your documentation and sketch on your section's wiki. Follow the guidelines provided on the wiki.
- Optional viewing
  - Casey Reas Eyeo 2012 talk on Chance Operations
  - Introductory p5.js videos
Optional reading:
- FORM+CODE: Introduction and What is Code?
- As We May Think, Vannevar Bush
- Long Live the Web, Tim Berners-Lee

2 -- Animation

Program flow (what's a function?)
- Setup, draw, and other events
- Variation: mouseX and mouseY
- video tutorial
More about variables
- make your own variables (numbers and strings), video tutorial
- JS objects (variables inside variables), video tutorial
random(), video tutorial
map(), video tutorial
loading images
Related Reading
Homework
- Create a animated application. Start over from scratch and build something with a very simple design. Focus on the logic of variables and avoid using hard-coded values. Play with mouseX and mouseY. Start by working in pairs (according to list below). You can post together or break off and complete the assignment individually. If you are stuck, here are some ideas.
  - Experiment with motion using a single simple shape. Can you create a randomly jittering "nervous" square? (Here is a sample). A circle that spirals around the window? How could user interaction affect the shape's motion?
  - Use random() to create a painting system. Here are some examples.

3 -- Interaction

Conditionals
- If, else if, else
- Boolean variables
- Relational Operators, Logical Operators
- Buttons, rollovers, switches
Loops
- while
- for
- array as a list of variables
- looping through an array
Modulo
Related Reading
Homework
- TBA, an exercise around building your own interface from scratch

4 -- Functions: the basics

Re-usability
Modularity
Calling vs. defining
Arguments and parameters
Return types
Recursion
Optional Readings:
- Work of Art in the Age of Mechanical Reproduction, Walter Benjamin
Homework: TBA (but something like use a function to draw a design different ways, multiple times. Make a previous sketch modular.)

5 -- DOM: events and callback function

Review events -- mousePressed, keyPressed
DOM elements
- createP()
- createButton()
- createSlider()
Callbacks
- button.mousePressed(callback);
style() -- low key intro to CSS
Homework: TBA, do something with DOM, compare interface elements to how you did your own week 3

6 -- Synthesis

Serial input with a callback workshop
"One button experience" exercise

7 -- Data

arrays
JSON and APIs (and more on callbacks!)
Word Counting
Tabular data
Serial with strings
Optional Reading:
- Art and the API, Jer Thorp
- The Anxieties of Big Data, Kate Crawford
Data Assignment (#1)
- This week and the next two weeks are mini-projects that you can consider trial runs for a final project. They can be small sketches that form a tiny component of a larger idea. Each student will complete all assignments but only 1/3rd will present each week.

8 -- Mobile

Workflow and process, get a previous sketch running on a device
Touch interaction
Sensors
Mobile Assignment (#2)

9 -- Video and Sound

Sound
Live capture
Movie playback
Video Assignment (#3)

10 -- More on objects / Particle System

Objects
- JS objects with methods
- Making JS objects via a "constructor" function
- Example: Make a particle system
Homework: Prepare a final project proposal. Create a web page or blog post with title, description, sample imagery, diagrams, Processing code, etc. Be prepared to present your proposal to the class next week.

11 -- Revelation + Final Project Proposals

See your individual section's proposal schedule on your wiki
moving out of the IDE
HTML/CSS itself
other JavaScript frameworks: jquery, d3, etc.
Open source
- How do artists make and adapt tools for themselves and their communities, like Processing, p5.js, openFrameworks, etc?
- How do you get involved with this?

12 -- Other topics? + Final Project Proposals

See your individual section's proposal schedule on your wiki
Other bonus topics?
- webgl
- What is server side programming?

13 -- One on one speed user testing / feedback

This week you will "user test" your project with fellow classmates. You must have some implementation that you can test completed by this time. User testing can mean different things for different projects. For a game, it can mean that the user tries to play it. For an art piece, it could mean showing it to a classmate and asking for them to say what they think it is about or how it made them feel. We'll show projects in a "one on one" / round robin / speed dating-style session. 5 minutes then switch. You cannot not explain your project, just show and let the user try it and give you feedback. Then you can answer questions. User testing schedule will be provided on a wiki.

14 -- Final Project Presentations

Please add your link to your final project documentation on your section's wiki.

Policies

##Evaluation

Grades will be determined according to the following breakdown:

Regular Assignments 40%
Participation and Attendance 40%
Final Project 20%

Please see ITP's statement on Pass/Fail which states that a "Pass" is equivalent to an "A" or a "B" while anything less would be considered a "Fail".

We will have weekly assignments that are relevant to material from the previous class. These assignments are required and you should be prepared to show/talk about them in class. It is expected that everyone in the class will create and maintain a blog for their assignments.

Attendance is mandatory. Please inform your teacher via email if you are going to miss a class. Two unexcused absences is cause for failing the class. (An unexcused lateness of 10 minutes or more is equivalent to 1/2 an absence.)

This class will be participatory, you are expected to participate in discussions and give feedback to other students both in class and participate with their projects. This (along with attendance) is 40% of your grade.

Class will culminate with final projects. You are expected to push your abilities to produce something that utilizes what you have learned in the class that is useful in some manner to yourself or the world. This will comprise 20% of your grade.

Mantras By James

"Practice is the best of all instructors." - computation requires practice
"An agreeable companion on a journey is as good as a carriage." - look to your classmates for help too
"While we stop to think, we often miss our opportunity." - sometimes you need to take a leap of faith
"When two do the same thing, it is not the same thing after all." - encourage students with similar ideas
"The bow too tensely strung is easily broken." - don't get too stressed out
All of these are from Plubius Syrus.(42 B.C.)

zhouxiqiao/ICM-2015

Intro to Computational Media (Fall 2015)

Listserv

p5.js

Section specific info

Homework Wikis

Videos

Books

Extra Help

Inspirational Projects

Resources

Syllabus

1 -- Introduction and Drawing