Skip to content

Homework Dano Thursday

Jump to bottom Edit New page
JingruYin edited this page Dec 19, 2016 · 449 revisions

Guidelines

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!

  1. Do the assignment.
  2. Contribute a question.
  3. Post documentation in the form of a blog post. Ideally something visual, some written thoughts, and code. 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!).

[Web Editor Link] (https://alpha.editor.p5js.org/)

FINAL PROJECT DOCUMENTATION

The testing will follow a "speed-dating" format. The class will be divided into two groups and we'll do four rounds. For each round half the students will set up on a laptop in the class room and the other half will "view" or "interact with" or "listen to" your project for ~5-7 minutes. We'll rotate so that all "testers" will try each project and provide feedback.

It's up to you to design your "user testing". It can mean something different for each project. For a game, it's pretty obvious what to do. For a physical installation or performance or sound piece, this will be more difficult. The point here is to LISTEN and write down notes about the user's reaction. The best case is that you do no explaining of the project until after the user has viewed/interacted.

Group A Presenters: 3:30 - 4:00, 4:45- 5:15

  • Oriana Neidecker
  • Daniella Garcia
  • Kenzo Nakamura
  • Jina Jung
  • Shelley Hu
  • Jixuan Sun
  • Dror Ayalon
  • Chetan Hasabnis

Group B Presenters: 4:00 - 4:30, 5:15 - 5:45

  • Kar Rosen
  • Vesna Djokic
  • Jingru Yin
  • Roi Lev
  • Elizabeth White
  • Alex Fast
  • Zhuoxi Song
  • Sharif Al-hadidi

Final Project Proposals

Final projects are a creative idea inspired by the concepts in this class. There is no requirement to use a particular aspect of programming. The idea and your enjoyment and interest in the idea is what counts. Some things to remember.

  1. Keeping things simple and small in scope is a plus. If your project idea is a big one, consider documenting the larger idea but implementing just a small piece of it.
  2. Also think about making a final project for a small audience, even one single person like a family member or friend. . . or yourself. This can be a good way to focus your idea and design process. "Generalizing" the idea can come later (or maybe not at all.)
  3. Final projects can be collaborations with anyone in any class.
  4. Final projects can be one part of a larger project integrated with Physical Computing or another class.

What you need to do now:

  1. Final Project Proposals: a few minutes of slides, sketches...something to ILLUSTRATE what's in your head.

    • Collect inspirations: How did you become interested in this idea? quotes, photographs, products, projects, people, music, political events, social ills.
    • Collect source material: drawings, images, videos, sounds, text
    • Collect code: your own sketches and/or other people's sketches.
    • Collect ideas for title
    • Collect ideas for 1-sentence description?
    • Context? Who's it for? How will people experience it? Is it interactive? Is it practical? Is it for fun? Is it emotional? Is it to provoke something?
    • Collect questions for your classmates.
      • What are you unsure of? Conceptually and technically.

  2. Plan to present your idea in ~2-3 minutes leaving about 5 minutes for discussion. You can present your idea however you like visually, but make sure you also document your thoughts in a blog post linked below.

Final Project Proposals

Presenters 11/10

Presenters 11/17

Week 9

##Editing your p5.js outside of the web editor.

  • Use the menu "Download" in the web editor to bring all the files down to your machine. Unzip that and open it in a text editor for instance, Atom ([Brackets.io] (http://brackets.io/) and Sublime are also very popular text editors.) To show your sketch in a web page you could just do File>Open File in your browser and point to your index.hml file. To make everything easier especially serving up images you might want to run "local we server" to serve up your pages. Atom has a very nice thing for this that you might consider installing called atom-live-server (Atom>Preferences>Settings>Install>(type atom-live-server). You then use it by going under menu Packages>Live Server and pick a port. Atom-Live-Server creates a new web page where everything automatically shows up. Here are two videos on the subject. editors and local servers work flow.

Here's another mini trial run for a final project. Just like last week, all students should complete the assignment but only 1/2 will present in class.

  1. Create a sketch that uses external media (sound or video). Some ideas are:

    • Make something responsive to microphone input.
    • Create a "photobooth" with augmented snapshots from a camera.
    • Create a "painting" system that colors pixels according to camera input or a video.

  2. 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.

  3. READ AND WATCH (optional):

Examples

Questions (example questions)

  • Can you set ranges in the mic function? For example, I only want an ellipse to draw if a "C" note is played. problem solved.

Add Link Your Homework

Note that those of you who did not present last week will present this week as indicated below.

Week 8

Start thinking about and doing some mini trial runs for a final project. They can be small sketches that form a tiny component of a larger idea. All students should complete the assignments for this week and next but only 1/2 will present each week.

  1. Create a sketch that uses an external data source. Plan to present in class using the classroom computer or your own laptop if you prefer. Here are some ideas:
  • Track personal data over the course of a few days (exercise, sleep, computer use, eating, etc.). Enter the data manually into a JSON file and visualize the results.
  • Count word frequencies in two different text sources (i.e. two different authors, two different newspapers, two different political speeches) and visualize the results.
  • Use weather data to affect elements in a sketch.
  • Gather data from a google spreadsheet and use in a sketch.
  • Here's a list of other data sources you might investigate and try.

  1. Create a blog post documenting your work and process. Include links to other projects that serve as references and inspiration for your work.

  2. READ AND WATCH (whatever is helpful to you):

Examples

Questions (example questions)

  • What is the best practice to workaround a cross-origin request error? Oy Vey. This is a real pain with javascript. It is a security protection that you can only ask for data from a place that you came from. Try adding JSONP as an extra parameter on you load functions and if the source is cooperating you can get in the back door. Sometimes you have to create a web server on your machine. See notes for coming week at bottom of this page (soon to be top)

Add Link Your Homework

Note that half of you will present this week, the other half next. You should complete both assignments, however, and of course you can present both weeks if you have a question or something you really want to get feedback on. Feel free to switch with each other or e-mail me if you would like to switch.

Week 7

Questions (example questions)

  • Made a button with createButton, when you push it an animation is supposed to happen. However, the animation is static when the button pushes. Any workarounds from that?
  • Also similar issue with sound. Tries to use an if statement to get it to pause taken from another ITP blog, but if you press the button again it does nothing. (The explanation on sound in the DOM library is seriously lacking).
  • How can I make the slider reset to it's highest value when I click the mouse? A.k.a, can "button.mousePressed" be used more than once? Because that isn't working for me.
  • How can I make an image or an h1 appear when the slider reaches a certain value? I've tried setting the middle argument in CreateSlider to a variable and making an if statement so that if the slider goes below that amount something changes but it doesn't work. When I put that variable in the println nothing shows up but what the variable is set to

Add data set that interests you here

Add Homework Here

Week 5

Read / Watch

  • Videos 6.1-6.11 cover more about objects, arrays, and the constructor function.
  • Getting Started with p5.js chapters 10-11 also cover the same material.
  • Next week we'll be covering the p5.js DOM library. If you want to get a head start take a look at

Do

  1. In your blog post this week, please include some thoughts on the synthesis workshop, what you liked or didn't like about it, and any documentation of what you made.
  2. Design a sketch in an object-oriented fashion. Follow these steps and see how far you get (even just doing the first couple steps is ok!)
    1. Write a constructor function with just variables and generate one single object.
    2. Put one or more functions in the constructor function and call them on the object.
    3. Try making two objects without an array. Can you make them different?
    4. Duplicate the object using an array and make as many as you like!

In the end the goal is to have code in draw() that only makes calls to objects. Something like:

function draw() {
  background(0);
  
  // A single object
  apple.chop();
  // Another object
  orange.peel();
  
  // Calling a function on all of the objects in an array
  for (var i = 0; i < grapes.length; i++) {
    grapes[i].pluck();
  }
}

Example Code and Quiz

Questions (example questions)

  • Why is the Dan-O imagine pre loading in the top left hand corner? It's not appearing in the setup in the code so I'm confused why it's there before "mouseDragged" happens.

Homework Links

  • Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments

Week 4

  1. 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() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):

    • Break code out of setup() and draw() into functions.
    • Use a function to draw a complex design (like this) multiple times with different arguments.
    • Write a function to that returns the result of a mathematical operation that you need to do several times in your code.
    • Reorganize "groups of variables" into objects.
    • If you are feeling ambitious, try embedding a function into an object.

  2. An optional quiz to test your knowledge if you like.

  3. READ / WATCH (Nothing required, read or watch what you find most helpful)

    • Videos 5.1-5.4 cover functions. If you want to get started on what we'll discuss next week, you can also watch 6.1-6.11. Last year, I emphasized "JavaScript object literals" over the "JavaScript Constructor function" for making objects. I think this was a mistake. I'll discuss the distinction in class next week and might re-record these videos eventually, but keep that in mind as you watch. 6.4: The Constructor Function might be the most useful.
    • Getting Started with p5.js chapters 9-10 (see e-mail re: PDF)

  4. Examples

Questions (example questions)

  • Example Question
  • (Going from Dan's 6.4 video) Do you have to write "new Bubble" for every new constructor function object you draw? Yep, you have to call the constructor function by saying new Bubble() every time you want to make a new bubble.
  • How do you create a time-based sketch? I matched each "if" statement to a frame using the "frameCount" built-in variable, but there has to be a more efficient and effective way of doing this...

Homework Links

Week 3

Assignment

  1. In general this week, you should work with rule-based animation, motion, and interaction. You should also play with the ability to do something many times (for loop). My suggestion for this week is that you try to do 5 or more tiny assignments rather than one big one. Set aside time every day. Some small example technical requirements might be. Hopefully these will trigger some ideas from you to add interest, but to start with lets keep them all small and fast. If you already know this technical material set out your own small goals for frequent projects.
    • Use an if statement to make different things happen depending which half of the screen you are on (top to bottom or side to side).
    • Use a compound if statement to make different things happen depending on which quadrant of the screen the mouse is in.
    • Use an if statement and a direction variable to make a ball bounce off one side of the screen.
    • Use more if statements to make the ball bounce off all sides of the screen.
    • Use a for loop to draw 100 objects on the screen.
    • Use a nested for loop to draw a grid of objects on the screen.
  2. Try this quiz if you want to test your knowledge.
  3. In class exercises that we did not do in class.
  ////////////////////////////////////
//Try this code (without copy and pasting), then  change it to top bottom, draw a border etc
function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  if(mouseX > width/2){
  	background(255,255,0);
  }else{
        background(255,0,0);
  }
}

//////////////////////////////////////
//Try this code (without copy and pasting) then add a direction variable, check left edge etc
var x = 0;

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(255);
	x = x +1;
  if (x > width){
    x = -1;
  }
  ellipse(x, 100,20,20);
}

//////////////////////////////////
//Try this code (without copy pasting), then see if you get the balls to on a diagonal, overlap etc
function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(220);
  for(var i = 0 ; i < 100; i++){
    ellipse(i*10,100,20,20);
  }
}

READ / WATCH

Examples

Questions (example questions)

  • How do you mate two animations act simultaneously on the canvas? For example, The odd numbered rows are moving down then up on the y axis, while even rows move up to down on the y axis? You are probably using a for loop to draw a bunch of horizontal lines on the screen. Ask yourself what you want to vary, starting vertical position of where you draw the lines. Make a variable called top_of_lines, add it to the y position to the lines you are drawing in the for loop and and make that variable bigger in every draw function (outside of for loop). Do it first for lines going in one direction and then try adding a second variable top_of_lines_up for lines going the other way by making that variable smaller in each draw loop.
  • Is there a way to infinite loop offset for For Loops? You probably want to avoid infinite loops but you could make your for loop appear to start over with an if statement in the draw function (outside of for loop) that resets the offset. If this is related to the previous question, you would reset top_of_lines to -height to make them appear that they are starting over again at the top.
  • How come when I use the preload function to put a song into my sketch, everything below it disappears? Don't know. Does all the text of the code disappear permanently? Try loading another sound or an image to see if it is something about that sounds file?

Homework Links

*For anyone having issues with the p5.js editor sign up for a codepen account and fork this pen. p5.js Editor CodePen

Week 2

  1. Work with someone else. You can do different projects but try to sit side by side for 1/2 hours this week.
  • Chetan , Jingru
  • Elizabeth , Jixuan
  • Zhuoxi , Karly
  • Oriana , Kenzo
  • Roi , Jina
  • Shelly , Vesna
  • Dror , Sharif
  • Daniella , Alex
  1. REVIEW - If you haven't already...
  • Variables videos 2.1-2.3 and 1st half of Chapter 4 of Getting Started with p5 (up to Example 4-5).
  • map() and random() videos 2.4 - 2.5
  1. 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.
    • (You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.)
  • Here is an optional "take-home" quiz to test your knowledge.
  1. READ AND WATCH:
  • Videos
  • Getting Started with p5:
    • Read Chapters 5 (Response) and 8 (Motion).
    • Read the 2nd half of Chapter 4 on Loops (starting from Example 4-5 thru 4-13).
    • If you're interested, read Chapter 6 on Translate, Rotate and Scale.
  1. EXAMPLE CODE:

Questions (example questions)

  • When my code gets really elaborate and intricate, my screen goes blank and when I refresh my changes aren't saved... is this happening to anybody else? Bummer. I wonder if it has less to do with you code than that problem we had in class of printing in to the console (a known bug they are working on). For now make sure auto save is checked in preferences. But save obsessively anyway.
  • Can I change the shape to random triangles and lines? Are they kind of shapes that can't move with my mouse? Maybe try the random() function instead of writing actual numbers for coordinates.
  • How to organize some objects into group to move together? Trying using an offset for each shape + a variable. Or look into translate function.
  • Can I move an img with my mouse? image(myimgvar,mouseX,mouseY)

####homework

Week 1

  • SET UP:

    • Sign up for a p5.js web editor account
    • Sign up for the ITP ICM Google Group
    • Dano will make a cc list for our section.
    • Sign up for a Github Account. You need it to edit this wiki page.
    • If you would like to be a member of my Coding Rainbow slack channel, where there is a #help channel for questions, let me know via e-mail.

  • DO:

    • Here is an optional "take-home" quiz to test your knowledge. We'll be releasing one of these each week for self-study. We'll discuss answers next week in class.
    • 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 use createCanvas() to specify the dimensions of your window and wrap all of your code inside a setup() 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 sketches. 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? Finally spend 10 minutes writing looking for your deepest emotions, your fears, frustrations or just free association about programming on paper or doc that no one will ever read.

  • READ AND WATCH:

    • Videos 1.1 - 1.3 -- note these were recorded last year and reference the desktop editor which we are no longer using this semester.
    • After you do your homework, watch 2.1 - 2.3 to preview next week's discussion.
    • If the YouTube ads / format bother you, please contact [email protected] for a link to a shared google drive folder.
    • If you prefer books, I suggest Chapters 1-3 of Getting Started with p5.js. If you are logged into the NYU network you can read it via safari books online. Actually it appears that you only get a preview for free at least if you are not physically on the network in an NYU building. If you only see the preview version you will have to pay for safari (see free trial offer) borrow it or buy it for $9 on the kindle ).

  • ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)

Questions | Examples

  • What do computers call their father? Data
  • Is there an infinite canvas in p5.js? No but you could probably give that feeling with some fancy programming.
  • Is there any way to close the stroke on an arc? Yep add a optional seventh parameter for "mode", in your case try "CHORD" mode to close the stroke.
  • Does space matter? Nope, you can have any amount of "white space" between the words and numbers in your program.
  • Is anybody else able to "Download" their p5 image? Mine brings up a blank page every time I try -__- Do you mean download all the files associated with the sketch? Working okay on my computer.
  • Is anyone else having issues with quad()? Yes quad is way harder than rect. See if rect will work for you. For quad you have to specify an x and a y for all four corners.
  • How can I make an image rotate/orbit around a specific point? Think back to High School orbitx = Radius*Cos(Angle) + centerx. Oh wait we don't know how to animate or increment an angle variable. Sorry to remind you of High School for nothing.
  • How do you choose the canvas size? The CreateCanvas(400,400)function is usually the very first line of any program. The first parameter will be the width and the second will be the height.
  • .....how......did everyone embed their drawings? I copied and pasted the "embed" link - nothing. Mine is a screen shot! Hope no one finds out! Your secret is safe on the internet. If you are pasting the embed code you get from p5's share menu into wordpress I think you have to change the little tabs above the edit box in wordpress to "text" instead of "visual"
  • What's the difference between Processing and P5.js? Processing in training wheels for Java, P5.js is training wheels for javascript.
  • Could you go over the basics of the difference in code between static drawings (all 6 circles showing up on the screen at once), and an animated drawing (one circle showing in 6 consecutive positions across the screen)? *Why do things not work when I try the same thing that Shiffman does?

Add Your Homework

  1. Kar Rosen -- Made a little sea playing with bezier curves Aaaand My writing assignment and cute little sketch for this project.
  2. Sharif Al-Hadidi -- Made a Snowman on a hill during a sunny dayHere is my Blog Post
  3. Alex Fast -- p5.js: A Space Odyssey, and [here is my blog post] (http://www.alexfast.net/category/com/)
  4. Elizabeth White -- This is my simple abstract design (which was not easy to arrive at!) and here is my blog post which explains my process. One more thing! I created a [fun little game] (https://alpha.editor.p5js.org/full/rJbx2ODn) (if I should be so confident as to call it that) where the mission is to fill the whole screen purple! It's very difficult until it hits you and becomes super easy!
  5. Roi Lev -- A camel with a hat in the desert - the story behind, and the piece itself
  6. Jina Jung --Lunching ITPers, and my blog
  7. Jixuan Sun -- my blog post, A piece of landscape
  8. Kenzo Nakamura My blog post, 80's Rave
  9. Daniella Garcia [BLOG] http://www.0oda.com/icm/ , https://alpha.editor.p5js.org/projects/ryIdOBd2
  10. Vesna Djokic -- [blog post] (http://vgdjokic.dreamhosters.com/ITP/), [sketch] (http://vgdjokic.dreamhosters.com/ITP/P5_js_Projects/ICM_1/)
  11. Zhuoxi Song -- [Sketch of GitHub avatar] (https://alpha.editor.p5js.org/projects/rJXy3UOh)
  12. Shelley Hu -- project Home and [my blog] (http://shelleyhu.com/2016/09/15/project-home-and-some-rant/)
  13. Oriana Neidecker The eye
  14. Jingru Yin -- [Tarot] (https://alpha.editor.p5js.org/projects/BJztSD_3)
  15. Dror Ayalon -- hello_itp: open on 2 screens, just tap/click, [the blog post] (http://www.itp.drorayalon.com/2016/09/15/hello_itp/)
  16. Chetan Hasabnis -- Shooting Game
Add a custom footer
Add a custom sidebar
Clone this wiki locally