├── .gitignore ├── sections.md ├── sections ├── 04_Mimi.md ├── 06_Dano.md ├── 01_Luisa.md ├── 03_Allison.md ├── 02_Shawn.md └── 05_Cassie.md ├── weeks ├── 04_functions.md ├── 02_animation.md ├── 06_serial.md ├── 05_objects.md ├── 03_interaction.md ├── 01_intro.md ├── 07_data.md ├── 06_dom.md ├── 09_ml.md └── 08_media.md ├── CODE_OF_CONDUCT.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode -------------------------------------------------------------------------------- /sections.md: -------------------------------------------------------------------------------- 1 | # Section Info 2 | * [Allison](sections/03_Allison.md) 3 | * [Cassie](sections/05_Cassie.md) 4 | * [Dano](sections/06_Dano.md), [Homework](https://github.com/shiffman/ICM-2018/wiki/Homework-Dano) 5 | * [Luisa](sections/01_Luisa.md) 6 | * [Mimi](sections/04_Mimi.md) 7 | * [Shawn](sections/02_Shawn.md) 8 | -------------------------------------------------------------------------------- /sections/04_Mimi.md: -------------------------------------------------------------------------------- 1 | # ICM 2018 Mimi Yin 2 | - Mimi Yin, mimi.yin@nyu.edu 3 | - Tuesdays 12:10-2:40PM 4 | - [Homework Wiki](https://github.com/ITPNYU/ICM-2018/wiki/Homework-Mimi) 5 | - [Office Hours Signup](https://itp.nyu.edu/inwiki/Signup/Mimi) 6 | 7 | # Class Dates 8 | 1. Tuesday, September 4 9 | 2. Tuesday, September 11 10 | 3. Tuesday, September 18 11 | 4. Tuesday, September 25 12 | 5. Tuesday, October 2 13 | 6. Tuesday, October 9 14 | 7. Tuesday, October 16 15 | 8. Tuesday, October 23 16 | 9. Tuesday, October 3 17 | 10. *Friday Nov 2, 11AM-2PM Dumplings!* 18 | 11. Tuesday, November 6 19 | 12. Tuesday, November 13 20 | 13. Tuesday, November 20 21 | 14. Tuesday, December 4 22 | -------------------------------------------------------------------------------- /sections/06_Dano.md: -------------------------------------------------------------------------------- 1 | ## Info 2 | 3 | * Dan O'Sullivan 4 | * Wednesday, 3:20pm to 5:50pm 5 | * Room TBD 6 | * dan.osullivan@nyu.edu 7 | * [Office Hours](https://calendar.google.com/calendar/selfsched?sstoken=UVBlTFZhOVNCTmF0fGRlZmF1bHR8MmU2NTM4NjJmOTJiNTUwM2M0YTBmMzcyZDM4NjRkNmQ) 8 | * [Homework Wiki](https://github.com/shiffman/ICM-2018/wiki/Homework-Dano) 9 | 10 | ## Dates 11 | 12 | 1. September 5 13 | 2. September 12 14 | 3. September 19 15 | 4. September 26 16 | 5. October 3 17 | 6. October 10 18 | 7. October 17 19 | 8. October 24 20 | 9. October 31 21 | 10. Friday, Nov 2 11am-2pm -- Dumplings! 22 | 11. November 7 23 | 12. November 14 24 | Thanksgiving 25 | 13. November 28 26 | 14. December 5 -- Finish before other classes 27 | 28 | -------------------------------------------------------------------------------- /sections/01_Luisa.md: -------------------------------------------------------------------------------- 1 | ## Info 2 | 3 | * Luisa Pereira 4 | * Tuesday, 9:00am to 11:30am 5 | * Room 15 6 | 7 | * [Homework Wiki](https://github.com/shiffman/ICM-2018/wiki/Homework-Luisa) 8 | * [Office Hours](https://calendar.google.com/calendar/selfsched?sstoken=UU1WMTVTeUQzVjhUfGRlZmF1bHR8NmJlYmZkZWU4NjRlMGEzMzg3NDA1NTNhODU2OTBmNTc) 9 | * Email: luisa.ph@nyu.edu 10 | 11 | ## Dates 12 | 13 | 1. Tuesday, September 4 14 | 2. Tuesday, September 11 15 | 3. Tuesday, September 18 16 | 4. Tuesday, September 25 17 | 5. Tuesday, October 2 18 | 6. Tuesday, October 16 19 | 7. Tuesday, October 23 20 | 8. Tuesday, October 30 21 | 9. Tuesday, November 6 22 | 10. Tuesday, November 13 23 | 11. Tuesday, November 20 24 | 12. Tuesday, November 27 25 | 13. Tuesday, December 4 26 | 14. Tuesday, December 11 27 | -------------------------------------------------------------------------------- /sections/03_Allison.md: -------------------------------------------------------------------------------- 1 | ## Information 2 | 3 | * I'm your instructor, [Allison Parrish](http://www.decontextualize.com/). 4 | * E-mail me at [aparrish@nyu.edu](mailto:aparrish@nyu.edu). 5 | * We meet Thursdays from 12:10pm–2:40pm. 6 | * I don't know which room off the top of my head. It'll be on a schedule somewhere probably. 7 | * [Class outlines and homework assignments](https://github.com/ITPNYU/ICM-2018/wiki/Homework-Allison) 8 | * [Office hours](http://help.itp.nyu.edu/in-person/office-hours/) 9 | 10 | ## Dates 11 | 12 | 1. September 6 13 | 2. September 13 14 | 3. September 20 15 | 4. September 27 16 | 5. October 4 17 | 6. October 11 18 | 7. October 18 19 | 8. October 25 20 | 9. November 1 21 | 10. **Friday, Nov 2 11am-2pm -- Dumplings!** 22 | 11. November 8 23 | 12. November 15 24 | 13. November 29 25 | 14. December 6 26 | -------------------------------------------------------------------------------- /sections/02_Shawn.md: -------------------------------------------------------------------------------- 1 | # ICM 2018 Shawn Van Every 2 | - Shawn Van Every, Shawn.Van.Every@nyu.edu 3 | - Wednesdays 12:10-2:40PM 4 | - [Homework Wiki](https://github.com/ITPNYU/ICM-2018/wiki/Homework-Shawn) 5 | - [Office Hours Signup](https://calendar.google.com/calendar/selfsched?sstoken=UURiM21GUFRTUjFLfGRlZmF1bHR8NTJhYjQ3M2JmODJhNDVjMTY3YTQ3MTMzMjA0MzI4N2Y) 6 | 7 | # Class Dates 8 | 1. Wednesday, September 5 9 | 2. Wednesday, September 12 10 | 3. Wednesday, September 19 11 | 4. Wednesday, September 26 12 | 5. Wednesday, October 3 13 | 6. Wednesday, October 10 14 | 7. Wednesday, October 17 15 | 8. Wednesday, October 24 16 | 9. Wednesday, October 31 17 | 10. *Friday Nov 2, 11AM-2PM Dumplings!* 18 | 11. Wednesday, November 7 19 | 12. Wednesday, November 14 20 | 13. Wednesday, November 28 21 | 14. Wednesday, December 5 22 | -------------------------------------------------------------------------------- /sections/05_Cassie.md: -------------------------------------------------------------------------------- 1 | ## Info 2 | 3 | * Cassie Tarakajian, cassie.tarakajian@nyu.edu 4 | * Wednesday, 9:00am to 11:30am 5 | * Conference Room 6 | * [Homework Wiki](https://github.com/shiffman/ICM-2018/wiki/Homework-Cassie) 7 | * [Office Hours](https://calendar.google.com/calendar/selfsched?sstoken=UU1sWVF3by0wR2lQfGRlZmF1bHR8YjhkY2IyODcxNDk3ODRhNzI1OTkyN2JiMDY3ODFmNWI): Thursday Afternoons, Adjunct Area, 4th Floor 8 | 9 | ## Dates 10 | 11 | 1. Wednesday, September 5 12 | 2. Wednesday, September 12 13 | 3. Wednesday, September 19 14 | 4. Wednesday, September 26 15 | 5. Wednesday, October 3 16 | 6. Wednesday, October 10 17 | 7. Wednesday, October 17 18 | 8. Wednesday, October 24 19 | 9. Wednesday, October 31 20 | 10. **Friday, Nov 2 11am-2pm -- Dumplings!** 21 | 11. Wednesday, November 7 22 | 12. Wednesday, November 14 23 | 13. Wednesday, November 28 24 | 14. Wednesday, December 5 25 | -------------------------------------------------------------------------------- /weeks/04_functions.md: -------------------------------------------------------------------------------- 1 | # Functions (and here comes Objects) 2 | 3 | *The videos in this section were created ~2 years ago. They use different editors for p5.js. All of the concepts should still apply, however, there are some minor changes. Most notably in JavaScript `let` is now the preferred way to declare a variable over `var`. If you would like to learn more about this you can [watch this video about let vs var](https://youtu.be/q8SHaDQdul0).* 4 | 5 | ## Modularity 6 | * [5.1: Function Basics - video tutorial](https://www.youtube.com/watch?v=wRHAitGzBrg&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=16) 7 | * [Bouncing ball with functions code example](https://editor.p5js.org/icm/sketches/H1Oq4qta) 8 | 9 | ## Re-usability 10 | * [5.2: Function Parameters and Arguments - video tutorial](https://www.youtube.com/watch?v=zkc417YapfE&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=17) 11 | * [Dice no functions code example](https://editor.p5js.org/icm/sketches/ryx70m5tT) 12 | * [Dice w/ functions code example](https://editor.p5js.org/icm/sketches/S1R44qtT) 13 | * [Robots from Getting Started with p5.js Code Example](https://editor.p5js.org/icm/sketches/rylf4S5K6) 14 | * [5.3: Functions and Return - video tutorial](https://www.youtube.com/watch?v=qRnUBiTJ66Y&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=18) 15 | * [Implementing distance function code example](https://editor.p5js.org/icm/sketches/HJgR7UcKa) 16 | 17 | ## Recursion 18 | * [Coding Challenge video: Recursion](https://youtu.be/jPsZwrV9ld0) 19 | * [recursion code example](https://editor.p5js.org/icm/sketches/Hyevi8ct6) 20 | * [Coding Challenge video: Fractal Tree](https://youtu.be/0jjeOYMjmDU) - note this video uses the p5.dom function `createSlider()` which we have yet to cover in class! 21 | * [fractal tree code example](https://editor.p5js.org/icm/sketches/rkZAJ6PtX) 22 | -------------------------------------------------------------------------------- /weeks/02_animation.md: -------------------------------------------------------------------------------- 1 | # Animation 2 | 3 | ## Variation 4 | 5 | *The videos in this section were created ~2 years ago. They use different editors for p5.js. All of the concepts should still apply, however, there are some minor changes. Most notably in JavaScript `let` is now the preferred way to declare a variable over `var`. If you would like to learn more about this you can [watch this video about let vs var](https://youtu.be/q8SHaDQdul0).* 6 | 7 | * `setup()`, `draw()`, and other events: `mousePressed()`, etc. 8 | * Built-in variables 9 | * [video 2.1: Variables in p5.js (mouseX, mouseY)](https://www.youtube.com/watch?v=RnS0YNuLfQQ&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=5) 10 | * User defined variables 11 | * [video 2.2: Variables in p5.js (Make your own)](https://www.youtube.com/watch?v=Bn_B3T_Vbxs&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=6) 12 | * [video 2.3: JavaScript Objects (variables inside variables)](https://www.youtube.com/watch?v=-e5h4IGKZRY&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=7) 13 | * The [random()](http://p5js.org/reference/#/p5/random) function 14 | * [video 2.5: random()](https://www.youtube.com/watch?v=nfmV2kuQKwA&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=9) 15 | * [Rainbow Paintbrush in p5.js](https://medium.com/@kellylougheed/rainbow-paintbrush-in-p5-js-e452d5540b25) by Kelly Lougheed 16 | * The [map()](http://p5js.org/reference/#/p5/map) function 17 | * [video 2.4: map()](https://www.youtube.com/watch?v=nicMAoW6u1g&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=8) 18 | 19 | ## Transformations 20 | * [video 9.1: `translate()`, `rotate()`, `push()`, `pop()`](https://youtu.be/o9sgjuh-CBM) 21 | * [video 9.2: `scale()`](https://youtu.be/pkHZTWOoTLM) 22 | * [video 9.3: More on transformations](https://youtu.be/IVMvq9rd8dA) 23 | 24 | ## p5.js editor examples 25 | * [random painting](https://editor.p5js.org/projects/HJg8jfcT3) 26 | * [mouse controlled painting](https://editor.p5js.org/projects/r1JeQqa3) 27 | * [moving circle](https://editor.p5js.org/projects/Bymv7ca2) 28 | * [clock](https://editor.p5js.org/icm/sketches/ryYueiWu7) -- [Clock coding challenge video](https://youtu.be/E4RyStef-gY) 29 | -------------------------------------------------------------------------------- /weeks/06_serial.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Serial and p5.js 2 | 3 | 1. Download the [P5 Serial Control](https://github.com/vanevery/p5.serialcontrol/releases) application. This application serves as a bridge between your arduino and your p5 sketch. For it to run you'll on a mac you'll need to cntrl-click to open. [More info on apple's help pages](https://support.apple.com/en-us/HT202491). 4 | 5 | 2. Open the following example, connect your Arduino, and get it running. (You can "duplicate" it in the p5 editor to save it into your account.) (NOTE: Right now using this with the p5.js Editor requires Chrome) 6 | * [p5.js code for reading analog value](http://alpha.editor.p5js.org/shawn/sketches/Sk3xpl26). Works with AnalogReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples-> Basics —> AnalogReadSerial. Turn a potentiometer from 0 - 1023, the ball moves from 0-255 on the screen. 7 | 8 | The examples use the p5.serialport library. You can read [documentation](http://vanevery.github.io/p5.serialport/docs/classes/p5.serialport.html) and find [more examples](https://github.com/vanevery/p5.serialport/tree/master/examples). 9 | 10 | You might notice the above examples use a new concept called a "callback." This is a concept we will examine in detail next week in ICM while looking at "DOM manipulation." A quick explanation for how this relates to serial communication is as follows: 11 | 12 | There is an "event" each time your p5 sketch receives data from the serial port. You get to decide what function is executed for that event. In the case of the examples, that function is `serialEvent()`. 13 | 14 | ```javascript 15 | // When there is data, run serialEvent 16 | serial.on('data', serialEvent); 17 | ``` 18 | 19 | The above line of code then requires you write a function called `serialEvent()` to handle the data. 20 | 21 | ```javascript 22 | function serialEvent() { 23 | // Your code for reading the data goes here. 24 | } 25 | ``` 26 | 27 | If you start a new sketch or are adapting a previous sketch made in the p5 editor, you'll need to upload [p5.serialport.js](https://raw.githubusercontent.com/vanevery/p5.serialport/master/lib/p5.serialport.js) to your sketch. 28 | 29 | As well as add the following line to the `index.html` file. 30 | 31 | ```html 32 | 33 | ``` 34 | 35 | The [Pcomp site](https://itp.nyu.edu/physcomp/itp/syllabus/) has much more in-depth serial information complete with a [video](https://vimeo.com/237203208) for a similar example! 36 | -------------------------------------------------------------------------------- /weeks/05_objects.md: -------------------------------------------------------------------------------- 1 | # Objects and Arrays 2 | 3 | Some of the videos in this section were created last year and some two years ago. They use different editors for p5.js. All of the concepts should still apply, however, there are some minor changes. If you notice something way off, please let Dan know! 4 | 5 | ## Object-Oriented Programming with Classes in JavaScript 6 | * [Mozilla Classes reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 7 | * [Learning Processing Chapter 8 on Objects translated to p5](https://shiffman.github.io/Learning-p5.js/ch08.html) 8 | * [6.1 Intro to ES6 OOP - video tutorial](https://www.youtube.com/watch?v=xG2Vbnv0wvg) 9 | * [6.2 Writing a Class - video](https://www.youtube.com/watch?v=T-HGdc8L-7w) 10 | * [6.3 Constructor Arguments](https://www.youtube.com/watch?v=rHiSsgFRgx4) 11 | * [Two Gravity Ball Objects code](http://editor.p5js.org/icm/sketches/BkyUQp1nb) 12 | 13 | ## Arrays 14 | * [7.1 What is an array? - video tutorial](https://www.youtube.com/watch?v=VIQoUghHSxU) 15 | * [7.2 Arrays and loops - video tutorial](https://www.youtube.com/watch?v=RXWO3mFuW-I) 16 | * [7.3 Arrays of objects - video tutorial](https://www.youtube.com/watch?v=fBqaA7zRO58) 17 | * [Extra video tutorial: for...of loop](https://youtu.be/Y8sMnRQYr3c?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) 18 | * [A Snake Following the Mouse - code](https://editor.p5js.org/icm/sketches/BkBsybb5X) 19 | 20 | ## Arrays of Objects 21 | * [7.4 Mouse interaction with objects - video tutorial](https://www.youtube.com/watch?v=TaN5At5RWH8) 22 | * [7.5 Removing objects from arrays - video tutorial](https://www.youtube.com/watch?v=tA_ZgruFF9k) 23 | * [Interactive Stripes - code](http://editor.p5js.org/icm/sketches/B1ja76khW) 24 | * [An Array of Buttons - code](http://editor.p5js.org/icm/sketches/BkaTNak3Z) 25 | 26 | ## Object "communication" 27 | * [7.6: Object Communication Part 1 - video tutorial](https://youtu.be/W1-ej3Wu5zg?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) 28 | * [7.7: Object Communication Part 2 - video tutorial](https://youtu.be/5Q9cA0REztY?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) 29 | * [Checking Objects Intersection - code](http://editor.p5js.org/icm/sketches/S1BbBT13b) 30 | 31 | ## Images and Objects 32 | * [7.8: Objects and Images - video tutorial](https://youtu.be/i2C1hrJMwz0?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) 33 | * [MousePressed Adding New Images - code](http://editor.p5js.org/icm/sketches/SJzKEak3W) 34 | 35 | ## Particle Systems 36 | * [Particle System - video](https://youtu.be/UcdigVaIYAk) 37 | * [Particle System - code](https://editor.p5js.org/icm/sketches/B1d5xfS5X) 38 | * [Snowfall - video](https://youtu.be/cl-mHFCGzYk) 39 | * [Snowfall - code](https://editor.p5js.org/icm/sketches/HkICgMSqQ) 40 | -------------------------------------------------------------------------------- /weeks/03_interaction.md: -------------------------------------------------------------------------------- 1 | # Interaction 2 | 3 | *The videos in this section were created ~2 years ago. They use different editors for p5.js. All of the concepts should still apply, however, there are some minor changes. Most notably in JavaScript `let` is now the preferred way to declare a variable over `var`. If you would like to learn more about this you can [watch this video about let vs var](https://youtu.be/q8SHaDQdul0).* 4 | 5 | ## Conditional Statements 6 | * [3.1: Introduction to Conditional Statements - video tutorial](https://www.youtube.com/watch?v=1Osb_iGDdjk&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=10) 7 | * `if` statement 8 | * relational operators (`>`, `<`, `<=`, `>=`, `==`, `===`, `!==`) 9 | * [3.2: Bouncing Ball - video tutorial](https://www.youtube.com/watch?v=LO3Awjn_gyU&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=11) 10 | * [bouncing ball editor example](https://editor.p5js.org/projects/BJKWv5Tn) 11 | * [3.3: `else`, `else if`, AND (`&&`), OR (`||`) - video tutorial](https://www.youtube.com/watch?v=r2S7j54I68c&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=12) 12 | * [3.4: Boolean variables - video tutorial](https://www.youtube.com/watch?v=Rk-_syQluvc&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=13) 13 | 14 | ## Loops (while and for) 15 | * [4.1: `while` and `for` - video tutorial](https://www.youtube.com/watch?v=cnRD9o6odjk&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=14) 16 | * [4.2: nested loops - video tutorial](https://www.youtube.com/watch?v=1c1_TMdf8b8&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=15) 17 | 18 | ## Getting Started with p5.js book 19 | * Chapters 4-5 of [Getting Started with p5.js book](http://amzn.to/2ckixCW) - [Ebook (free with NYU Library login)](https://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=4333728) 20 | 21 | 22 | ## GUI Interfaces 23 | One way to practice working with conditionals is to try to code a common interface elements in the canvas: e.g. rollover, button, slider, etc. In [week 6](https://github.com/ITPNYU/ICM-2018/blob/master/weeks/06_dom.md) we'll compare this technique to using elements the browser provides for free. 24 | - [circle rollover](https://editor.p5js.org/projects/H1kCSqah) 25 | - [square rollover](https://editor.p5js.org/projects/rkLfL56h) 26 | - [button hold down](https://editor.p5js.org/projects/S16-H9pn) 27 | - [button switch](https://editor.p5js.org/projects/Sywrrqa2) 28 | - [quadrant rollover](https://editor.p5js.org/projects/Hki1I5ah) 29 | - [rollover with fade](https://editor.p5js.org/projects/SkPsHcph) 30 | - [draggable](https://editor.p5js.org/projects/B13wH5T3) 31 | - [knob](https://editor.p5js.org/projects/HkfFHcp2) 32 | - [slider](https://editor.p5js.org/projects/H1LXU9ah) 33 | 34 | ## 10PRINT 35 | * [10PRINT Coding Challenge video](https://youtu.be/bEyTZ5ZZxZs) 36 | * [10PRINT code example](https://editor.p5js.org/projects/rkHKL962) 37 | -------------------------------------------------------------------------------- /weeks/01_intro.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | ## What is computational media? 3 | * What is programming? 4 | * How can I apply programming to _____________? 5 | * As a ____________, why would I want or need to write software? 6 | * [Example projects for Inspiration](https://github.com/ITPNYU/ICM-2018/wiki/Inspiration) 7 | ## Programming language discussion 8 | * General discussion of programming languages 9 | * History of creative coding frameworks 10 | * Processing and p5.js (and what's processing.js?) 11 | * [Introduction to Code with p5.js Video](https://youtu.be/yPWkPOfnGsw) 12 | * [p5.js Web Editor Promo Video](https://youtu.be/dtHxDggkBYc) 13 | * [History of p5.js video](https://www.youtube.com/watch?v=FdsWWjqoPKU) 14 | * openframeworks, cinder 15 | * max/msp dataflow programming 16 | * How does arduino fit in? 17 | ## p5.js in the context of the browser 18 | * Landscape of HTML, CSS, and JavaScript 19 | * Other JS frameworks 20 | * Server-side vs. client-side 21 | * What is the difference between p5 and JavaScript? 22 | ## Participating in an open-source community 23 | * What is git and github? 24 | * When should you post to a forum vs. file a github issue? 25 | * Who makes these things? 26 | 27 | # Drawing 28 | ## Getting started, your first program 29 | * [p5.js Web Editor Tutorial](https://youtu.be/MXs1cOlidWs) 30 | * [Drawing with numbers video tutorial](https://youtu.be/c3TeLi6Ns1E) 31 | * [Shape and color functions video tutorial](https://youtu.be/c3TeLi6Ns1E) 32 | * [Errors and Console Video Tutorial](https://youtu.be/LuGsp5KeJMM) 33 | * [Code Comments Video Tutorial](https://youtu.be/xJcrPJuem5Q) 34 | * `setup()` and `draw()` 35 | * [p5.js reference](http://p5js.org/reference) 36 | ## Additional viewing / reading: 37 | * [Pick an Eyeo Talk that looks interesting](https://vimeo.com/eyeofestival/) 38 | * [All introductory p5.js videos](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) 39 | * [Comparing Processing and p5.js Part 1 video](https://youtu.be/AmlAiKsiy0o), [Comparing Processing and p5.js Part 2 video](https://youtu.be/AsjPJ5AWkDc), [Comparing Processing and p5.js Part 3 video](https://youtu.be/_y8rEHjqzRA) 40 | * [Overview of p5.js Web Editor with Cassie](https://youtu.be/x1rJJRVTpAI) 41 | * [FORM+CODE: Introduction and What is Code?](http://formandcode.com) 42 | * [As We May Think](http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/), Vannevar Bush 43 | * [Long Live the Web](http://jblomo.github.io/webarch253/slides/Long_Live_the_Web.pdf), Tim Berners-Lee 44 | ## Very extra painting links 45 | * [More about color](https://programmingdesignsystems.com/color/a-short-history-of-color-theory/index.html) 46 | * [More about shapes (specifically "custom shapes" with vertices and bezier curves)](https://programmingdesignsystems.com/shape/custom-shapes/index.html#custom-shapes-pANLh0l) 47 | * [p5 playground](http://yining1023.github.io/p5PlayGround/) 48 | -------------------------------------------------------------------------------- /weeks/07_data.md: -------------------------------------------------------------------------------- 1 | # Data and APIs 2 | 3 | *Some of the videos in this section were created last year and some two years ago. They use different editors for p5.js. All of the concepts should still apply? I wonder also if any of the APIs have changed significantly and the examples no longer work or apply! If you notice something way off, please let me know!* 4 | 5 | 6 | ## Written Tutorials 7 | - [Tutorial: loading external data with p5.js](https://github.com/processing/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON) 8 | 9 | ## Data Sources 10 | * [Data Sources Wiki](https://github.com/ITPNYU/ICM-2018/wiki/Data-Sources) - please help organized and add to this list! 11 | 12 | ## Background Reading 13 | * [Zuck Speaks: Facebook Restricts API Data Access And Shares Updates On User Privacy Efforts](https://adexchanger.com/platforms/zuck-speaks-facebook-restricts-api-data-access-and-shares-updates-on-user-privacy-efforts/) 14 | * [What Information is "Personally Identifiable"?](https://www.eff.org/deeplinks/2009/09/what-information-personally-identifiable) by Seth Schoen 15 | * [How Uber Uses Psychological Tricks to Push Its Drivers’ Buttons](https://www.nytimes.com/interactive/2017/04/02/technology/uber-drivers-psychological-tricks.html) by Noem Scheiber (NY Times) 16 | * [Art and the API](http://blog.blprnt.com/blog/blprnt/art-and-the-api) by Jer Thorp 17 | * [The Anxieties of Big Data](http://thenewinquiry.com/essays/the-anxieties-of-big-data/) by Kate Crawford 18 | * [Sentencing Guideline](https://www.washingtonpost.com/news/monkey-cage/wp/2016/10/17/can-an-algorithm-be-racist-our-analysis-is-more-cautious-than-propublicas/) by Sam Corbett-Davies, Emma Pierson, Avi Feller and, Sharad Goel (Washington Post) 19 | 20 | ## Data, APIs, and JSON 21 | * [10.1: Introduction to Data and APIs in JavaScript - video tutorial](https://youtu.be/rJaXOFfwGVw?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 22 | * [10.2: What is JSON? Part 1 - video tutorial](https://youtu.be/_NFkzw6oFtQ?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 23 | * [10.3: What is JSON? Part 2 - video tutorial](https://youtu.be/118sDpLOClw?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 24 | 25 | ## Loading Data and Callbacks 26 | * [10.4: Loading JSON data from a URL (Asynchronous Callbacks!) - video tutorial](https://youtu.be/6mT3r8Qn1VY?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 27 | * [10.5: Working with APIs in Javascript - video tutorial](https://youtu.be/ecT42O6I_WI?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 28 | * [10.6: API Query with User Input - video tutorial](https://youtu.be/4UoUqnjUC2c?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 29 | * [10.7: API Query with JavaScript setInterval() - video tutorial](https://youtu.be/UNtqhnhD-wo?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 30 | 31 | ## Specific API Examples 32 | * [10.8: Wordnik API - video tutorial](https://youtu.be/YsgdUaOrFnQ?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 33 | * [10.9: NYTimes API - video tutorial](https://youtu.be/IMne3LY4bks?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 34 | * [10.10: Giphy API - video tutorial](https://youtu.be/mj8_w11MvH8?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 35 | * [Mapping Data with Mappa library - video tutorial](https://youtu.be/ZiYdOwOrGyc?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 36 | * [Wikipedia API - video tutorial](https://youtu.be/RPz75gcHj18?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r) 37 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at oss.at.itp@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /weeks/06_dom.md: -------------------------------------------------------------------------------- 1 | # The DOM: HTML and CSS 2 | 3 | The videos in this section were created two years ago. They use a different editor for p5.js. All of the concepts should still apply, however, there are some minor changes. If you notice something way off, please let Dan know! 4 | 5 | Also, at the moment there is a pretty significant bug in p5 versio `0.7.2`, the one the p5.js web editor loads by default. You can go into the `index.html` and change hte version to `0.6.1` for the examples below to run until this gets sorted out! 6 | 7 | https://github.com/processing/p5.js/issues/3260 8 | 9 | ## Written Tutorials 10 | * [Tutorial: Beyond the Canvas, using p5.dom](https://github.com/processing/p5.js/wiki/Beyond-the-canvas) 11 | * [Tutorial: Intro to HTML/CSS basics](https://github.com/ITPNYU/ICM-2018/wiki/Intro-to-HTML-and-CSS) 12 | * [Mozilla: Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) 13 | * [Mozilla: CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) 14 | * Getting Started with p5.js Chapter 13 (DOM is covered towards the end) 15 | 16 | ## Reference Pages 17 | * [p5 DOM library reference](https://p5js.org/reference/#/libraries/p5.dom) 18 | * [CSS Reference](http://www.blooberry.com/indexdot/css/propindex/all.htm) 19 | 20 | ## Code Examples 21 | * [Code from videos below](https://github.com/CodingTrain/website/tree/master/Tutorials/P5JS/p5.js/08) 22 | * [Getting Started with p5.js Chapters 13_05 + 13_06](https://github.com/lmccart/gswp5.js-code/tree/master/13_Extend) 23 | 24 | 25 | ## Video Tutorials 26 | 27 | ### HTML 28 | * [8.1: What is HTML? - video tutorial](https://youtu.be/URSH0QpxKo8?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 29 | * [8.2: Creating HTML Elements with JavaScript - video tutorial](https://youtu.be/lAtoaRz78I4?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 30 | * [8.3: Manipulating DOM Elements with html() and position() - video tutorial](https://youtu.be/YfaJ20vXcK8?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 31 | 32 | ### Callbacks 33 | * [8.4: Handling DOM Events with Callbacks - video tutorial](https://youtu.be/NcCEzzd9BGE?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 34 | * [8.5: Interacting with the DOM using Sliders, Buttons and Text Inputs - video tutorial](https://youtu.be/587qclhguQg?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 35 | * [8.6: Other Events and Inputs - video tutorial](https://youtu.be/HsDVz2_Qgow?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 36 | 37 | ### CSS 38 | * [8.7: The Basics of CSS - video tutorial](https://youtu.be/zGL8q8iQSQw?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 39 | * [8.8: Events "changed" and "input" - video tutorial](https://youtu.be/ZEy0_NLhdSE?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 40 | * [8.9: CSS Selectors - video tutorial](https://youtu.be/sVo8Dbii8OQ?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 41 | * [8.10: select() and selectAll() with CSS Selectors - video tutorial](https://youtu.be/sSQPLIHIzmg?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 42 | 43 | ### Additional Topics 44 | * [8.11: Callbacks on Multiple DOM Elements - video tutorial](https://youtu.be/KeZBpeH59Q4?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 45 | * [8.12: parent() and child() - video tutorial](https://youtu.be/eoXLD0Aw1YI?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 46 | * [8.13: Assigning a CSS Class Dynamically - video tutorials](https://youtu.be/KMRgLi2TBhQ?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 47 | * [8.14: parent() and child() again with variables - video tutorial](https://youtu.be/4OAG_BkQcPE?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 48 | * [8.15: Drag and Drop a File - video tutorial](https://youtu.be/o4UmGrPst_c?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 49 | * [8.16: Slider Dance - video tutorial](https://youtu.be/CMsD3IigG7g?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 50 | * [p5.js Sketch as Background - video tutorial](https://youtu.be/OIfEHD3KqCg?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX) 51 | -------------------------------------------------------------------------------- /weeks/09_ml.md: -------------------------------------------------------------------------------- 1 | # Machine Learning 2 | 3 | ## ml5.js video tutorials 4 | * [A Beginner's Guide to Machine Learning with ml5.js - video tutorial](https://youtu.be/jmznx0Q1fP0?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y) 5 | * [ml5.js: Image Classification with MobileNet - video tutorial](https://youtu.be/yNkAuWz5lnY?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y) 6 | * [ml5.js: Webcam Image Classification - video tutorial](https://youtu.be/D9BoBSkLvFo?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y) 7 | * [ml5.js: Transfer Learning with Feature Extractor - video tutorial](https://youtu.be/kRpZ5OqUY6Y?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y) 8 | * [ml5.js: Feature Extractor Classification - video tutorial](https://youtu.be/eeO-rWYFuG0?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y) 9 | * [ml5.js: Feature Extractor Regression - video tutorial](https://youtu.be/aKgq0m1YjvQ?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y) 10 | 11 | ## ml5.js resources 12 | * [ml5 website](https://ml5js.org) 13 | * [ml5 examples](https://github.com/ml5js/ml5-examples/) 14 | 15 | ## ml5 code editor examples 16 | * [Drag and Drop Image Classification](https://editor.p5js.org/ml5/sketches/S1PLinE27) 17 | * [Webcam Image Classification](https://editor.p5js.org/ml5/sketches/rJ-C5AQ5X) 18 | * [Custom Image Classification with Feature Extractor](https://editor.p5js.org/ml5/sketches/BkEeFyBhm) 19 | * [Custom Regression with Feature Extractor](https://editor.p5js.org/ml5/sketches/B1Gntkrhm) 20 | 21 | ## Neural Networks 22 | * [But what *is* a Neural Network? | Deep learning, chapter 1](https://youtu.be/aircAruvnKk) - video from 3Blue1Brown 23 | 24 | ## What is a "Machine Learning"? (From [Andrew Ng's Coursera Course](https://www.coursera.org/learn/machine-learning)) 25 | * "Field of study that gives computers the ability to learn without being explicitly programmed." -- Arthur Samuels (1959). [Self-learning and checkers](https://en.wikipedia.org/wiki/Arthur_Samuel#Computer_checkers_.28draughts.29_development). 26 | * "A computer program is said to learn from experience E with respect to some class of tasks T and performance measure P, if its performance at tasks in T, as measured by P, improves with experience E." -- Tom Mitchell (1998): [Maching Learning book](http://amzn.to/2nLdRgQ). 27 | * Example: classifying images of dogs and cats. 28 | * E = Watching you classify images as dogs or cats. 29 | * T = Classifying images as dogs or cats. 30 | * P = The % of images correctly classified. 31 | 32 | ## Supervised Learning 33 | * From Andrew Ng: "In supervised learning, we are given a data set and already know what our correct output should look like, having the idea that there is a relationship between the input and the output." 34 | * Adapted from [Nature of Code Chapter 10](http://natureofcode.com/book/chapter-10-neural-networks/): Supervised Learning is a strategy that involves a "teacher" that trains the learning system. For example, consider facial recognition. The "teacher" shows the network a bunch of faces (the teacher already knows the names associated with each face). The learning system makes its guesses and the teacher provides the answers. The learning system can then compare its answers to the known “correct” ones and make adjustments according to its errors. 35 | 36 | ## Classification and Regression 37 | * Classification and regression both involve making a "prediction" based on input data. 38 | * Classification refers to predicting an output with a discrete set of possibilities like a set of categories or labels. For example: "Given an input image, is it a dog or cat?" 39 | * Regression refers to predicting an "continuous" output (a fancy way of saying number). For example: "Given the number of bedrooms, what is the price of a house?" or "Given an input image of a cat, how much does the cat weigh?" 40 | 41 | ## History of Deep Learning 42 | * Andrey Kurenkov's ['Brief' History of Neural Nets and Deep Learning](http://www.andreykurenkov.com/writing/a-brief-history-of-neural-nets-and-deep-learning/) 43 | 44 | 45 | ## Additional Video Resources 46 | * [Full 3Blue1Brown Neural Network Playlist](https://www.youtube.com/playlist?list=PLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pi) 47 | * [Machine Learning with TensorFlow, ml5.js, and Spell](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Y6kSfxOjq5zk4gkDK8q_n1) 48 | * Gene Kogan's [ml4a](https://ml4a.github.io/) 49 | * [Build a neural network from scratch in JavaScript video series](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Y7MdSCaIfsxc561QI0U0Tb) 50 | * [Doodle classifier series](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zs14zKVuTuit6jApJgoYZQ) 51 | * [What is TensorFlow.js? series](https://youtu.be/Qt3ZABW5lD0?list=PLRqwX-V7Uu6YIeVA3dNxbR9PYj4wV31oQ) 52 | * [TensorFlow.js color classifier series](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bmMRCIoTi72aNWHo7epX4L) 53 | -------------------------------------------------------------------------------- /weeks/08_media.md: -------------------------------------------------------------------------------- 1 | 2 | # Media 3 | 4 | *Some of the videos in this section were created last year and some two years ago. They use different editors for p5.js. All of the concepts should still apply? If you notice something off, please let me know!* 5 | 6 | ## Video 7 | 8 | ### Reference 9 | * [p5 reference: pixels](https://p5js.org/reference/#/p5/pixels) 10 | * [p5 reference: get()](https://p5js.org/reference/#/p5/get) 11 | * [p5 reference: set()](https://p5js.org/reference/#/p5/set) 12 | * [p5 reference: copy()](https://p5js.org/reference/#/p5/copy) 13 | * [p5 reference: filter()](https://p5js.org/reference/#/p5/filter) 14 | * [p5 reference: createVideo()](https://p5js.org/reference/#/p5/createVideo) 15 | * [p5 reference: createCapture()](https://p5js.org/reference/#/p5/createCapture) 16 | * [p5 reference: p5.MediaElement](http://p5js.org/reference/#/p5.MediaElement) 17 | 18 | ### Video Tutorials 19 | * [11.1: Live Video and createCapture() - video tutorial](https://youtu.be/bkGf4fEHKak?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 20 | * [11.2: Video Photobooth / Muybridge Style Animation - video tutorial](https://youtu.be/oLiaUEKsRws?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 21 | * [11.3: The Pixel Array - video tutorial](https://youtu.be/nMUMZ5YRxHI?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 22 | * [11.4: Brightness Mirror - video tutorial](https://youtu.be/rNqaw8LT2ZU?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 23 | * [11.5: Checkbox Mirror - video tutorial](https://youtu.be/rNqaw8LT2ZU?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 24 | * [11.6: Painting with Pixels - video tutorial](https://youtu.be/0V3uYA1hafk?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 25 | * [11.7: Slit-Scan Video - video tutorial](https://youtu.be/YqVbuMPIRwY?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 26 | * [11.8: Video Effects with Seriously.js - video tutorial](https://youtu.be/jdKep6jo7b0?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig) 27 | 28 | ### Code 29 | * [p5.js editor: loading and playing video](https://editor.p5js.org/p5/sketches/S14fEgym_m) 30 | * [p5.js editor: video canvas](https://editor.p5js.org/p5/sketches/r1SMNxJXOm) 31 | * [p5.js editor: video pixels](https://editor.p5js.org/p5/sketches/SkUzVg17uQ) 32 | * [p5.js editor: video capture](https://editor.p5js.org/p5/sketches/BkwMNe1mOm) 33 | * [Code for above video tutorials](https://github.com/CodingTrain/website/tree/master/Tutorials/P5JS/p5.js_video) 34 | * [Chapter 15 (images and pixels) from Learning Processing ported to p5.js](https://github.com/shiffman/LearningProcessing-p5.js/tree/master/chp15_images_pixels) 35 | * [Chapter 16 (video) from Learning Processing ported to p5.js](https://github.com/shiffman/LearningProcessing-p5.js/tree/master/chp16_video) 36 | 37 | ## Sound 38 | 39 | ### Reference 40 | - [p5.sound reference](http://p5js.org/reference/#/libraries/p5.sound) 41 | 42 | ### Video Tutorials 43 | * [17.1: Loading and Playing sound - video tutorial](https://youtu.be/Pn1g1wjxl_0?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 44 | * [17.2: Play and Pause Button - video tutorial](https://youtu.be/YcezEwOXun4?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 45 | * [17.3: Timing, Jumps and Cues - video tutorial](https://youtu.be/SfA5CghXw18?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 46 | * [17.4: Amplitude Analysis - video tutorial](https://youtu.be/NCCHQwNAN6Y?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 47 | * [17.5: Adding Sound Effects - video tutorial](https://youtu.be/40Me1-yAtTc?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 48 | * [17.6: Sound Synthesis - video tutorial](https://youtu.be/Bk8rLzzSink?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 49 | * [17.7: ADSR Envelope - video tutorial](https://youtu.be/wUSva_BnedA?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 50 | * [17.8: Microphone Input - video tutorial](https://youtu.be/wUSva_BnedA?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 51 | * [17.9: Sound Visualization: Graphing Amplitude - video tutorial](https://youtu.be/jEwAMgcCgOA?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 52 | * [17.10: Sound Visualization: Radial Graph - video tutorial](https://youtu.be/h_aTgOl9J5I?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW) 53 | * [17.11: Sound Visualization: Frequency Analysis with FFT - video tutorial](https://www.youtube.com/watch?v=2O3nm0Nvbi4&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW&index=11) 54 | 55 | 56 | ### Code 57 | * [p5.js editor: Load and Play Sound](https://editor.p5js.org/p5/sketches/H1aXNl1X_m) 58 | * [p5.js editor: Manipulate Sound](https://editor.p5js.org/p5/sketches/rJQxX4l1QOX) 59 | * [p5.js editor: Amplitude Analysis](https://editor.p5js.org/p5/sketches/S1EgmNgJXuQ) 60 | * [p5.js editor: Live Input](https://editor.p5js.org/p5/sketches/By-NEeymdm) 61 | * [p5.js editor: Mic Threshold](https://editor.p5js.org/p5/sketches/H17EElkXOX) 62 | * [p5.js editor: Oscillator](https://editor.p5js.org/p5/sketches/S1xN4x1muQ) 63 | * [p5.js editor: Envelope](https://editor.p5js.org/p5/sketches/Hy4NekQ_X) 64 | * [p5.js editor: FFT Spectrum](https://editor.p5js.org/p5/sketches/HJzEEly7dm) 65 | * [Code for above video tutorials](https://github.com/CodingTrain/website/tree/master/Tutorials/P5JS/p5.js_sound) 66 | * [Chapter 20 (sound) from Learning Processing ported to p5.js](https://github.com/shiffman/LearningProcessing-p5.js/tree/master/chp20_sound) 67 | 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ICM-2018 2 | Syllabus for ITP Foundation Course Introduction to Computational Media 3 | 4 | ## Syllabus Overview 5 | * 1 -- [Introduction and Drawing](weeks/01_intro.md) 6 | * 2 -- [Animation: Variables](weeks/02_animation.md) 7 | * 3 -- [Interaction: conditionals and loops](weeks/03_interaction.md) 8 | * 4 -- [Functions and Objects](weeks/04_functions.md) 9 | * 5 -- [Objects and Arrays](weeks/05_objects.md) 10 | * 6 -- [DOM: HTML, CSS](weeks/06_dom.md) and [Serial Communication](weeks/06_serial.md) 11 | * 7 -- [Working with Data](weeks/07_data.md) 12 | * 8 -- [Video and Sound](weeks/08_media.md) 13 | * 9 -- [Machine Learning](weeks/09_ml.md) 14 | * 10 -- [ICM Madness Workshop](https://github.com/ITPNYU/ICMadness-2018) -- All sections meet Friday, Nov 2, 11am-2pm! 15 | * 11 -- Other Topics + Final Project Proposals 16 | * 12 -- Beyond p5.js + Final Project Proposals 17 | * 13 -- One on one speed user testing / feedback 18 | * 14 -- Final Project Presentations 19 | 20 | ## Section Info 21 | * [Allison](sections/03_Allison.md) 22 | * [Cassie](sections/05_Cassie.md) 23 | * [Dano](sections/06_Dano.md), [Homework](https://github.com/shiffman/ICM-2018/wiki/Homework-Dano) 24 | * [Luisa](sections/01_Luisa.md) 25 | * [Mimi](sections/04_Mimi.md) 26 | * [Shawn](sections/02_Shawn.md) 27 | 28 | ## Questions and Discussion 29 | - [Sign up for the ICM google group](https://groups.google.com/a/itp.nyu.edu/group/icm/) 30 | 31 | ## p5.js 32 | - The primary platform for the class is [p5.js](http://www.p5js.org/), a JavaScript library for creative coding. We will start coding with the [web editor for p5.js](https://alpha.editor.p5js.org/). 33 | 34 | ## Section specific info 35 | * [office hours, scheduling, and contact info](https://github.com/ITPNYU/ICM-2018/blob/master/sections.md) 36 | 37 | ## Extra Help 38 | - [Research Resident Office Hours](http://itp.nyu.edu/residents/contact-the-residents/) 39 | - ICM Help Sessions: Fridays 6.30 pm - 7.30 pm & Mondays 1pm-2pm (Rm 50) 40 | - TBA 41 | 42 | ## Inspiration 43 | - [Help contribute to this wiki!](https://github.com/ITPNYU/ICM-2018/wiki/Inspiration) 44 | 45 | # Policies 46 | 47 | ## Evaluation 48 | 49 | Grades will be determined according to the following breakdown: 50 | * Regular Assignments 40% 51 | * Participation and Attendance 40% 52 | * Final Project 20% 53 | 54 | Please see ITP's statement on [Pass/Fail](http://help.itp.nyu.edu/academic-policies/pass-fail) which states that a "Pass" is equivalent to an "A" or a "B" while anything less would be considered a "Fail". 55 | 56 | 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. 57 | 58 | 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.) 59 | 60 | 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. 61 | 62 | 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. 63 | 64 | ## Statement of Academic Integrity 65 | 66 | Plagiarism is presenting someone else’s work as though it were your own. More specifically, plagiarism is to present as your own: A sequence of words quoted without quotation marks from another writer or a paraphrased passage from another writer’s work or facts, ideas or images composed by someone else. 67 | 68 | ## Statement of Principle 69 | 70 | The core of the educational experience at the Tisch School of the Arts is the creation of original academic and artistic work by students for the critical review of faculty members. It is therefore of the utmost importance that students at all times provide their instructors with an accurate sense of their current abilities and knowledge in order to receive appropriate constructive criticism and advice. Any attempt to evade that essential, transparent transaction between instructor and student through plagiarism or cheating is educationally self-defeating and a grave violation of Tisch School of the Arts community standards. For all the details on plagiarism, please refer to page 10 of the Tisch School of the Arts, Policies and Procedures Handbook, which can be found online at: http://students.tisch.nyu.edu/page/home.html 71 | 72 | ## Statement on Accessibility 73 | 74 | Please feel free to make suggestions to your instructor about ways in which this class could become more accessible to you. Academic accommodations are available for students with documented disabilities. Please contact the Moses Center for Students with Disabilities at 212 998-4980 for further information. 75 | 76 | ## Statement on Counseling and Wellness 77 | 78 | Your health and safety are a priority at NYU. If you experience any health or mental health issues during this course, we encourage you to utilize the support services of the 24/7 NYU Wellness Exchange 212-443-9999. Also, all students who may require an academic accommodation due to a qualified disability, physical or mental, please register with the Moses Center 212-998-4980. Please let your instructor know if you need help connecting to these resources. 79 | 80 | ## Statement on use of Electronic Devices 81 | 82 | Laptops will be an essential part of the course and may be used in class during workshops and for taking notes in lecture. Laptops must be closed during class discussions and student presentations. Phone use in class is strictly prohibited unless directly related to a presentation of your own work or if you are asked to do so as part of the curriculum. 83 | 84 | Mantras By James 85 | ---------------- 86 | - "Practice is the best of all instructors." - computation requires practice 87 | - "An agreeable companion on a journey is as good as a carriage." - look to your classmates for help too 88 | - "While we stop to think, we often miss our opportunity." - sometimes you need to take a leap of faith 89 | - "When two do the same thing, it is not the same thing after all." - encourage students with similar ideas 90 | - "The bow too tensely strung is easily broken." - don't get too stressed out 91 | - All of these are from Plubius Syrus. (42 B.C.) 92 | 93 | Previous Years 94 | -------------- 95 | - [2017](https://github.com/ITPNYU/ICM-2017/) 96 | - [2016](https://github.com/ITPNYU/ICM-2016/) 97 | - [2015](https://github.com/ITPNYU/ICM-2015/) 98 | - [2014](https://github.com/ITPNYU/ICM-2014/) 99 | - [2013](https://github.com/ITPNYU/ICM-2013/) 100 | - [2012](http://itp.nyu.edu/varwiki/Syllabus/ICM-All-F12) 101 | - [2011](http://itp.nyu.edu/varwiki/Syllabus/ICM-All-F11) 102 | - [2010](http://itp.nyu.edu/varwiki/Syllabus/ICM-All-F10) 103 | - [2009](http://itp.nyu.edu/varwiki/Syllabus/ICM-All-F09) 104 | - [2008](http://itp.nyu.edu/varwiki/Syllabus/ICM-All-F08) 105 | - [2007](http://itp.nyu.edu/varwiki/Syllabus/ICM-All-F07) 106 | --------------------------------------------------------------------------------