Skip to content

Homework Lauren

Jump to bottom Edit New page
Becca Ricks edited this page Dec 18, 2015 · 546 revisions

Final Project (due 12/3)

Documentation

Please post your final project documentation to a web page (blog post is fine) and link next to your name below. It's up to you to figure out how to best document your project, but it needs to include at minimum:

  • brief written description
  • visual documentation: sketch, images, video, etc.
  • references: links to related projects, code samples, etc.
  • source code (please cite your sources in the code comments)

Final Projects

This is the arbitrary randomized order, please shuffle your names as you wish. If you are presenting outside of room 50, please indicate below. In class presentations will be approximately 7 minutes each (including questions and comments).

Section 2 (12:10 pm to 2:40pm)

Section 4 (3:20 pm to 5:50pm)

Final Project User Testing (due 11/19)

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 (or whatever is appropriate) in the classroom and the other half will "view" or "interact with" or "listen to" your project and give feedback 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.

Final Project Proposals (due 11/12)

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.
  2. Here are some sample final project proposals.

Add Proposals Here

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

Week 9 (due 11/5)

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 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 two links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.

  3. READ AND WATCH (optional):

Add Homework Here

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

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

  • If I'm working with hashtags, is there a way to combine the results of multiple hashtags? For example the default result would have the hashtage "bikes" and the user could search for "3speed" within those results. - Isabel
  • How can I make a button open a link? - Nicole
  • How to manipulate the string data in JSON, for example on the openweathermap the city's weather.main. - Xuhui
  • How can I use data from one API to call another API? It seems JSON loading takes long time and the second JSON begin loading before the first one is done. - Yiting Liu

Add Homework Here

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20 pm to 5:50pm)

Week 7

  1. Create a webpage that extends beyond the canvas, using p5.dom.js. You are welcome to incorporate other javascript libraries as well if you're feeling ambitious. If you're stuck for ideas, you can try going back to the graphical user interface (GUI) elements that we experimented with in week 3, and try recreating that functionality with DOM elements.

  2. READ AND WATCH:

Questions (example questions)

  • Post your question here
  • I try to draw an ellipse on the canvas, before do that I used the createImage to draw an image also located in the canvas, however, the ellipse just be cover by the image and I want to know why? --Melody *How do I get rid of the words "The canvas below is absolute positioned"?? - Sunnie

Add Homework Here

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

Week 5

  • 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).
  • More notes on Arrays and Objects here
  • 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)

  • What is a good way to set the duration of something on the screen?
  • Can you set an array to a local array variable, the same way you would with a regular variable in an object (var newArray = this.oldArray)?

Add your homework here

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

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.

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

  3. Examples

Questions (example questions)

  • Post your question here
  • how do you arrange text in a sketch, as a poem, as one object..? - Ella
  • Can you use system variables like windowWidth in calculations?
  • How do you separate mousePressed() and mouseDragged()? i.e. when mouse is dragged, don't run mousePressed() function. - Jamie

Add your homework here

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

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)

  • question

Homework Links

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

Week 2

  1. Add two links of projects that you find inspiring to the projects page.

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

  • How can I make something move randomly without it jumping around crazily? - Nicole
  • Is there a way to make a color gradient that's not as blocky as lerpColor()? - Nicole
  • How to restart the program in a easy way? - Xuhui By the way, Nicole's work is awesome!
  • Can animate based on the number or speed of 'clicks' (ie click vs double click)? -Anne
  • If I have two dynamic objects. How can I remain the moving track of one object on the canvas while erase the moving track of the other object? -Melody
  • Can I change the frame rate for certain element of my sketch versus the whole thing? - Katie
  • Is there a way to move to give more direction to the 'random movement' animation? (and I second what Nicole asked about not having it be so jumpy) - Katie
  • Has this "Examples" option been on the dropdown all this while? Or is it a new thing with the latest download version? If so, how do I insert an emoticon? Sorry, very random - Sunnie
  • How do I made something into a sprite? - Jamie
  • Same question with Katie:"Can I change the frame rate for certain element of my sketch versus the whole thing? " -An
  • How can I load an image and convert it to a format that I can edit in the program? -Esther
  • How to change color between several specific color? (such as red-yellow-blue-green-red-yellow-blue...)

Homework Links

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

Week 1

  1. SET UP:
  1. DO:
  • Create a portrait of your neighbor. 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 canvas.
  1. READ AND WATCH (if helpful):

Questions (example questions)

  • When working with Arcs, is there a way (perhaps simple geometry, or Euclidean space?), to easily rotate the arc 90 degrees, or flip it 180 degrees? For example if I have an arc as

arc(390, 250, 90, 50, 0, PI);

  • Is there a way I can automate or calculate without having to use trial and error to flip the arc 180 degrees? Perhaps an understanding of how the canvas coordinates work? -dsb
  • How can I draw a triangle with rounded corners? ---Yiting
  • How can I draw a ploygon(more than 4 edges) and fill it with color? When I use "line();" function to draw a ploygon, it only shows edges of the shape and I fail to fill it with color. ---Yiting
  • How to draw a quad with round corners? I mean why just rect can define the corner radius? --Melody
  • I tried to draw curve. But I don not understand the definition of the control point, neither the bezier. what the principle of draw a curve or a bezier? --Melody
  • It may be a topic to be covered in coming lectures but I couldn't work out the following function: mouseMoved() === TRUE; so I used keyPressed() instead for my assignment --- JAE WOO
  • Also, is there anyway I can see the grid while using the editor? It will save us a lot of time! --- JAE WOO
  • How does the draw() method handle memory? Does it deallocate drawings that are no longer visible? I imagine if items are not deallocated, then more and more memory will be sucked up by even a simple animation if it runs for too long. - Jamie
  • Are there types in p5? Like int, float, etc? Or does it just infer type from context and all we have to do is declare var's? - Jamie
  • If I wanted to animate my drawing so that it draws one shape per frame what would be the best method to use? - Quest Kennelly
  • How do you make different elements move/react to your mouse's location on the page?
  • How to display a gif image in P5? -Yuli Cai
  • How to define a series of items as an object? For example, if I draw a pair of eyes with circles and lines and curves, how to manipulate them at the same time, cause I find it's very frustrated to move a whole part of things by changing all the coordinate.
  • And why the picture will become blur if I put the code lines in the "draw" function? - Xuhui Xu
  • How exactly do the control points for curves work? - Nicole
  • When I line up two shapes of the same color exactly side by side on the same pixel, there still appears to be a thin line that "leaks" through to the background. Is there a way to prevent that? - Nicole
  • I also am unsure of how to use curves and do not understand the meaning of control point. How do curves work? What is a control point? - Anne
  • Please clarify how the curves work.. also I wondered if there is a system that could be easily followed to understand the grid of x&y and not need to go back and forth to try find the points wanted? - Ella
  • What tools/methods are there for organizing the code so it's easier (for a human) to read? Can I write notes to myself/my collaborators inside the code? Can I 'name layers' somehow? - David
  • How can we make shapes move forwards and backwards on the screen (clouds, cars)? -Jasmine
  • Is there a way to fill in a shape create by a curve or lines? What do the control points in a curve do? - Jenn
  • Are there keyboard shortcuts for 2D primitives? or for any functions in general? *Is there a way to make a coordinate or color value randomized so that each varible could be individually randomized with it's own parameters? i.e. fill(random((24-50,110,130,240-255))? - Isabel
  • How can I draw continuous graphics ? - Xingjian An

Homework Links

Section 2 (12:10pm to 2:40pm)

Section 4 (3:20pm to 5:50pm)

Add a custom footer
Add a custom sidebar
Clone this wiki locally