Skip to content

Homework Mimi Wednesday

Jump to bottom Edit New page
Rena Anakwe edited this page Dec 2, 2013 · 272 revisions

Guidelines

  • Each week you must complete two items for your homework.

    • Post documentation of your assignment. This can be a short blog post with screenshots / video documentation and/or a Processing.js implementation of your sketch.
    • Place a copy of your sketch folder in our class' shared dropbox folder. Also provide link to your specific dropbox folder below.

  • A word about JavaScript mode and Processing.js | Instructions

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

WEEK 11

Final Project Presentations!!!

5-7 minute presentation. Please speak to the following:

  • Title
  • Collaborators: What did you do, what did they do?
  • What is it? Why did you do it?
  • LIVE DEMO: Tell us a story from beginning to end of how you expect people to approach and interact with your project.
  • Challenges. What was hard about it? What was easy?
  • Learnings from User-testing. What did you change/not change after last week's user-testing?
  • Next steps? Will you continue to develop this idea? In what ways?

Link to your presentation and code. Your final project will not be considered complete without it!

WEEK 10

1:1 User Testing!!!

  • Please upload what you're going to test to dropbox
  • Post your questions below

Questions | Examples

Post a link to your presentation!

WEEK 9

Contribute a question!

Questions | Examples

Post a link to your presentation!

WEEK 8

Contribute a question!

Questions | Examples

  • What is a good resource to help structure data? I ended up having an array inside of an array for JSON data I was trying to store for chess and it ended up being a tedious to extract that data. I'm rewriting for multiple files, but I'd like to learn a bit about how to best handle complex data. (aankit)

Add Your Homework

Week 7

  • LOOK AT EXAMPLES
  • READ
    • Learning Processing, Chapters 15-16
  • HOMEWORK
    • Develop a project that uses images and pixels. For this project you should document your work in a blog post in addition to creating the Processing sketch. Note that examples that use Capture of Movie will not work in JavaScript mode. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
      • Create a software mirror by designing an abstract drawing machine which you color according to pixels from live video.
      • Create a video player. Consider combining your pcomp media controller assignment and build a Processing sketch that allows you to switch between videos, process pixels of a video, scrub a video, etc.
      • Use the kinect to track a skeleton. Can you "puppeteer" an avatar/animation with the kinect?
    • Note that only the names in bold (1/2 of the class) on the wiki will present next week. The second half will present the "data" assignment the following week. You should all 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.

Contribute a question!

Questions | Examples

  • This is more for a previous week, but, in this [example] (http://www.learningprocessing.com/examples/chapter-23/example-23-4/), we do need to write a class for rectangle right? so those to can interact? There's no way we can use proccesing rect (); function? (neva)
  • I'm trying to save an array of pixels based a user selection (grabbing mouse values to set start point and length and width of selection) I think I can do it for image - though I have a hard time understanding the stupid color function - how can I do it for video? I found the Frame Object Buffer but am not sure I understand the documentation...
  • What is the best way/application to work with CSV files? (Devin)

Add Your Homework

Week 6

  • READ & WATCH

  • DO

    • Using arrays and/or ArrayLists, write a program that creates multiple instances of an object (feel free to use an object you developed previously or create something new). Here are some additional ideas if you are stuck.
      • Experiment with the resizable nature of ArrayLists. Can you add objects one at a time? Remove them after a certain amount of time or when they leave the screen? Can objects from on ArrayList trigger the birth of other objects?
      • Create an object that stores the history of its own path. This might be a drawing program where you keep a history of mouse locations in an ArrayList or a shape that moves around the screen autonomously and draws its own trail. Can you have an ArrayList of these objects (each of which tracks its own ArrayList?).
      • A String is like an array of characters. Can you create a sketch that plays with text by looping through the "array" inside a String. See: charAt()
      • A PImage contains an array of pixels. Experiment with image processing by looping through all the pixel colors of an image. This tutorial will help you get started.
      • Create a system that involves a two dimensional grid. Use a 2D array to store the data of this system. This tutorial will help you get started.

Contribute a question!

Questions | Examples

  • How do you randomize location in a particle system? (Joelle)

  • How do you enable all items within a particle system to be displayed at once rather than the waterfall examples from the Processing IDE and Nature of Code? (Joelle)

  • How can I change the hue of objects "mid-flight" without resetting their locations? (Devin)

Add Your Homework

Week 5

  • READ
  • WATCH (preview next week's content)
  • DO
    • Design a sketch in an object-oriented fashion. Try to eliminate all code from the main tab (setup() and draw()) except for the core requirements (size(), background(), etc.) and calls to objects.
      • Take something you've already done and turn something in your sketch into a class (e.g. a ball, a line, a bird, a car, a plane!)
      • Or, start fresh!
    • E-mail the code for a class to your partner. You'll get one from them too. Try incorporating the class sent to you into your sketch. Take care with naming your variables and comment your code so your partner can understand what's going on. And, communicate with each other when you get stuck!

Contribute a question!

Questions | Examples

  • I couldn't quite figure out why the color of the line drawing and the circle that go up the sketch are the same colors even though they are different classes. It seems I may have put one the objects in the wrong order, but can't quite seem to correct it. The lines are supposed to be white and the circles this pinkish gray color. (Hellyn)

  • I can't get my shark's laser beam to start at the X-coordinate that I want it to. Please help me. (Devin)

  • With OOP, how do you make an object display in front of/behind another object? (Devin)

Add Your Homework

Week 4

  • EXAMPLE CODE
  • DO
    • Re-organize the code of a previous assignment or example using functions. If you are inspired by the power of modularity, feel free to elaborate on the assignment. Work individually or in pairs (no pairs will be assigned this week.)
  • READ AND WATCH

Contribute a question!

Questions | Examples

  1. Aankit says: "For those of you wanting to post your sketches on your blog, if you haven't found it already. Rejoice!. Sorry not a question, but maybe people will see & read this?

  2. I was trying to create a function that would accept arguments and move a shape with a float return, but when trying to multiply the speedfactor by -1 to reverse direction the function would still only return a positive value. (Jake)

  3. I struggled with figuring out how to change colors for the buttons in my sketch. I couldn't quite figure out how to make the play button change one color, and the pause button change another color when pressed. Currently they both change colors at the same time. (Hellyn)

  4. Well, I figured out how to call a variable from a class. I still didn't figure out what is wrong with 'music' button variable; It works in one sketch, but in the next, when I've changed the code with if statement for X variable, I lost the 'music' . tomorrow

  5. and why adding decimal value doesn't work here: [View Sketch:] (https://www.dropbox.com/home/ICM-2013/Week-4/Neva/rect_around) (neva)

Add Your Homework

Week 3

  • DO
    • Homework: 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.
    • As an exercise, try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Moving beyond the exercise, can you invent new GUI elements beyond buttons, sliders, rollovers, etc.?
    • Create an algorithmic design with simple parameters. A good model is 10PRINT based on the examples provided here. There is also a nice discussion on the Processing forum. You can also read the 10 Print book online as a PDF.
    • Consider tying the above two together and have a GUI control your 10PRINT visualization or motion sketch.
    • Invent your own exercise related to animation and interaction.
  • READ AND WATCH:

Contribute a question!

Questions | Examples

  • So I understand how to do the "bouncing ball" sketch now. I was wondering what function I should use to add "gravity" or curves to the path of the bouncing ball, so it's not just going in a straight line. (Devin)

Add Your Homework

Week 2

  • DO

    • Create a animated application. Start over from scratch and build something with a very simple design. Focus on the logic of variables and avoid using hard-coded values. Play with mouseX and mouseY. If you are stuck, here are some ideas.
      • Come up with a simple formula to change colors gradually over time.
      • Experiment with motion using a single simple shape. Can you create a randomly jittering "nervous" square? (Here is a sample). A circle that spirals around the window? How could user interaction affect the shape's motion?
      • Use random() to create a painting system. Here are some examples.

  • READ AND WATCH:

Contribute a question!

Questions | Examples

  • Good afternoon! I had good fun working with the if/else function and in reading I noticed the "for" slip in. I think I have got to grips with it but would be good to have clarity. (Zander)
  • Apologies for asking but how on earth do I whack my code onto my blog so it appears instead of uploading a record of it? (Zander)
  • How can we add text i.e to generate score/time? (Zander)
  • Is P3D a library that I need to download and install? I thought that there was an option to change modes like the JavaScript/Java/CoffeeScript button, but I guess not?
  • I got an error that says "It looks like you're mixing "active" and "static" modes." How do I correct this? (Devin)
  • I'm having trouble making cumulatively changing variables. For instance I'd love to sequence events but use the same float acting on the behavior of the previous iteration. A rectangle crossing a boundary and thus triggering other behaviors sequentially. I'm using "if" right now but it seems heavy. (Zoe)
  • If two circles are moving across a frame and the ellipse mode of one is corner but the other is center shouldn't they behave differently when interacting with the extents? Also sizes, a circle of radius 50 will reach the width of a frame faster than one of 10 but they both bounce back at the same time. Is it whichever hits first resetting the loop? (Zoe) *My background color is completely different viewed in a web browser in JS then when I created the sketch. Any ideas?
  • I was really hoping to establish a range of coordinates so that whenever a mouse hovered over a specific ellipse that I was using as petals that it would change color. I was working on it until the very last minute, but I was not successful. Any thoughts? (Sisa)

Add Your Homework

Week 1

  • SET UP:

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

Contribute at least 1 question below. (Name optional.)

Questions | Examples

  • This is actually a very general question and something I've always wondered about when it comes to coding/programming. Any advice/tips/tricks for remembering documentation/references? (My coders always tell me that they just know that so-and-so piece of documentation exists.) Are some people just kind of rockstars at intuitively knowing about different parameters, or is it really just learning from experience? (Jerllin)
  • Have you guys heard of Resonate? It is a great festival of new media but also is a platform for networking, knowledge sharing and education? Go check the talks, you'll see Casey Reas speaking, Jer Thorp, Kyle McDonald, Karsten Schmidt.. [Resonate / talks] (http://resonate.io/main/category/talk/) (Nevena)
  • Will we get into writing functions next class? Does anyone else find the list of instructions style difficult to follow? Are there web tools for understanding Processing's coordinate system? (Joelle)
  • I was wondering how to properly rotate ellipses. I tried to do so in my homework but without success. (Devin)
  • I second Devin's question. I found [this] (http://criticalzero.co.uk/code-examples-for-rotation-in-processing-js) but I think he's only rotating rectangles, still with ellipseMode(Center) shouldn't the rotate() work? Also, I'm still working on it, but I don't think I'll be able to figure out how to post my javascript sketch on my blog. I can get it working locally, but am failing to get it on the blog. Also I noticed there was a difference in rendering between my Java and JS versions (specifically using fill() on an arc() that has a OPEN term. (Aankit)
  • I found it difficult to accurately place arcs on my sketch. This was in part due to the difficulty in mapping out lines without a graph/grid coordinate system and in part because of a long lost knowledge of trigonometry. Is there a resource I can use to refresh this stuff in the context of processing? Also, the image of my sketch is only a screen shot- I could not screen shot the image as precisely as I would have liked.(Sabrina)
  • Yes Sabrina I too am interested to know if there is a way to pinpoint navigational coordinates or otherwise find out the extents and locations of shapes in relation to each other. For instance if I have an arc and want to place a line or any other object touching it is there a way to find the coordinates of the arc besides extrapolating them manually? Snap points would be awesome but I figure it's not possible. (Zoe) *Applet publishing, how is this different than the sketch?
  • I understand how to create interactivity going forward with functions like "mousePressed" and keyPressed" however, I was unable to go backwards. Is this something deeper in events, or an inner loop that can be made after a certain number of key presses and/mouse mouse clicks? (Rena)
  • Also had a bit of an issue understanding arcs. I was trying to figure out how to create an arc/curve for lower part of the circle but was unable to find a solution. I did a search and found a sample code for creating an upper half of a circle: arc(105, 35, 50, 50, -PI, 0); // upper half of circle. But couldn't seem to work out how to inverse that shape. (Hellyn)
  • Why is the term "void" used? (Devin)
  • What is coffeescript mode? (Jake)
  • If the Draw function does not know the variable that is declared in Setup function, how can it know the Weight and Height that are also declared in Setup function? (Neva)

Add Your Homework

Links from Class

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