Awesome
ICM-2017
Syllabus for ITP Foundation Course Introduction to Computational Media
Summary
- 1 -- Introduction and Drawing
- 2 -- Animation Variables
- 3 -- Interaction If Statements, Repeat Loops
- 4 -- Functions: the basics
- 5 -- Objects and Arrays
- 6 -- Serial and DOM: events and callback function
- 7 -- Data
- 8 -- Video and Sound
- 9 -- Extra Synthesis Workshop -- All sections meet Friday, October 27, 11am-2pm!
- 10 -- Mobile
- 11 -- Other Topics + Final Project Proposals
- 12 -- Beyond p5.js + Final Project Proposals
- 13 -- One on one speed user testing / feedback
- 14 -- Final Project Presentations
Listserv
p5.js
- This year we are using p5.js, a JavaScript framework for creative coding. Check out the new web editor for p5.js.
Section specific info
Homework Wikis
- Allison, Monday, 6:30-9:00: Homework
- Allison, Wednesday, 12:10–2:40: Homework
- Dano, Wednesday, 3:20-5:50: Homework
- Mimi, Tuesday, 12:10-2:40: Homework
- Shawn, Wednesday, 12:10-2:40: Homework
- Shiffman, Wednesday, 9:00-11:30: Homework
- Shiffman, Wednesday, 3:20-5:50: Homework
Videos
- Kadenze course
- Shiffman YouTube playlist. The videos on YouTube display skippable ads. If you would like downloadable, non-ad versions of the videos, please contact Dan.
Books
- Make: Getting Started with p5.js: Making Interactive Graphics in JavaScript and Processing is probably your best bet for now if you are looking for a book. Free through NYU library
- If you are interested in some supplemental reading on HTML and CSS, The HTML & CSS book is a nice one.
Example Code
- Getting Started with p5.js code
- Learning Processing code ported to p5.js
- Video lesson accompanying code
Extra Help
- Research Resident Office Hours
- Cassie Office Hours -- (Cassie is the lead developer of the p5.js web editor so bring your bugs and questions about that!)
- ICM Help Sessions:
- Tuesdays, 6:45pm - 8:45pm, Meeting Room, with residents Mathura & Leon
- Fridays 1:00pm - 2:30pm, Room 20, with residents Lisa & Aarón
Inspirational Projects
Resources
- p5.js reference
- p5.js forum
- p5.js tutorials
- Getting Started with p5.js - O'Reilly book
- Intro to Visual Programming with p5.js - online video tutorials (free with signup)
- There are many additional resources on the Resources wiki page.
Syllabus
1 -- Introduction and Drawing
- 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
- Drawing with numbers: video tutorial
- Shape and color functions: video tutorial
setup()anddraw()- p5.js reference
- <a id="optional-1">Optional viewing / reading:</a>
- Pick an Eyeo Talk that looks interesting
- Introductory p5.js videos
- FORM+CODE: Introduction and What is Code?
- As We May Think, Vannevar Bush
- Long Live the Web, Tim Berners-Lee
- Very extra painting links
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
- Transformations
translate(),rotate(),scale(),push(),pop()- translate, rotate, push, pop video tutoral
- scale video tutorial
- more on technical details
- Examples
3 -- Interaction
- Conditional Statements
- Boolean expressions
- if statement
- relational operators
- video tutorial
- Case study, bouncing ball: video tutorial
- else, else if, AND, OR video tutorial
- boolean variables video tutorial
- buttons, rollovers, switches
- Loops (while and for)
- while and for video tutorial
- nested loops video tutorial
- Examples
4 -- Functions: the basics
- Calling vs. defining
- Modularity: video
- Arguments and parameters
- Re-usability: video
- Return types: video
- Recursion
- [video tutorial](link coming soon -- remind me somebody!)
- recursion
- Optional Readings:
- Work of Art in the Age of Mechanical Reproduction, Walter Benjamin
5 -- Objects and Arrays
- Object-Oriented Programming with Classes in JavaScript
- Learning Processing Chapter 8 on Objects translated to p5
- Arrays
- 7.1 What is an array?
- 7.2 Arrays and loops
- 7.3 Arrays of objects
- 7.4 Mouse interaction with objects
- 7.5 Removing objects from arrays
- A Snake Following the Mouse
- Interactive Stripes
- An Array of Buttons
- Checking objects intersecting with other objects Old video, no classes! video tutorial, Old video, no classes! video tutorial
- [Checking Objects Intersection]http://alpha.editor.p5js.org/icm/sketches/S1BbBT13b)
- loading images for objects Old video, no classes! video tutorial 6.11
- MousePressed Adding New Images
- Optional quiz to test your knowledge
6 -- Serial and DOM: events and callback function
- Review events -- mousePressed, keyPressed
- Review Serial, introduce callback
- Tutorial: Beyond the Canvas, using p5.dom
- Tutorial: Intro to HTML/CSS basics
- DOM elements - p5.dom reference
createP()createButton()createSlider()
- Callbacks
button.mousePressed(callback);
style()-- low key intro to CSS- CSS Reference
7 -- Data
- Tutorial: loading external data with p5.js
- Tutorial: more about data and APIs
- JSON and APIs (and more on callbacks!)
- Word Counting
- Tabular data
- Maps, see: Mappa
- Additional Reading:
- Art and the API, Jer Thorp
- The Anxieties of Big Data, Kate Crawford
- Sentencing Guideline From Surya
8 -- Video and Sound
- p5.sound reference
- Video/capture: p5.MediaElement reference
- Sound
- Live capture
- Movie playback
- Video Assignment
9 -- Extra Synthesis Workshop -- All sections meet Friday, October 27, 11am-2pm!
- Meet in the ITP Lounge
- Pizza will be served
- Details TBA
PROJECT RUNWAY
10 -- Mobile
- Workflow and process, get a previous sketch running on a device
- Touch interaction
- Events
- Sensors
- Hammer.js
- Remote debugging:
- Using the viewport meta tag to control layout on mobile browsers
- Homework: Prepare a final project proposal. See you section's wiki.
11 -- Other Topics + Final Project Proposals
- See your individual section's proposal schedule on your wiki
- Possible topics
- WebGL - tutorial
- setTimeout, setInterval
- more about ES6?
- more on pixels
- more on data
12 -- Beyond p5.js + Final Project Proposals
- See your individual section's proposal schedule on your wiki
- Life beyond p5.js
- Take ICM into the spring semester courses
- Other JS libraries?
- Coding outside the p5 IDE? (local server tutorial), video tutorial
- More HTML/CSS
- What is server side programming for?
- Database a service controlled by p5.js client.
- web sockets for real-time communcation
- Basics of node, making an API in Node
- Processing
- 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?
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.)