Skip to content

Homework Roopa Tuesday

Jump to bottom Edit New page
CarChi edited this page Dec 14, 2014 · 171 revisions

Guidelines

Each week you must do the following:

  1. Complete the assignment.
  2. Post documentation of your work. Something visual + your code. e.g. Blog post with code, screenshots, video, or a web version of your sketch.
  3. Place a copy of your sketch folder in our class' shared dropbox folder. (I will send a link via email.)

Final Project Documentation

Post a link to your final project documentation here by Friday, December 12.

WEEK 9

###Final Project Proposals

Please link your name below to your final project proposal. It's up to you to figure out how to best demonstrate your idea, but I suggest you include the following:

  • Title
  • One sentence "What is it"?
  • How did you become interested in it?
  • Who is the audience?
  • Something visual for us to look at in class: drawings, images, video, etc.
  • A sample Processing sketch that demonstrates a first step
  • References: links to related projects, code samples, etc.
  • Questions for the class (conceptual or technical)
  • Plan to present your idea in ~5 minutes leaving about 5 minutes for discussion.
  • If you are collaborating with anyone (inside or outside of class), please let me know!
  • Here are some sample final project proposals.

Get laptop and phone use out of your system before class. This is a strict lids down session.

Post Proposal Here:

Week 8

  • READ:

    • Chapters 18 and 19 in Learning Processing (use the PDF, not the hard copy book, as there are tons of changes to the data objects in Processing 2 and 3).

  • DO:

    • Develop a project that uses an external data source. For this project you should document your work in a blog post (and link below) in addition to creating the Processing sketch. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
      • Create a game that saves a high score list to a text file.
      • Track personal data over the course of a few days (exercise, sleep, computer use, eating, etc.). Enter the data into a CSV file and visualize.
      • Count word frequencies in two different text sources (i.e. two different authors, two different newspapers, two different political speeches) and visualize the concordance.
      • Visualize weather data
    • The people in bold will present their work next week.
    • Email me by Sunday night with a topic not yet covered in class that you'd like to explore next week. Examples: 3D, sound, PVector, p5.js, etc.

Post Homework Here:

Week 7

  • READ AND WATCH:

  • DO:

    • 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. 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.
      • Make a slideshow of images. Check out this Crossfade Effect.
      • Make a "VJ turntable" for video. Check out Movie Scrub.
      • Use OpenCV face tracking and create a particle system that emanates from a person's mouth or eyes or. . . .?
    • 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.

Post Your Homework Here:

Week 6

  • READ AND WATCH:

    • Chapters 6 and 9, from Learning Processing, Chapter 23 for ArrayLists.
    • Videos on Pixels. Previews next week. (Will be online on October 15)

  • 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.
    • Post a question about this week's assignment or content below.

Post Your Homework Here:

Post Your Question Here:

  • Your Name (optional) -- your question.
  • Catherine -- how do i pick out one specific object in an array to change its position?
  • Catherine -- From Ch 9 Learning Processing - Re arrays "This size must be an integer. It can be a hard-coded number, a variable (of type integer), or an expression that evaluates to an integer (like 2 + 2)." How can the size argument be a variable if the size of an array is fixed and cannot be changed?
  • Edson -- When using different images in the same class, how can I randomly distribute the images in different layers of visualization? In my attempt, I'm calling them with different For loops, which make the last one overwrites the previous ones? (maybe I'm not being very clear, I'll explain further in class).
  1. If I don't move the index values upwards in the array, I do not see my program falling apart.It still runs with an insignificant difference but I don't understand how/what that is. - Supreet
  • David - How do I edit each array point separately (say specify a distinct color for each dot)

Week 5

  • READ AND WATCH:

  • 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.
      • For example: Consider building a particle system. A particle system can be used to simulate: rain, snow, fireworks, explosions, smoke, etc. For this week, you would create a Particle class to describe a single particle and try to get two particles on the screen using separate variables. (Then next week, after we learn arrays, you would visualize hundreds (or thousands) of particles on the screen.)
    • E-mail the code for a class to your assigned partner on the wiki. You'll get one from them too. Try incorporating the class sent to you into your sketch. Write some thoughts about this process on your blog -- Did anything not work? Could you follow your partner's code? Were comments helpful? (If you are feeling saucy, you could try to use github for this collaboration.)
    • Post a question about this week's assignment or content below.

Partners:

  • Jaclyn & Catherine
  • Edson & Michael
  • David C. & Natalia
  • Caroline & Joanna
  • David B., AV & Supreet

Post Your Homework Here:

Post Your Question Here:

  • Your Name (optional) -- your question.
  • How do I use text() to display the output of a variable? e.g. using SPACEBAR to change what text shows... (David)
  • Often, when using a contributed library (installed through the in-app feature), Processing says "the package ... does not exist. You might be missing a library". Its in the folder and marked as installed in the library menu.... What do I do? (David)
  • How do I deal with lag in a sketch? When things slow down or crash...
  • If gravity and speed are both float variables (defined by us), why do they need to be added in order to change direction and make an object bounce? Why does adding just to speed not work? (SM)
  • Joanna: since blendMode(); functions affect all pixels in the sketch (we cannot apply them only to a certain 'layer' in our Processing drawing like we would in Photoshop or AE), what other options do I have if I want to change a blending mode of only one image in my sketch without affecting everything else? Do I have to write my own function for that? If so, how would I do that?
  • Can I use mapping within a lerp function?
  • Michael: How can I schedule separate events to occur at different points in time within a sketch?

Week 4

  • READ AND WATCH:

  • DO:

    • Re-organize the code of a previous assignment or example using functions. Keep your draw() loop as clean as you possibly can, and do as much as possible in functions. If you are inspired by the power of modularity, feel free to elaborate on the assignment. You can work individually or in pairs (no pairs will be assigned this week.)
    • Post a question below about this week's content or assignment. Here are some examples of how to ask or phrase questions!

Post your homework here:

Post your question here:

  • How do I make "void" objects interact without using variables?
  • David B.: How can I make functions to control multiple objects that are defined with different variables? / How can I define multiple objects with the same variables, but have them act independently (without using relativity)?
  • Catherine: I was unable to include my if/for/else/for statements into a function and draw. Why?

Week 3

  • READ AND WATCH:

  • 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. Start by working in pairs according to the wiki. 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. Some ideas:
      • Recreate Pong. Remember, start by thinking about all of the small elements you need in order to make the game and only combine them into a larger program when you have each part working.
      • Continue your GUI elements from in class this week. Examples on Github here.
      • 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.
    • Post a question below about this week's content or assignment. Here are some examples of how to ask or phrase questions!

Post your homework here:

Post a question here:

  • Your name (optional) -- Your question.
  • How can I create a counter for animated games? e.g. to show a score.
  • David & Joanna: How do I say: "if either" or "but if" in code? For example, "if Car A crosses the END line firs announce Car A the winner, but if Car B crosses the END line first announce Car B the winner"? Would it be a form of "if else if" statement?
  • Michael: How can I create a pattern of ellipses?
  • David B.: Is there a limit to the number of conditional rules for a single sketch?
  • Edson/Supreet: How do you import audio and make objects blink at time intervals?

Week 2

  • READ AND WATCH:

  • 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. Start by working in pairs (according to list below). You can post together or break off and complete the assignment individually. If you are stuck, here are some ideas.
      • 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.
    • Post a question below about this week's content or assignment. Here are some examples of how to ask or phrase questions!

Add your homework here:

Post your question here:

  • AV -- When I exported from processing to javascript for embedding it into web, the output's quality is changed to bad quality. Performance is also going bad (ex. framedrop..). I want to know why and how I improve quality when I upload it into web.
  • Joanna -- is there a simple way to make a stationary object rotate around its center (without using trigonometry)?
  • Edson -- How to put boundaries on diferent "if" funcionts (such as increasing size and speed) and avoid the shape to escape the screen?
  • David -- Please explain object classes, I don't understand them.
  • Michael -- Is it possible to create a "Draw" program inside of a "mousePressed" function? For example, telling Processing to begin drawing something over and over, but only after I click my mouse?
    *Jaclyn -- Can we go over best practices fo embedding code in blog posts? I was also having trouble exporting from processing to javascript.
  • Your name (optional) -- Your question

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. Embrace the constraint of a static drawing for this week.

  • READ AND WATCH:

Add Your Homework Here

Processing on the Web - Javascript

  • 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.
Add a custom footer
Add a custom sidebar
Clone this wiki locally