-
Notifications
You must be signed in to change notification settings - Fork 15
Homework Mimi Wednesday
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 your assignment.
- Contribute a question.
- Post documentation. Something visual + your code. e.g. Blog post with code, screenshots, video, or a web version of your sketch.
- Place a copy of your sketch folder in our class' shared dropbox folder. (Look for it in email.)
-
REVIEW:
- Take a closer look at these Video examples and post questions below:
- OpenCV Face Detection
- Learn more about the Kinect
- Watch new Shiffman videos.
-
DO: SUGGESTIONS
- Animate a static image, like the grass field
- Make a mirror by combining 2-3 of examples like what I showed in class
- Make a slideshow of images. Check out this Crossfade Effect.
- Make a "VJ turntable" for video. Check out Movie Scrub.
-
READ, WATCH, RUN
- Read topics listed here: Week 8 Syllabus
- Chapters 17-18 of Learning Processing (Chapter 18 is out of date)
- Run Examples: [Strings] (https://github.com/shiffman/LearningProcessing/tree/master/chp17_strings) | [Data] (https://github.com/shiffman/LearningProcessing/tree/master/chp18_data)
ASK QUESTIONS: Contribute questions below. (Name optional.)
- Your Question Here
- Your Question
-
DO: SUGGESTIONS
- Take a class you've created and make lots of them using an array.
- Incorporate object communication (e.g. obj1 is near obj2).
- Can you get objects of different classes communicating with each other?
- Lay out your objects in a grid using 2D arrays. Tutorial | Example
- Try defining a class that has an array in it. Like here
- Work with text: A String is like an array of characters
- Work with an image: An image is like an array of pixels
- Make a game where you add/remove elements from an ArrayList Video 1 | Video 2 | Chapter 23 | Run Example
-
READ, WATCH, RUN
- PIXELS, IMAGES, VIDEOS
- [Follow Tutorial on Pixels] (http://processing.org/tutorials/pixels/)
- [Computer Vision] (https://itp.nyu.edu/classes/icm-dano-spring2014/vision/)
- Lesson 7 and Chapters 15-16 of Learning Processing
- [Run Pixels Examples] (https://github.com/shiffman/LearningProcessing/tree/master/chp15_images_pixels)
- [Run Video Examples] (https://github.com/shiffman/LearningProcessing/blob/master/chp16_video/example_16_01_Capture/example_16_01_Capture.pde)
- Video coming!
ASK QUESTIONS: Contribute questions below. (Name optional.)
- Your Question
- Oryan- How do u make an array or arrayList from sensors?
- Luke - How to use PVector?(what is mag() and heading()?)
- In Young - How do I place image without background? How do I use popMatrix?
- Zhen - How to zoom(scale) all the things at the same time/the canvas?
- Zhen - How to give a ball a tail, and when the ball turns, the tail turns smoothly/in a good look? -^-
- Zhen, again - How to change the moving speed of the balls base on the frequency of keypressed/mouseclicked?@^@
- Your Name -- Link Here.
- Changyeon --
- In Young --
- Luke --
- Oryan --
- Sergio --
- Teresa --
- Tigran
- Shiloh --
- Yifan --
- Zhen --
-
DO
- Define a class. Turn an element of one of your old sketches into a class. Make sure it works.
- Send ONLY the class definition to your partner.
- Incorporate your partner's class into a new sketch.
- Bonus: Figure out a way to have your objects communicate each other. (Something like: If ball1.isCloseTo(ball2.x, ball2.y), change the background, where boolean isCloseTo(floatx, float y) is a function defined in your Ball class.)
-
READ, WATCH, RUN
- Videos 9.0-9.4 | Read Chapter 9 | Run Examples
- Fancy Arrays (Optional): ArrayLists Video 1 | Video 2 | Chapter 23 | Run Example
ASK QUESTIONS: Contribute questions below. (Name optional.)
- Tigran: How do we do object communication?
- Oryan: How do you decide whether logic goes outside or inside the class?
- Zhen: How do we isolate color values?
- Sergio: Can you use existing Procession functions (e.g. void mousePressed())
- Yifan: I want color to change more fluidly.
- In Young: How to combine 2 classes: 1 needs bg, the other can't have bg
- Changyeon: I want sketch to remember something it's not remembering.
- Teresa: What is the relationship between objects and classes.
- Luke: How do I remove things from arrays? How can I erase an array? And then create a new one?
- Your Name -- Link Here.
- Changyeon --
- In Young --
- Luke --
- Oryan --
- Sergio --
- Teresa --
- Tigran
- Shiloh --
- Yifan --
- Zhen --
-
DO:
- Re-organize your code into functions.
- Try to make your functions take parameters so you can re-use them in a different sketch.
-
REVIEW
- Examples from class
- Chapter 7 from Learning Processing
- EXAMPLES: Chapter 7
-
READ, WATCH, RUN
- Chapter 8 from Learning Processing.
- WATCH VIDEOS 8.0-8.3
- RUN EXAMPLES: Chapter 8
-
ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)
Questions | Examples
- Name: Question
- Oryan: how to define "special" arguments like rounded corners?
- Oryan: How to decide what needs to be its "own entity" and needs to have its own function? e.g. anything that moves on its own?
- how to make multiple object at a time other than copy and paste, "Array??"
- Teresa: When would you need a function within a function?
- Your Name -- Link Here.
- Changyeon --
- In Young --
- Luke -- Pop
- Oryan -- [Clock functions] (http://oryan1.com/ITP%20projects/AlarmClock%20functions/)
- Sergio -- [3D Rays] (https://www.dropbox.com/sh/q2d010bzdhbn90g/AABG3Hf2keI1lITt17fpd5Hva?dl=0)
- Teresa -- [Constellations agian] (http://flourlamb.tumblr.com/post/98418727972/writing-functions-my-for-loop-draws-random-stars)
- Tigran
- Shiloh --
- Yifan --
- Zhen --
-
DO: Divide this week’s assignment into 2 parts:
- (1) Create many things on the screen with a for-loop.
- (2) Create 2 different types of mouse interactions with if/else statements: e.g. Switch Button | Fire Button | Hold Button | Rollover
- (3) Mid-week, swap your sketches and incorporate the other person’s sketch into your own.
-
REVIEW
- Examples from class
- Chapter 6 from Learning Processing.
- WATCH VIDEOS 6.0-6.6
- EXAMPLES: Chapter 6
-
READ, WATCH, RUN
- Chapter 7 from Learning Processing.
- WATCH VIDEOS 7.0-7.3
- RUN EXAMPLES: Chapter 7
-
ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)
Questions | Examples
- Name: Question
- Sergio: How can i give a random color value to the objects inside a for loop (different color to each one of them) but only when the sketch starts?
- Oryan: Is there a way to "stop" a for-loop without conditioning (if,else)?
- Sergio: When should we use mouse interactions as "if" statements and when as Functions? e.g. "if (mousePressed);" vs "void mousePressed();"
- Oryan: Is there an else expression to a while/for loop? eg: x > endX BUT not larger then x1.
- Teresa: How do I make loops stop?
- Luke: How can I slow down the frame?
- Your Name -- Link Here.
- Changyeon --
- In Young --
- Luke -- Target Practice
- Oryan -- [Battery Charge] (http://oryan1.com/ITP%20projects/Battery%20Charge/)
- Sergio -- 3D Rays
- Teresa -- Target Practice
- Tigran
- Shiloh -- Flying Bart.
- Yifan --
- Zhen -- Flying Bart
-
DO
- Create a animated application that moves and changes over time.
- Make it interactive with mouseX and mouseY. Try dist().
- Play with random()
-
READ & WATCH
- Chapter 5 from Learning Processing.
- WATCH VIDEOS 5.0-6.6
- RUN + REVIEW EXAMPLES: Chapter 5
-
ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)
Questions | Examples
- Name: Question
- Oryan: Since random allows use of one parameter and color has three (RGB), is there a way to random colors in one row of code?
- Teresa: Is there a way to draw a random thing once and then stop?
- Luke : How to make a variable that shows your "prior" mouseX?
- Teresa: In Example 5-2, green does not increase for mousePressed, but the book says it does. Is it broken?
- Oryan: When using rotate (pushMatrix) and random, all objects need to be on the same matrix system? didnt work otherwise.
- Oryan: How to define an object as location points which will allow using it for mouse gestures?
- Catherine: I wanted to create a gradient which changed for a relationship y=constant * x. Struggled with that as I wanted everything to change according to this basic relationship.
- Your Name -- Link Here.
- Catherine -- [moving sun] (http://catherinerehwinkel.com/Projects/ICM/week2/)
- Changyeon -- [Good Night, Mr.Lautrec]Click Here
- In Young -- [Falling Tree] (http://lisaisong.com/ICM)
- Luke -- Skyline
- Oryan -- [Allarm Clock] (http://www.oryan1.com/ITP%20projects/Allarm%20Clock)
- Sergio -- [Moving Beetle] (http://itp.smorad.com/2014/09/icm-02-moving-beetle/)
- Teresa -- [Illuminating the Sky] (http://flourlamb.tumblr.com/post/97764996067/illuminating-ursa-major-ursa-minor)
- Tigran
- Shiloh -- RunningMan
- Yifan -- [Solar Eclipse] (http://yifanhunyc.com/ICM/week2/index.html)
- Zhen
-
SET UP:
- Download Processing 3.0 - Scroll down to get 3.0a3.
- Sign up for the ITP ICM Google Group
- Sign up for our ICM Section's Google Group
- Sign up for a Github Account. You need it to edit this wiki page.
- Accept invite to share Dropbox folder.
-
DO:
- Create your own screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes – arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() – and basic color functions – background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use size() to specify the dimensions of your window.
-
READ AND WATCH:
-
WATCH VIDEOS
- Basic Drawing: 0.5 - 2.1
- Interaction and Variables: 3.0 through 4.3
- Chapters 1-4 from Learning Processing - See PDF via email.
- Run Examples for Chapters 1-4
- Casey Reas Eyeo 2012 talk on Chance Operations.
-
WATCH VIDEOS
-
LINKS FROM CLASS:
- History of Programming
- Complexity + Surprise + Interactivity: Dwarf Fortress | Precision: One Perfect Cube | Scale : 108 | 10,000ft view: Flight404 | Interactivity: Body Navigation | Shadow Monsters | Complexity: Case Reas Paintings
-
ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)
Questions | Examples
-
how can I make the line I draw appear on the screen one by one instead of all at once? (Luke)
-
Is it possible (or maybe totally unnecessary) to have a pixel location grid overlay so that pixel locations are more concrete/guessable? (Catherine)
-
How to draw a curve I want? (Zhen)
-
Is it possible to rotate shapes around a center point, or any other specific point? (Sergio)
-
Is there a way to have ALL distances proportionally to the sheet AFTER the sketch is done? If not what is the right method of doing it? (Oryan)
-
What's the right way to post .edp/.js on the internet? (Oryan)
-
Same as Zhen, How to draw the curve? (Yang)
-
How can I draw polygons with more than 4 sides?(Teresa)
-
How does rotation work? Where is the axis, and how can I better control the rotation?(Teresa)
-
Is there a simple way to make and edit an evenly spaced grid?(Teresa)
-
How to figure out the right way to rotate? (Tigran)
-
How to achieve gradients? (Tigran)
-
How do I offset shapes?
- Your Name -- A Red Square.
- Catherine -- [Sun Down] (https://catherine-rehwinkel.squarespace.com/itp-nyu/2014/9/8/sun-down-processing-sketch-1).
- Changyeon -- One Strange Night
- In Young -- [Forest] (http://lisaisong.com/ICM-assignment-1)
- Kareem
- Luke -- Lights.
- Oryan -- Pac-Man
- Sergio -- Beetle
- Teresa -- Ursa Minor
- Tigran Solar System
- Shiloh -- Swag
- Yifan -- SUPERMAN
- Zhen -- Simpson
- JavaScript mode in Processing is a nice magic trick that allows you to run a Processing sketch in a web browser. However, there are lots of reasons why it may not work from obvious ones like no third party libraries to less obvious ones like no functions with the same name as a variable. To make matters worse, some of Processing's 2.0 API is not implemented for JS. Use JavaScript mode cautiously and don't let it get in the way of the important stuff like just making what you want to make. Instructions for JavaScript Mode
- Just to make things even more confusing, we are also teaching something at ITP called p5.js. If you take Commlab: Network Media, you'll encounter this. p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. p5.js is a framework you want to use if you want to write your code natively in JS whereas processing.js is something that will translate your code behind the scenes for you.