-
Notifications
You must be signed in to change notification settings - Fork 6
Homework Dano
- Monni Qian -- Final - Shadow PlayTech
- Leo Ouyang -- Rock Paper Scissors!
- Yongkun Li -- Final
- Kevin Lee -- Final
- Sohaila Mosbeh -- Finally Final to finalize w/ Nicole Ginelli
- Caren Ye -- Sound visualization
- Hanyi Zhang -- week13
- Fanyi Pan -- Future Memory
- Sherry Liu -- Final
- Boo Song -- clock
- Ruiqi Wang -- Final
- Nicole Ginelli -- Final Thoughts
- Hyunseo Lee --Final
-
RESOURCES FROM CLASS:
- Fill Out Course Eval must be signed into Albert for that link to work
- VS Code
-
DO:
- Your final project! You can take something you did earlier this semester and expand it. You can combine it with your pcomp final. You can scratch a new itch. Remember it is essentially a 2 week assignment.
- Prepare a 5 minute presentation to demonstrate what your project does that emphasizes its computational aspects.
- If your project is interactive, please be prepared to have someone else in the class interact with it to demo.
- If your project can only be demo'd outside of class, please show a short video (~2 minutes) of the experience.
- Post documentation in the form of a blog post. Ideally something visual, some written thoughts, and code. How do you feel about WHY you want to use code in your work now compared with the beginning of the semester? If you are struggling with your sketch and can't get things to work, you should feel free to put your energy into writing about what didn't work (and vent any frustrations!). If it is a collaboration, please describe your contribution to the project.
-
RESOURCES FROM CLASS:
- But what is a Neural Network? Deep learning, chapter 1 – video from 3Blue1Brown
- A Beginner’s Guide to Machine Learning with ml5.js – video tutorial
-
Teachable Machines
- Overview Video
- Teachable Machines Getting Started Web Page
- Teachable Machines Shiffman Videos
- Example of Dano Covering Face and Reading From Class this won't work for you unless you look a lot like me but you can copy in your url from teachable machines and it should work.
-
ml5.js resources
-
READ AND WATCH:
-
DO:
- Try training a model or using a machine learning library.
- Start gathering questions, code samples and source material (images, sounds, colors, text) for your final project. Fill Out Form and See Others
- Be prepared to show your final idea, preferably with some proof of concept in the next class.
- Monni Qian -- Final Concept
- Leo Ouyang -- Final Project Planning
- Fanyi Pan -- Final
- Yongkun Li -- Final Idea
- Kevin Lee -- Final Project Planning
- Sohaila Mosbeh -- Let's try a bunch of stuff.
- Hanyi Zhang -- Final Week Idea
- Ruiqi Wang -- Final WIP
- Sherry Liu -- Final Idea
- Boo Song --
- Nicole Ginelli -- 3D Fun/ Final Beginnings
- Hyunseo Lee --Final Idea
- Caren Ye -- Final assignment idea
- RESOURCES FROM CLASS:
- 3 Tutorial Videos for Text Manipulation
- Project Guttenberg — Moby Dick From Class
- Allison's Text and type
- Allison's Intro to RiTa.js
- JSON Datasets — Hamilton Example from Class
- Data Curriculum
- NYT API Reference Page and NY Times from Class
- JSON Paste in Formatter or JSON Formatter Browser Extension
- Regular Expressions
- Examples From Further with Sound from Mimi
-
Ruiqi Wang -- Week11
-
Boo Song -- week11
-
Monni Qian -- Heartbeat
-
Leo Ouyang -- What I Hear When I Am Wearing Headphones
-
Caren Ye -- Coding for sound performance
-
Sherry Liu -- Week11
-
Fanyi Pan -- Week 11
-
Yongkun Li -- Music Visualization finished
-
Kevin Lee -- Launchpad
-
Sohaila Mosbeh -- What do you mean exactly?
-
Nicole Ginelli -- Movement is Visual, Simple Version
-
Hanyi Zhang -- Week 11
-
Hyunseo Lee -- week 11
-
DO:
- Consider working in pairs.
- Start Playing with Text and Data
- OR
- Continue with Sound
- Random Ideas
- Record bits of spoken word and loop them to create music.
- Use sound samples and manipulate their playback rate() to control pitch instead of the oscillator.
- Try implementing a different scale with different pitch ratios: More about scales.
- Play with Timbre and make use of p5 Sound's post-processing features: Delay, Filter, Reverb, Convolver etc.
- Random Ideas
-
READ AND WATCH:
-
FROM CLASS
- Sound Part 1 and Sound Part 2
- p5.SoundFile
- Mic Level
- Random Sine
- p5.FFT()
- Drum Machine control click to download:Kick, snare, hihat
-
DO:
- Complete this worksheet.
- Train your ears - Follow the directions at the top of the sketch. Save an image of your best attempt and post it to the worksheet.
- Consider working in pairs. Due in 2 weeks. Create a 30-60 second sound composition. No visuals. Just sound. OR use sound for a week combined with some visuals.
- Prepare 5-10 words to describe the piece
- Create a blog post documenting your work. Also include links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.
-
READ AND WATCH:
- Inspiration and Reference from Cassie:
* jazz.computer
* Chrome Music Experiments
* Scribble Audio
* Learning Music
* How Generative Music Works
* Free Sound
-
The Science of Pop Music | Transcript
- Is the project successful?
- Did you learn anything surprising about music through the data analysis?
- Solfege Tutorial | Video
- 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."
- Introduction to the noise() function: Tutorial | Reference
-
The Science of Pop Music | Transcript
Questions | Examples
- Your question here
- Ruiqi Wang -- Week10
- Boo Song -- week10
- Monni Qian -- Week 10: Sound Test
- Leo Ouyang -- Remix Taylor Swift
- Caren Ye -- Week10-Coding for electronic music performance
- Sherry Liu -- Week10
- Fanyi Pan -- Week 10: Imagine Sound
- Yongkun Li -- Exploring FTT
- Hanyi Zhang -- Week 10
-
RESOURCES FROM CLASS:
-
DO:
- Consider working in pairs. Due next week. Create a storytelling mirror.
- Links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.
- Consult resources from syllabus for inspiration. Pixels Week 1 and Pixels Week 2
-
READ AND WATCH:
- The Science of Pop Music | Transcript
- Videos 17.1, 17.3, 17.4, 17.8, 17.11 | Code
- Chapter 13 through Ex. 13.3 of Getting Started with p5.js book - Ebook (free with NYU Library login)
- More sound stuff
-
ASK QUESTIONS: Contribute at least 1 question below.
Questions | Examples
-
Your question here
- Ruiqi Wang --week9
- Boo Song --Week9: Release your expressions
- Monni Qian -- Week 9: Shake your head
- Leo Ouyang -- A Million Little Cubes with PoseNet
- Caren Ye -- Week9: Release your expressions
- Kevin Lee -- Visualizer
- Sohaila Mosbeh -- Week09_What's going on?
- Nicole Ginelli -- Nose Painter
- Hanyi Zhang -- Week 09, earthquake
- Fanyi Pan -- Week 9
- Hyunseo Lee -- week9
- Sherry Liu -- Week9
- Yongkun Li -- Shadow Figure
-
RESOURCES FROM CLASS:
-
DO:
- Complete this worksheet.
- Think about working in pairs. You can look at this as a two week assignment to explore the creation and anaysis of visual/spatial media (but you have to post progress after this first week).
- Create a blog post documenting your work. Also include links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.
- Consult resources from syllabus for inspiration. Pixels Week 1 and ( Pixels Week 2 or Posenet and BodyPix);
-
READ AND WATCH:
- Computational Color (Don't worry about Rune.js example code.) | Accompanying code examples written in p5.js or Dano Pixel Notes
- Make your pictures beautiful with a touch of deep learning magic v. The Mona Lisa
- Introduction to Neural Networks and Pixel Analysis (20 minutes, but be prepared to spend an hour. Don't try to watch on 2x speed.)
-
ASK QUESTIONS: Contribute at least 1 question below.
Questions | Examples
-
Your question here
- Ruiqi Wang --[Blog Post](your address)
- Boo Song --week08
- Monni Qian -- Week 8
- Leo Ouyang -- A Million Little Cubes
- Caren Ye -- Pixels and Dissimilation
- Kevin Lee -- In process
- Sohaila Mosbeh -- Week_08_What's going on?
- Nicole Ginelli -- Week8
- Hanyi Zhang -- Week 08
- Fanyi Pan -- Week 8: Another Mirror
- Hyunseo Lee -- week8
- Sherry Liu -- week8
- Yongkun Li -- Data Figure
- Go see a performance, some art or go out into nature or just stop at odd moments and ask how computation could attach to those experiences.
- Write a blog post about anything.
- Possible Topics
- Generic Benefits/Perils of Computation for Society
- Personal Benefits/Perils of Computation for Your Creativity
Questions (example questions)
- Your questions here
- Videos: Images/Video 11.1-11.8 - Focus on videos 11.1 and 11.3
- Chapter 7 in Getting Started with P5.js through Ex 7-9 | Code
- Full Resources
- Dano's Explanation of Pixels etc...
- Ruiqi Wang --WEEK 07
- Boo Song --week07
- Monni Qian -- Week 7
- Leo Ouyang -- Week 7
- Caren Ye -- week7
- Kevin Lee -- week7 - computational media as an artist perspective
- Sohaila Mosbeh -- Week_07 Whats the big picture?
- Nicole Ginelli -- [Blog Post](your address)
- Hanyi Zhang -- Week 7
- Fanyi Pan -- Spatial and Digital
- Hyunseo Lee -- week7
- Sherry Liu -- week7
- Complete the Worksheet
- Next week you will be presenting your own assignments. Time limit is 5 minutes. Please have a sentence or two at the beginning talking about your process of why you ended up doing what you did. Then what you did, and finally how you did it. Be prepared to point out 3 things in your sketch and how they're working. (e.g. Here's a loop, it's limit is being set by the mouse. This doohicky is an object and I have an array of 100 of them. They flicker and change color and when I click, I flip a boolean to make them start and stop flickering.)
- Go further with a current project or pick up on something that you thought of before but were unable to do yet. Try to have some fun.
Questions (example questions)
- Your question here.
- Kevin Lee -- week 6, 3D Pipe
- Leo Ouyang -- Week 6, Profile Picture Maker
- Sohaila Mosbeh -- Week06_Pull Yourself Together, Pull Yourself Together
- Monni Qian -- Week 6, Let's make some noise
- Nicole Ginelli -- Week 6, Cloud Talk
- Caren Ye -- Week6, Ghosty Audiovisual
- Boo Song --week06, TV
- Hanyi Zhang -- Week 6, Spanning Dots
- Fanyi Pan -- week6, Draw some shapes
- Hyunseo Lee -- week06, Moon of the city
- Sherry Liu -- Week6, :)
- Ruiqi Wang --Week06, Sound Generator
-
RESOURCES FROM CLASS:
-
TEST YOURSELF
- Complete the Worksheet
-
DO: The idea this week is to explore re-organizing your code. It is 100% legitimate to turn in a version of a previous assignment where nothing changes for the end user, but the code has been restructured. You may, however, choose to try a new experiment from scratch. Aim to keep
setup()
anddraw()
as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):- Reorganize "groups of variables" into objects.
- Break code out of
setup()
anddraw()
into functions. - Use a function to draw a complex design multiple times with different arguments.
- If you are feeling ambitious, try embedding a function into an object.
-
READ / WATCH
- Videos 6.1-6.3, 7.1-7.7
- More resources and code examples
- Getting Started with p5.js chapters 10-11
-
Examples
Questions (example questions)
- Can we go over how to repeat/ draw multiples of a function without repeating the function (ex. naming it function2 and calling it in draw again?) - Nicole
- How can I use complex shapes as masks/ clipping masks? - Nicole
- Kevin Lee -- 2nd part failed...., fidget spinner -- any other comments
- Leo Ouyang -- Week 5, Misty Glass Window
- Sohaila Mosbeh -- Week05_Screaming Females, Screaming Females -- any other comments
- Nicole Ginelli -- Week 5 Masks/Gradients, Orbs, Gradient -- I don't fully understand how the gradient's color is working
- Monni Qian -- Week 5: Class, Clap & Save
- Caren Ye -- week5, clicking face
- Boo Song -- week05, balloon#03
- Hanyi Zhang -- week 5 blog,flies all over the place
- Fanyi Pan -- Week 5, Draw Something
- Hyunseo Lee -- week5, Doors
- Sherry Liu -- Week5, SSG2
- Ruiqi Wang --Title of Blog Post](Link to Blog Post), So Many Balls
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 4
-
DO:
- Think about scaling up your project and scaling down the code. Can you use repeat loops to turn many lines of code into a few lines. Can you use function to hide a lot of lines of code into a single function call.
- Try creating some HTML elements.
-
READ / WATCH FOR FUNCTIONS
- Videos 5.1-5.3 in the learning p5.js series.
- Getting Started with p5.js chapters 9-10
- Examples for Videos 5.1-5.3
- Getting Started with p5 Examples Chapters 9-10
- Learning Processing examples ported to p5.js Chapters 7-8
-
AND MAYBE READ / WATCH FOR ARRAYS
-
AND MAYBE READ / WATCH FOR WEB PAGE (DOM) Elements
- 8.1: What is HTML? - video tutorial
- 8.2: Creating HTML Elements with JavaScript - video tutorial
- 8.4: Handling DOM Events with Callbacks - video tutorial
- 8.5: Interacting with the DOM using Sliders, Buttons and Text Inputs - video tutorial
- Code for videos
- Reference Pages p5 DOM library reference
- Book Chapters 13.4 - 13.6 of Getting Started with p5.js book - Ebook (free with NYU Library login) | Code
- Lot's more about DOM
Look at the p5 DOM Reference (used to be external library now in core):
Questions (example questions)
- Your questions here.
- Monni Qian -- Week 4: Function and Arrays, Draw Trees
- Sohaila Mosbeh -- Week04_JJ, You're more,,,
- Caren Ye -- week4, flashing patterns
- Boo Song --week04, balloons
- Kevin Lee -- week4, Modularity & Reusability
- Leo Ouyang -- Week 4, No More Gumball
- Hanyi Zhang -- [Blog Week 4], [Soccer Game]
- Fanyi Pan -- Week 4, Drag Russian Dance
- Hyunseo Lee -- Week4, update_bamboo
- Sherry Liu -- Week4, SSG
- Ruiqi Wang -- Week 04, shitty ms paint
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 3
-
DO: In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Try to arrange to work for one-half hour, shoulder to shoulder with the partner listed below. You can continue to work together and post together or break off and complete the assignment individually.
- Make a Game
- OR Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we'll look at how this compare to interface elements we'll get for free from the browser. Have an interface element control the visual design or behavior of other elements in your sketch.
- OR Make an algorithmic drawing. (One example is 10 PRINT, see also: my version of 10PRINT example). Make your interface element control the appearance or behavior of the algorithmic design. OR Do anything that pleases you that has both variables and if statements (and maybe a for loop?).
- OR do anything that pops into your head that uses an if statement.
-
READ / WATCH
- Videos 4.1-4.2 in the learning p5.js series. | Code
- Chapter 4.5-4.13 of Getting Started with p5.js book | Ebook (free with NYU Library login) | Code
* Boo Song -- Kevin Lee
* Sohaila Mosbeh -- Monni Qian
* Leo Ouyang -- Hanyi Zhang
* Nicole Ginelli -- Caren Ye
* Sherry Liu -- Fanyi Pan
* Hyunseo Lee ---Ruiqi Wang
Questions (example questions)
- How to start a new page with clicking a button? Monni. ** Maybe have modes in your draw loop by inventing a mode variable.
let mode = "page1";
function draw(){
if (mode == "page1"){
//draw some stuff
}else if (mode == "page2"){
//draw other page
}
}
function mousePressed(){
mode = "page2";
}
- How to start a new page when a ball falls off the screen (game over)? Caren
- Nicole Ginelli -- Week 3, Maze Fail
- Monni Qian -- Week 3: Pair Programming, Trees with Sohaila
- Sohaila Mosbeh -- Tree_W/Monni, Tree_W/Monni_Group Project
- Caren Ye -- Week3-bouncing-ball-game, Catch that egg
- Boo Song --week3, charging spider
- Kevin Lee -- Week3, WALL-E
- Leo Ouyang -- Week 3, Feed Gumball!
- Hyunseo Lee -- Week03, Bamboo Makes Panda Happy!
- Hanyi Zhang -- Week 03 blog,Feed Gumball!
- Fanyi Pan -- Week 3, Color Bounce
- Sherry Liu -- Week3, Bounce Game collabrate with Fanyi
- Ruiqi Wang -- week 03, Bamboo Makes Panda Happy!
-
LINKS FROM CLASS:
-
TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.
-
DO: Create a sketch that includes (all of these):
-
One element controlled by the mouse.
-
One element that changes over time, independently of the mouse.
-
One element that is different every time you run the sketch.
-
e.g. Maybe change color, alpha, and/or strokeWeight instead of position.
-
Or do something completely different!
-
-
WATCH, READ, RUN CODE:
Questions (example questions)
- Is there a way to use the mousePressed function as a play button? Restarting the animation very time I click on it- Sohaila
- Maybe you could call the setup function again?
function mousePressed(){
setup();
}
- I noticed that writing "print()" in the code could make the print window of the browser pop up. What's the magic behind this? -- Leo
- yes print() without something in it like print("Hey") will bring up print options to print the screen. Some people prefer the native javascript console.log("hey") to the simplified p5 print().
- Nicole Ginelli -- Week 2, color painter
- Monni Qian -- Week 2, Kent's Live Show
- Sherry Liu -- Week22, Flying in the sky -- any other comments
- Sohaila Mosbeh -- Try,trip and try again, Trip
- Caren Ye -- Week2-animation, color dynamics -- any other comments
- Hanyi Zhang -- Blog Week2, Smile Week 2
- Boo Song --accidental, play with random mess
- Kevin Lee -- LOGOmation, LOGO_2
- Leo Ouyang -- Week 2, Gumball's Happiness Score
- Fanyi Pan -- Week2:In and out of control, In and out of control -- any other comments
- Hyunseo Lee -- Week02, starrynight -- any other comments
- Ruiqi Wang -- Week 02, Space -- any other comments
-
RESOURCES FROM CLASS:
-
SET UP:
- Sign up for the ITP ICM Google Group
- Sign up for a Github Account. You need it to edit this wiki page.
- Log into a p5.js web editor account with your github account.
-
DO:
- Complete this worksheet. Our weekly worksheet becomes the basis for the next class. You must be logged in with your NYU account to access the worksheet.
- Create your own screen drawing: self-portrait, alien, monster, etc. Use 2D primitive shapes –
arc()
,curve()
,ellipse()
,line()
,point()
,quad()
,rect()
,triangle()
– and basic color functions –background()
,colorMode()
,fill()
,noFill()
,noStroke()
,stroke()
. Remember to usecreateCanvas()
to specify the dimensions of your window and wrap all of your code inside asetup()
function. Here's a sample example: Zoog - Write a blog post about how computation applies to your interests. This could be a subject you've studied, a job you've worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (Review and contribute to the ICM Inspiration Wiki page). In the same post (or a new one), document the process of creating your sketch. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?
-
READ AND WATCH:
-
Watch before homework: Videos 1 - 7 | Watch after homework: Videos 2.1 - 2.3
- If YouTube bothers you, ask Daniel Shiffman for a link to videos on Google Drive.
- If you prefer books, Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it for free.
-
Watch before homework: Videos 1 - 7 | Watch after homework: Videos 2.1 - 2.3
-
ASK QUESTIONS: Contribute at least 1 question below.
Questions | Examples
- How do I create gradient color?, Xinyue Qian
- How can I figure out the exact coordinate of the points on my sketch?, Xinyue Qian
- When a line starts from an object without outlines, how to avoid overlapping between the two?, Song
- Is it possible to adjust thickness of the letter? stroke() didn't work, Kevin
- How can I feather an object to fade out?, Nicole Ginelli
- Chun Song -- week01!!!, sea & bird
- Kevin Lee -- Week01, LOGO
- Sohaila Mosbeh -- Hello There!, Trying To Save The World
- Xinyue Qian -- Week 1, Kent's Emoji
- Leo Ouyang -- Week 1, Gumball Watterson
- Hanyi Zhang -- [Week 01, smile]-- any other comment
- Nicole Ginelli -- Week 0101, selfie!
- Caren Ye -- So, it all starts now, some creature -- any other comments
- Xiaoyun Liu -- First Week, Cup or Bowl? -- any other comments
- Fanyi Pan -- Week1, Russian Dancing -- any other comments
- Hyunseo Lee -- Week01, self-portrait -- any other comments
- Ruiqi Wang -- week 01, shapes
For Week 1, please watch the first 2 video tutorials listed on this page under the heading Basics: https://github.com/ITPNYU/ICM-2019-Media/blob/master/weeks/01_pixels.md
If you’re really into it, you can check out the additional videos listed below.