Skip to content

Homework Shiffman Wednesday

Jump to bottom Edit New page
Daniel Shiffman edited this page Jan 26, 2016 · 334 revisions

Final Project Documentation

  • Final project presentations are Wednesday, December 2nd. In class presentations will be approximately 7 minutes each, I will be strict about the time to keep everything fair. We also need 10 minutes at the end to do course evaluations.
  • Please post your final project documentation to a web page (blog post is fine) and link next to your name below. This is due Friday, December 18.
  • It's up to you to figure out how to best document your project, here are some loose guidelines if you aren't sure what to include.
    • Title
    • Brief written description
    • Visual Documentation: sketch running online, images, video, etc.
    • References: links to related projects, code samples, etc.
    • Source code (please cite your sources in the code comments)

Schedule and links

Final Project User Testing

The testing will follow a "speed-dating" format. The class will be divided into two groups and we'll do two 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 different projects. 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 "rule" that we will try to adhere to is no explaining of the project until after the user has viewed/interacted.

If you are not sure how to design your testing, e-mail me or come and see me and we'll discuss.

Group A Presenters: 12:20 - 1:20

  • Dana, Ruta, Emmanuel, Serena, Paula, Mathura, Xiqiao, Sabrina

Group B Presenters: 1:40 - 2:40

  • KC, Michelle, Cristina, Soy, Lindsey, Zoe, Melanie,

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. Create a blog post documenting your idea for a final project and be prepared to present the idea in class. Your proposal should include the following (though feel free to use this as loose guidelines, you can document your idea however you see fit.)
  • Title
  • One sentence answering: "What is it?"
  • Written description of the idea.
    • How did you become interested in this idea?
    • What is the audience?
    • What questions do you have for the class (conceptual or technical)?
  • Visual material (images, videos, hand-drawn sketches etc.) that demonstrate your idea.
  • Links to any projects or references that inspired you.
  • Links to in progress sketches that demonstrates any part of the idea.
  • Questions for the class (conceptual or technical)
  1. Plan to present your idea in ~2-3 minutes leaving about 5 minutes for discussion.

Final Project Proposals

Presenting Wednesday, Nov 4

Presenting Wednesday, Nov 11

Week 9

  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.

  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):

Questions (example questions)

  • Michelle: Is is possible to apply the p5 "filters" to only a limited area of the canvas? Also, how to make an array of loaded sound? Also, is it possible to record microphone sound?
  • soy : my uploaded sketches are working fine on my desktop but not with my laptop. what's wrong? you guys see them properly? they are supposed to be in black when you open. also I'd like to have multiple canvases in one browser. for example I want to have two sketch1s and in the middle of them sketch2.
  • Dana: How do you cue a song to play at an exact moment? AddCue? p5Delay? Trying to cue up a video and song.

Add Link Your Homework

Note that the other half of you will present this week, but you should all complete both assignments, however. Of course you can also present this week if you have a question or something you really want to get feedback on.

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. Each student will complete each assignment but only 1/2 will present each week.

  1. Create a sketch that uses an external data source. You can present in class using your laptop or put your sketch online. 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.

  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):

APIs that might be interesting

Questions (example questions)

  • questions
  • Ruta -- Making words to appear as links: can I do it at the .js file or should do at the html? (and more questions on my blog)
  • Dana -- I was playing with .replace - Is there a smart way to circumvent replacing every fragment of a word with another word? For example, if I want to replace he with She, I don't want to end up with 'tShe'
  • Zoe -- Confused about how to organize and then call objects within objects in a json file, also how to make it dependent on input value.
  • Lindsey -- How do you know which link to put in with websites like mashape.com?

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)

  • Mathura: Using mousePressed in the button element seems to take more than one input. So, if I wish to toggle a value using it, it doesn't always work. Is there an equivalent to the onClick function in p5 library?
  • Paula: I don't quite understand the purpose of the DOM. If I wanted to manage the element within the canvas I would use the js page, and for managing the HTML elements (at a scale) wouldn't I just use the HTML page? Why would we ever want to affect the HTML elements within the js file if not to create a button/slider? @_@
  • Ruta: why do I get the impression of water circles under rectangles when the background is in setup? I understand this is the reason but am not sure why. Also, mousePressed still doesn't work, could we check why?
  • Paula: Is there a way to lead fonts so that they show while using the DOM elements? It works fine if I use the text() function, but not if I try to style it using the DOM.
  • Lindsey: Is there a reason it is more useful to put HTML and CSS elements in the Javascript file than having them in their own individual files? Is there a way to have font from an HTML element put behind an JS element? Can the font style be put together in one style function rather than multiple lines?
  • KC: If I'm using strings in an array to display text, is there a way to control the text inside? For example, change the location or size of the text?
  • Zoe: One thing I'm not entirely sure about is how to create different styles and formatting with DOM. Is that done within the HTML portion or is that also in the p5.js script? I'm a bit confused as to where certain code elements are supposed to go.
  • Paula: My code is lagging terribly. I'm 99% sure it's because of the font and the fact that there's so many text. I tried separating it into more manageable pieces (and moving the whole text to preload) but that doesn't seem to be working. Is there a way to fix this?
  • Sabrina: I can't have words printed when the submit button is clicked, I don't know why. Is there a way to fix? And how to refer to fonts in css?
  • Dana: How does the capture() work? When I would use the function, 2 videos showed up: one on the canvas and one off the canvas.
  • Xiqiao: I am still confused about CSS commands to make my page pretty. There are some bugs when I run the game, shut down automatically or can’t shoot a bullet, why was that happened?
  • Serena: Is there a way to use more than one canvas on the HTML page?

Add Homework Here

Week 5

  • Additional material that you can review about objects / arrays.
    • Videos 6.1-6.5 cover more about objects, arrays, and the constructor function.
    • Getting Started with p5.js chapters 10-11 also cover the same material (see e-mail re: PDF).
  • 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.
  • 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. Make one single object with just variables.
    2. Put one or more functions in the object.
    3. Try manually making two objects.
    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();
  }
}

Questions (example questions)

  • add your question here
  • Michelle: Deleting objets from the array.
  • Zoe: changing the state of something in an array and getting it to stay that way
  • Dana: Can you use an array to iterate an object in a circular pattern?
  • Lindsey: What is the best method to restart an object's function?
  • Serena: How can you place an image(img) into an array?
  • Serena: Is there a way to println onto the HTML page outside of the canvas?

Add your homework here

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):

    • Reorganize "groups of variables" into objects.
    • Break code out of setup() and draw() 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.

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

    • Getting Started with p5.js chapters 9-10 (see e-mail re: PDF)

  3. Examples

Questions (example questions)

  • Paula: I've had some people say troubleshooting on the browser window is easier (if you change your P5 setting to open on the browser instead of the default feature). Is it true? what's the difference between doing either one and how can you figure out what the browser is telling you if you do the former?
  • Ruta: could we go through "return the value" thing in the class and maybe through few more examples? Not sure I get it quite right.
  • Ruta2: I tried building functions into objects in my house code, but once I did, the final result was only one house, not multiple as I expected: why so? Also if I'd like to make my multiple houses move, where should I include speed variable? I have it under comment now as it didn't work.
  • Zoe: Using arrays to create multiple versions of the same(ish) object!
  • Michelle: Using arrays; how do you create a function inside an object and then create multiple versions of it that are slightly different between each other? I could only do it without the object, using only the function.
  • Serena: Is there a way to simplify objects when they rely on conditional functions (ie, if mousePressed on object, then drag object)? It seems to sometimes just be too circular to fit into an array.
  • Cristina: why would you use one of these vs the other: dots.push(new Dot(mouseX, mouseY,10); vs var d = new Dot(mouseX, mouseY, 10); dots.push(d);
  • Dana: What is the difference between a class and a function? When is it advantageous to use a function over an object and vice versa?
  • Xiqiao: I was trying to create multiple balls in my canvas and each was expected to be released by mouse pressed, but I only got a ball now. How can I do this?

Add your homework here

Week 3

  1. 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. Start by working in pairs as below. Can you divide an idea into two parts and combine those parts? Can you swap sketches and riff of of your partner's work? You can post together or break off and complete the assignment individually.

    • 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.
    • Create an algorithmic design with simple parameters. (One example is 10PRINT, example code).
    • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.

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

Questions (example questions)

  • Sabrina, Ruta1: how can we change the reference found online w/ the current knowledge from p5 and code one slider?
  • Sabrina, Ruta2: why the first code w/ color slider didn't work (where the background command was pushed below)? and why did it make computer very slow?
  • ZoeB: can you get a switch to keep one of it's positions permanently - say go from off to on and then remain on for the rest of the sketch?
  • Paula: the mousePressed function seems to be tricky to master. Is there something else after "function mousePressed()" that needs to be written in order for it to work?
  • Cristina: How could we have the sine waves continue to run even if we click somewhere else to trigger another?
  • Dana: How do we add animation to for loops? How do I make an object emanate from the same point over and over?

Homework Links

Week 2

  1. 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.
  1. READ AND WATCH:

Questions (example questions)

  • RutaK: when I assign mouseX=mouseX+1 the ellipse moves by itself; however, if I move my mouse, it can still control where ellipse is: how do I do that the ellipse moves ONLY by itself?
  • RutaK: I've been trying to upload image as my background as per this [instruction] (http://p5js.org/examples/examples/Image_Load_and_Display_Image.php), however all I got was a white background. Would like to check that during/after class.
  • ZoeB: I added sound to my animation and it works in the p5.js editor but not in the browser. I was using this tutorial: http://coursescript.com/notes/interactivecomputing/sound/ and tried both .mp3 and .ogg file types. When I inspect the element in the browser, the assets file doesn't show in the sources...even though cyberduck says it's there?
  • ZoeB: How can you get an object to move on its own after you have it appear with the mousePressed function? RutaK: Zoe's question, too.
  • DanaA: I want to draw a line and have the 2nd point be dictated by my mouse and then I want to set the line wherever my mouse stops (by clicking). How do I do this? Also, what is the easiest way to get an object to cycle continuously across a screen?
  • Serena: How do you use the acceleration function? Would it work to use the acceleration function to change the size of a mouseX, mouseY controlled shape?
  • Michelle: I cannot tilt shapes and work with arcs.
  • Xiqiao: How to make an object move in a certain customize path, not just in a line? Is there an event that leading a series of commands when two objects encounter?
  • Melanie: How can we make sketches and everything inside them scale to the size of the browser window? Also, how does the array function work? specifically, in order to select a random object/image out of a group (or array?) to load.

Homework Links

Week 1

  • SET UP:

  • DO:

    • Create your own static 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 createCanvas() to specify the dimensions of your window.

  • READ / WATCH (if helpful):

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

Questions | Examples

  • KC Lathrop: If you are making a sketch with identical shapes, is there a way to condense the code so you don't need to write the same code twice with one different argument?
  • Mathura: The javascript calculations are sometimes very slow. Is there a way to write the code in a way to increase the speed?
  • CCannella: Is there a way for p5.js to prompt you to enter certain commands when you start typing?
  • RutaK: Is there any way to have RGB palette on hand on p5.js?
  • DanaA: 1. Why does the code work despite incorrect syntax - lacking an ';' at the end of each line? 2. Why do the figures not have consistent starting points (ie. corner versus center)?
  • Soyeon: I am missing my helmet! help me!!! - I tried to figure out how to draw a filled arch as a helmet but coundn't figure out how the radian thing works.
  • Michelle: How do you make thicker lines? And also Ruta's question. And is it possible to add a "grid" in your canvas?
  • Lindsey: How can shapes be grouped together? Is there a way to "subtract" shapes from each other?
  • Serena: Does a "radians and curves" guide exist somewhere?

Add Your Homework

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 your 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!).
  4. Post your sketch online.
Add a custom footer
Add a custom sidebar
Clone this wiki locally