-
Notifications
You must be signed in to change notification settings - Fork 1
Homework Lisa
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 commit to ending class on time, which means I will start class on time so we can get through all class material.
According to the ITP/IMA Class Attendance policy, for 7-week, and 6-week, half-term courses, up to one unexcused absence is permitted. Exceeding these unexcused absence guidelines is grounds for automatic failure. I really want you to succeed, so please please please communicate with me about your schedule and needs.
Please review the attendance and participation requirements under Policies on the main syllabus
This course will be offered entirely online. We will meet on Zoom at our regularly scheduled time to share homework and to discuss the week's topics. About an hour of course time will be devoted to technical topics. For now I'll be presenting the technical lecture live and making a recording of it available asynchronously. This may change throughout the course of the semester depending on your feedback!
Please feel free to reach out if you have any questions. These are unprecedented times, and I'm happy to discuss how I can make the class work for each of you.
All class lectures will be recorded to accommodate students who miss class. Recordings will not be shared publicly and will not be available after the semester ends. Please reach out to me if you do not feel comfortable being recorded.
office hours link Wed 10am—12:30pm ET
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 we will start class with breakout groups to discuss the homework from the previous week. This is an informal presentation of documentation, code, process, challenges, successes, questions. Please do the assignment and documentation so you are able to contribute to the conversation.
If you find yourself struggling, remember that you have many forms of support that you can take advantage of at ITP. Post a question on the ITP ICM Discourse, look out for the office hours and help sessions that the residents offer. You can find my office hours here and my email is [email protected].
- Google slides
- Class Example 1 — get and set
- Class Example 2 — Cat color picker with get and set
- Class Example 3 — Pixel array basics | See async video for explanation
- Class Example 4 — Webcam background removal | See async video for explanation
- Class Example 5 — Webcam pixel array graphics| See async video for explanation
- 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.
- Watch before doing homework: Async content and Coding Train Videos 11.1-11.8
- 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 Demo
- Class Example 2 — Gradient clover
- Class Example 3 — Lerp ball
- Class Example 4 — Lerp color gradient
- Class Example 5 — ml5 Style Transfer | Reference | Code
- Do the worksheet
- Choose between Option 1 and 2 below. You only need to do one!
- OPTION 1: 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?
- OPTION 2: Create a sketch using ml5. How can you use this technology in an expressive manner?
- 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.
- Sound Video Tutorials, Basics and Visualizations OR Equivalent in p5.js book
- 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
- Google Slides | Bell | Thunder
- Class Example 1 — Loading and playing sounds
- Class Example 2 — Visualizing amplitude
- Class Example 3 — FFT Waveform with Mic
- Class Example 4 — FFT Waveform with Silent Thunder — Dhem version
- Class Example 5 — FFT Analyze
- 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
- ML5 Sound Classification | Pitch Detection
- 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 next 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 — Single oscillator with mouse
- Class Example 2 — Three oscillators with posenet
- Record and Loop Sketch
- Teachable Machine Sound Ex
- Magenta
- ml5 sound classifier
- Tone.js in p5.js
- Music Examples from Yotam Mann
- Controlling Frequency and Pitch
- ml5 models: Posenet | Handpose | Facemesh
- Kinectron
- 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 Obama Speech Concordances
- Class Example 3 — RiTa Obama Visualized
- 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
- Sorting concordance object: Object.entries() | Array.sort() | Stack overflow
- Markov Chains : Coding Train | Code example
- Searching text: match() | matchAll() | RegExr
- 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 classes OR do one larger final project over the next two classes.
- 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 ([email protected]) 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 that is due on 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 — Letters with randomSeed from Gracia's code
- Class Example 2 — JS Objects Review
- Class Example 3 — Sandwich Guessing Game
- Class Example 4 — Relaxing Giphy API Sketch
- Data Sources
- Corpora
- Javascript template literals
- Chrome JSON Formatter
- setInterval
- Loops and intervals
- 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.