-
Notifications
You must be signed in to change notification settings - Fork 4
Homework Lisa
Lisa Jamhoury edited this page Dec 10, 2019
·
68 revisions
This is Lisa Jamhoury's section of ICM—Media. Here is the Syllabus Overview for the course.
A big part of learning at ITP is learning from each other. So share your work and in exchange you'll get to see everyone else's!
- Do the assignment.
- Contribute a question.
- Post blog documentation: Ideally something visual, some written thoughts, and code. If you are struggling with your sketch and can't get things to work, put your energy into writing about what didn't work and what you did to try to solve it.
Please be on time! I fear 9am like the rest of you, but I commit to ending class on time, which means I will start class at 9am on the dot so we have enough time to get through all class material. Please review the attendance and participation requirements under Class Policies.
office hours link Wed 1—3pm
I save all of my in-class p5js examples in the web editor. You can see a full list here.
Assignments are due the night before class each week. I will not give credit for assignments that are turned in late. Keeping in mind that I want you to succeed, and that the material can sometimes be challenging, I absolutely prefer tentative work with good documentation to work that is turned in late.
Use this form to turn in your homework assignments.
Here's the spreadsheet with everyone's responses.
Each week an unbiased algorithm will choose 3-4 students to present their homework to class. The students presenting will be listed on the board at the start of class so they can take a few minutes to prepare before class starts. This is an informal five-minute presentation of documentation, code, questions and class feedback. There are 18 students in class, so we'll have 4 present in classes 2-4, and 3 present in classes 5-6.
If you know you will be traveling late in the semester, please let me know as soon as you can so you can present in an earlier class.
If you find yourself struggling, remember that you have many forms of support that you can take advantage of at ITP. Sign up for the ITP ICM Google Group, look out for the office hours and help sessions that the residents offer. You can find my office hours here and my email is lisa.jamhoury@nyu.edu.
- Google Slides
- Class Example 1 — Color Picker with Cat Image, get() and set()
- Class Example 2 — A More Purple Cat
- Class Example 3 — Webcam — Pixels Captured and Reversed
- Class Example 4 — Webcam — Red Dots We didn't get to this example in class, but please take a quick look at it for another idea of how to use the webcam pixel array.
- If you didn't watch it in prep for class, I'd recommend the Shiffman Videos here for some more ideas for homework. 11.4 Brightness Mirror is particularly great and will explain Example 4 above.
- Complete this worksheet
- Make a sketch using an image, video or live video (webcam) at the pixel level. Consider making an interactive "mirror" using the webcam. How can you manipulate the pixels to surprise, delight, upset or confuse the user?
- Create a blog post documenting your work. Include links to other projects that serve as references, inspiration, or deal with similar ideas as your sketch.
- Add sketch, documentation and a question to the homework form the evening before class.
- Computational Color (Don't worry about Rune.js example code.)
- Hue, value, saturation
- Examples for Computational Color
- Optional — More Tutorials and Examples
- GAN 2.0: NVIDIA’s Hyperrealistic Face Generator v. How Da Vinci 'Augmented Reality'—More Than 500 Years Ago
- What is Machine Learning?
- Optional — If you want to go deeper Introduction to Neural Networks and Pixel Analysis (20 minutes, but be prepared to spend an hour. Don't try to watch on 2x speed.)
- Optional — If you want to go deeper A Beginner's Guide to Machine Learning with ml5.js
- Google Slides
- Class Example 1 — HSB Background Hue
- Class Example 2 — Rainbow Clover — HSB/translate/rotate
- Class Example 3 — Gradient — lerpColor
- Class Example 4 — Water Ripple in p5 | 2D Arrays — Explanation | p5.js Explanation
- Running p5 locally with SimpleHTTPServer
- Terminal Navigation Basics
- The Modulo Operator with Golan Levin
- 16.1: let vs var - Topics of JavaScript/ES6
- Difference between HSB/HSV and HSL
- More Convolution Examples—to go with 10.6: Pixel Neighbors Tutorial
- ml5.js website | Style Transfer p5 Example
- Complete this worksheet
- Choose between Option 1 and 2 below. You only need to do one!
- OPTION 1: Continue working on your sketch from last week. Integrate something you learned in class this week. For example, how can you use color to change the mood or meaning of your sketch?
- OPTION 2: Create a sketch that uses color. The sketch must be interactive or develop over time. Can you use color to evoke a specific feeling? Or a series of changing emotions as the sketch progresses?
- Create a blog post documenting your work. Include links to other projects that serve as references, inspiration, or deal with similar ideas as your sketch.
- Add sketch, documentation and a question to the homework form the evening before class.
- The Science of Pop Music | Transcript | LA Times Article
- Optional — What is consciousness?
- Optional — Problems with FFT
- Optional — Measuring the Evolution of Contemporary Western Popular Music: Abstract and Introduction
- Sound Video Tutorials, Basics and Visualizations OR Equivalent in p5.js book
- Google Slides | Bell | Thunder
- Class Example 1 — Sound File Basics
- Class Example 2 — Amplitude — Sound and Mic
- Class Example 3 — FFT Waveform
- Class Example 4 — FFT Analyze | Also see Shiffman's video on this.
- We ran out of time to review in class, but if you're interested, check out ml5 Sound Classification and ml5 Pitch Detection
- Music and Computers: What is Sound?
- Smarter Everyday: What is the fourier series — The concept explained in this video is the same concept that is used to create sound waves in FFT.
- Chrome Music Labs — Some inspiration
- freesound.org | soundofpicture.com — Places to get free/cheap sound
- Using Soundflower to record your internal computer audio
- Complete this worksheet
- Create a sketch that analyzes sound and translates it into something visual. Use live or recorded audio. Use color, video, images, pixels or whatever you fancy to represent the sound. Some ideas: imagine you are visualizing music for people who cannot hear. Can your visualization be as expressive as the music itself? Or maybe you are visualizing the differences in noise pollution in different cities? What does the sound of different cities look like?
- Create a blog post documenting your work. Include links to other projects that serve as references, inspiration, or deal with similar ideas as your sketch.
- Add sketch, documentation and a question to the homework form the evening before class.
- We will discuss the Yotam Mann readings in class this week. Please make sure you've read and processed them. They are short :)
- What is Music by Yotam Mann
- Listening and Interaction by Yotam Mann
- Signing, Singing, Speaking: How Language Evolved
- Why repeating words sound like music to your brain — Focus on the last example: "But they sometimes behave so strangely."
- 17.5: Adding Sound Effects - video tutorial
- 17.6: Sound Synthesis - video tutorial | Code
- 17.7: ADSR Envelope - video tutorial
- SoundRecorder() | Record and Loop | More resources
- Zimoun : Compilation Video 3.8 (2019)
- MAAT Museum - João Onofre Project password: maat
- Oscilloscope Music - (Drawing with Sound) - Smarter Every Day 224
- Patatap
- Plink Set a timer! Or you could play all night...
- Optional — Solfege Tutorial | Video
- Optional — Generating Pitch — Ear training interface | Random Melody | Diatonic Melody | noise() | tutorial
- Optional — Building Rhythms — Framecount Drum | Framecount Drum with Shifting Syncopation | Building a Polyrhythm | Geometry as Rhythm | Geometry as Rhythm
- Google Slides
- Class Example 1 — Oscillators with Posenet
- Controlling Frequency and Pitch
- Other references from class are in Google Slides
- No worksheet this week!
- Work in pairs. Create a new musical composition. Make it interactive! (Or Don't...) You can use oscillators, audio samples, the microphone, silence, videos, pictures, pixels!, colors, the mouse, your body, anything else that inspires you. The possibilities are endless!
- Create a blog post documenting your work. Include links to other projects that serve as references, inspiration, or deal with similar ideas as your sketch.
- Even though you're working in pairs, everyone must turn in a blog post. Copy and paste from your partner's blog is fine.
- Add sketch, documentation and a question to the homework form the evening before class.
- Machines Beat Humans on a Reading Test. But Do They Understand?
- Text and Type by Allison Parrish
- Introduction to RiTaJS by Allison Parrish
- Tutorials, Code and Going Further from Week 5 Text Syllabus
- Google Slides | Obama State of the Union Addresses | RiTa Library
- Class Example 1 — String Basics
- Class Example 2 — RiTa Sentence and Word Visual — OG | This version draws all the words only once, then shows the word on rollover to the side in a box
- Class Example 3 — RiTa Sentence and Word Visual — Elizabeth version | This version draws all the words on each draw loop and draws the word over top of the words at the mouse position. It's definitely a nicer way to do things, but it runs a bit slow.
- RiTa Reference | Coding Train RiTa tutorial | Introduction to RiTaJS by Allison Parrish
- Darius Kazemi Sorting Bot
- ml5 Word2Vec | ml5 CharRNN
- Gutenberg.org | Free to use texts here
- League of Moveable Type | Open source fonts
- Google Fonts | Free to use fonts here
- Other references from class are in the Google Slides
- Final projects are due in three weeks, on December 11.
- You can choose to EITHER continue working on smaller one-off topical assignments for the next two weeks OR do one larger final project over the next two weeks.
- For the final presentation you will EITHER present your one-week data assignment OR a project of your choosing that you have worked on for the upcoming two class assignments.
- If you choose to work on a final project of your choosing, you still must submit documentation of your progress for our next class on Dec 4. Show me you wrote some code or did some other significant project development please :)
- If you'd like to work with a partner on your final project, please email me (lisa.jamhoury@nyu.edu) to let me know before our next class on Dec 4. Partner work is great, but you both still need to submit documentation of your work.
Assignments — Due in Two Weeks! No class next week.
- Complete this worksheet
- Everyone must do the worksheet, then you can choose between two options:
- Option 1: Create a sketch that manipulates text in some way. Visualize it. Generate it. Reorder it. The options are boundless! No matter what you do, be intentional about your text source and explain your rationale in your blog documentation.
- Option 2: Begin work on your final project. You can continue work on a previous project, or start something new. It does not need to involve text. You DO need to show significant project/code development in your documentation for week 6.
- Create a blog post documenting your work. Include links to other projects that serve as references, inspiration, or deal with similar ideas as your sketch.
- Add sketch, documentation and a question to the homework form the evening before class.
- Eyeo 2013 Stefanie Posavec
- Art and the API, Jer Thorp
- Machine Bias, ProPublica
- The End of Theory
- What Information is "Personally Identifiable"?
- Watch Week 6 videos under "Data, APIs, and JSON" and "Loading Data and Callbacks"
- Optional: "Specific API Examples"
- Google Slides
- Class Example 1 — Obama State of Union with Giphy API
- Coding Train Async/Await Part 1 | Async/Await Part 2
- Javascript template literals
- Chrome JSON Formatter
- Sidewalk Toronto and Why Smarter is Not Better, Jutta Treviranus | See "Instructive failure" section for wheelchair story we discussed in class.
- Complete this worksheet
- Everyone must do the worksheet, then you can choose between two options:
- Option 1: Create a sketch that manipulates data in some way. Visualize it. Generate it. Reorder it. The options are boundless! No matter what you do, be intentional about your data source and explain your rationale in your documentation.
- Option 2: Complete work on your final project.
- Prepare a 5-minute presentation about your final project (option 1 or 2 above). Explain the project, show documentation, show code, explain "successes" and "challenges." Have either working code or a video to show. Explain how you might take this project further. How is this project useful or relevant to you or others? How do you feel about WHY you want to use code in your work now compared with the beginning of the semester?
- Create a blog post documenting your work. Include topics covered in your final presentation in your blog post.
- Add sketch, documentation and a question to the homework form the evening before class.
- Jason
- Abby
- Rae
- Julie
- Dan Qi
- Tianxu
- Simone
- Yiting
- Tirta
Course evaluations and Break
- KJ
- Elizabeth
- Julian
- Youngmin
- Mel
- Nailah
- Elena
- Themis
- Schuyler
- 9:00am — First 9 presentations
- 10:00am — 10 minutes course evaluation // 15 minute break
- 10:30am — Second 9 presentations