Skip to content

Homework Shiffman Wednesday

Jump to bottom Edit New page
aj701 edited this page Dec 22, 2014 · 233 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 your assignment.
  2. Contribute a question.
  3. Post documentation. Something visual + your code. e.g. Blog post with code, screenshots, video, or a web version of your sketch.
  4. Place a copy of your sketch folder in our class' shared dropbox folder. (Look for it in email.)

Final Project Documentation

  • Please post your final project documentation to a web page (blog post is fine) and link next to your name below.
  • In class presentations will be approximately 10 minutes each.
  • It's up to you to figure out how to best document your project, but I suggest you include the following:
    • Title
    • Brief written description
    • Visual Documentation: web applet, images, video, etc.
    • References: links to related projects, code samples, etc.
    • Source code (please cite your sources in the code comments)

Final Projects

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 ~10 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:10 - 1:25

  • Song, Nick, Cole, Binyao, Soni, Upasana/Martin

Group B Presenters: 1:50 - 3:05

  • AJ, Rebecca, Marc, Brady, Xi, Melissa, Tommy

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)
  • If you are collaborating, please consolidate the list below!
  • Plan to present your idea in ~5 minutes leaving about 5 minutes for discussion.
  • Here are some sample final project proposals.

Proposals

Week 8

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 results.
  • Visualize weather data

Questions

  • When using the splitTokens() function to clean the data. What does "\b" "\t" "\n" "\f" "\n" "\" each represents for? (Brady)
  • What's protocol for using images in a database? (cole)
  • Can you go over accessing all rows in a data base then using that info to create multiple objects? I understand there's a for() loop involved, but I've got a mental block on how it works when you want to pull from specific rows instead of all of them by invoking i++. (cole)
  • Why can't you initialize a Table before setup()? (cole)
  • How can I get my program to automatically parse the text and pull in images that match? Right now I've ghetto-rigged it to pull in images from pre-matched strings. (cole)
  • When using data from a CSV file, do you have suggestions for working with something that has multiple tabs or worksheets? Something like this [file] (https://www.dropbox.com/s/e42xzfk5l6vo1rt/Cables%20analysis.xlsx?dl=0), for example. (Rebecca)
  • Can we go over how to convert strings to ints or floats from a table? When I loaded in my CSV file, Processing would only load in certain numerical data as a string. I got a bunch of great suggestions over the ICM list but am still having trouble implementing them. (Rebecca)
  • How can I load text data from several files and make it all together at once? What I want to do is to read 100 articles and count word. And how can I sort top 10 out from the lists I counted ? (Sehwan)
  • How can I get rid of the article(a, an, the) and conjunctions (and, but, etc) when I use 'splitToken'? Or, is there any other function to do that? (Sehwan)
  • How do you go about plotting data on a map? I know you've got to have latitude and longitude to plot, but do you need to work with another map API? or is there a library in Processing for this? Not sure where to start as far as geo data goes. (Rebecca)
  • Can we go through an example of using array functions? I'm sure I could have written my program in a much more efficient and less confusing way, but I'm struggling wrapping my head around them. (Song)
  • Probably a REALLY silly question but: how do you download a file from github? I'm trying to download a CSV from [here] (https://github.com/abrookins/go_iching) but it will only download as an HTML file. (Rebecca)

Add Link Your Homework

Week 7

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

Questions

  • Why is % "useful for keeping shapes on a screen"? (As used in the linearImage example.) cole
  • What's the proper use for createImage? And where does it go in the sketch? cole
  • Can we walk through the LinearImage and/or the Pixel Array examples in Processing? There are a few things I don't totally understand in that code, for example the use of modulo (like Cole asked about) and the use of set (). (Rebecca)
  • Tried to mirror the webcam by using "(cam.width - x - 1) + y * cam.width)", but ended with funny effect which only made half of the screen work. What is the correct code for mirroring the cam? (Brady)
  • For Dan, or any of the 5/6 people who used it: What is the "gab" library for openCV? (That's open computer vision, right?) cole, again
  • In what way is color pulling the color information from every pixel? What's the difference between using that and red() or blue()? cole

Add Link Your Homework

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.

Week 6

Using arrays, write a program that creates multiple instances of an object (feel free to use an object you developed previously or create something new). Here is an example you can use as a model. You should probably stop here, but here are some additional (more difficult) possibilities.

  • 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? See this example as demonstrated in class.
  • 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?). Example 1 Example 2
  • Once you have an array of objects, you can have each object check every other object with a nested loop. Try incorporating this idea into a sketch by having objects react to intersecting with others. Example demonstrated in class
  • 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(). We'll get into this in more detail during the data week.
  • 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. We'll get into this in more detail next week.
  • 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.

PREPARE FOR NEXT WEEK

  • Videos???? They do not exist yet, but they will soon for images and pixels. Stay tuned.
  • The same material can be found in chapters 15 and 16 in Learning Processing. You can also read this tutorial on processing.org.

Questions

  • So, I have three questions: One) Originally, I was trying to figure out how to make the cars stop whenever another car would collide/hit another instance of a car. I know it’s possible but how would I do that? Two) Let’s say I have an interactive artwork that makes me input the number of stars I want, how do I write my code to cater to new data? For example, can I dictate the number of stars in my artwork depending on the stars visible in New York? Three) I put function stroke(); in my Stars class. It ended up affecting one of my buildings (leftmost) and erasing the border. Why so? Is there something wrong with my code or is it just a program fluke?
  • With the following code, what reason might there be that y less than 0 returns those new y & x values, but y greater than height does not, even when objects clearly exceed height?
if (y>height || y<0) {    
  y = y * -1;
  x = x + (random(-2, 2));
}
  • Can we look at how to create our own img from, as you suggested, a block of code in setup()?
  • Can we clarify variable scope as it relates to objects? For example: I have a function that I wrote outside of my object to draw lines in a certain way, and I’m calling it inside of my object. Right now, the variables are separate but there’s one variable I want them to share (lineWeight), which is currently declared and initialized within the object. Is there a way to pass a variable from the object into this function outside of it? (From what we've learned, I don't think there is). Or is there another way to set up my code so that they can “share” this variable? (Rebecca)
  • I tried to rewrite my IChing hexagram objects so that I can generate random configurations by picking a value of either 0 or 1 and having that dictate whether the line is unbroken or broken. I can't get my code to work and I can't figure out where I'm going wrong. I keep getting the error "Type mistmatch, 'int' doesn't match with 'boolean'" but I'm not currently using boolean variables anywhere in my code. Full code is here https://gist.github.com/rlieberman/d4a3c828b303d911b4ff (Rebecca)
  • I'm still a little bit confused as to how I'm using the array in [this code] (https://gist.github.com/rlieberman/ee0f34a3823e0cc60dd1), since I'm not declaring it in the way I saw in the book and the syntax looks a little bit different. Am I using an array here as a variable that stores 6 values? Can we go over some uses for using arrays in this way (as opposed to just using one to create 100 instances of an object)? (Rebecca)
  • I'm still stuck on making multiple classes communicate. I think Rebecca's getting at that too, maybe. ©
  • Can you give us some insight into techniques for building a lot of code? I.e where's a good place to start? I'm currently writing sort of haphazardly and then rearranging things into classes and blocks. I have a feeling this is one of those "if your way works, it works" things. But I'm looking to be a bit more efficient.
  • I’ve used [an array] (https://gist.github.com/rlieberman/ee0f34a3823e0cc60dd1) to store a list of lines that are either unbroken / broken aka a hexagram. Then I created an array of 6 hexagrams, but they all have the same configuration of lines. I tried to access the configuration variable (which is an array) by doing the following: hexagrams[1].configuration = {false, false,true,true,false,false,true}; I got an error saying “Array constants can only be used in initializers.” What is the proper syntax to access the configuration variable? Or is there a better way to do this. (Rebecca)

Add Your Homework

Week 5

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/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 / documentation? Were comments helpful? (If you are feeling saucy, you could try to use github for this collaboration.)

PREPARE FOR NEXT WEEK

ASK QUESTIONS: Contribute questions below. (Name optional.)

Questions

  • Upasana: How can I change the direction of velocity when a particle hits the bottom of display window?
  • Song: n/m: I can see how passing arguments via object functions gets tricky when arrays are implemented in initializing objects. Is it bad practice to pass arguments for an object through the function for that object? (i.e. passing an argument for a bubble's color through display) Is it best/better practice to do this through the constructor when an object is initialized?
  • Can we go over PVectors and how to use them (for example, how to use them to specify an x,y or a size of an object)? I understand they're a class but I couldn't figure out how to use them as parameters for objects in my code. (Rebecca)
  • How can you introduce timing to objects appearing on screen? Do you do that in the draw loop or in the constructor? (Rebecca)
  • Can we review overloading functions and how that might be useful to us when we're making objects? (Rebecca)
  • Can we touch on a) how a texture generated through loops (like our rectangle grid) can be used as a fill for an object, not the background, and b) how a complex texture, for instance one created with noise(), can be implemented alongside other activity in draw without slowing down the sketch too much (this seems like the problem with the bubbles in the video, but P2D didn't seem to work in this case. (Nick)

Add Your Homework

Week 4

The goal for this week is to start organizing your code into modular and reusable parts. We'll start with functions (before moving to objects next week). Work individually or in pairs (no pairs will be assigned this week.) Some exercise ideas for you to pick from:

  • Take a previous assignment with code in setup() and draw() and break everything out into separate function.
  • Take the idea for a design and break it out into its own function. Add parameters to the function so the design can be drawn differently based on the selected parameters. Draw three or more instances of the design on the screen to show the differences possible by changing the parameters. Here is the Robot example referred to in class
  • Create a design from a recursive function. How could you animate or change this design over time? Can you make it interactive or have it controlled with random(), sin(), or noise()? Here are some samples as demonstrated in class.

PREPARE FOR NEXT WEEK

  • Videos 8.0-8.3 cover objects/classes Processing.
  • The same material can be found in chapter 8 in Learning Processing.

ASK QUESTIONS: Contribute questions below. (Name optional.)

  • Can we review different return types for functions (boolean, etc.) and perhaps go through an example (besides just "void")? (Rebecca)

  • In my [homework] (http://www.peachriot.com/icm-week-5-making-hexagrams-with-functions/#more), I created functions to create broken and unbroken lines but I hard-coded the X, Y values to create the 6-line hexagram shapes. How could I integrate loops into this to repeat the lines so I don't have to specify the values (right now they're all entered manually)? Could I use loops even though I have two kinds of functions? I think this question will make more sense if we take a look at my code. (Rebecca)

  • how to make the background music repeat again and again?

  • can you teach us about the modulo operation? - Tommy

  • How would you implement movement into a sketch created with recursive functions? Mine kept failing. - Nick

Questions

Add Your Homework

Week 3

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.

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

PREPARE FOR NEXT WEEK

  • Videos 7.0 - 7.3 cover conditionals and loops in Processing.
  • The same material can be found in chapter 7 in Learning Processing.

ASK QUESTIONS: Contribute questions below. (Name optional.)

Questions

  • Could you explain set() and get()? Because I could not understand them in processing reference. Thanks!
  • Can you go over the rectangles progressing in a spiral example? ©
  • In video 5.4, I still don’t understand why speed * .9 breaks the bouncing ball. Can we review why that is? I encountered some similar glitches when I was writing loops. (Rebecca)
  • For reusability with functions, how would you use the star() function from video 7.3 in a loop? (Basically how would you do the exercise you give at the end of the video?) (Rebecca)
  • Can we go over how you would change the size of the squares in the grid relative to the distance from the center of the screen (in addition to the color) in [this example] (https://vimeo.com/107035486)? (Rebecca)
  • How can you make a pattern [like this] (http://a1.dspnimg.com/data/l/533736565620_4z8XVFoS_l.jpg) where the little squares alternate? (Rebecca)
  • How would you make a dial GUI -- i.e., make the rotation of a shape dependent, say, mousePressed + mouseX, and that rotation causes an animation? [Nick]

Add Your Homework

(post as a pair or individually, either is ok)

Week 2

  • DO: Create a animated application. You could build off of your first week's assignment or start over from scratch and build something with a very simple design. In general though I would suggest simplifying what you are drawing so you can focus on the dynamic elements. Focus on the logic of variables and avoid using hard-coded values. Play with mouseX and mouseY. Here are some ideas if you are feeling stuck.

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

  • PREPARE FOR NEXT WEEK

    • Videos 5.0-6.6 cover conditionals and loops in Processing.
    • The same material can be found in chapters 5-6 in Learning Processing.

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

Questions | Examples

  • Is there a better way to create a path for an object than a parametric equation? ©
  • I noticed that despite my r, g, b values being ties to the (translated) coordinate system, there is a slight change from the initial rotate to the ones that follow. Why? ©
  • How can I change the speed of my objects more easily. I.e. How can I have several circles orbiting the same circumference at different speeds? ©
  • It's weird that when I change JavaScript mode and run the sketch, I couldn't see my sketch on the web browser. It's gray and show nothing.
  • How can an animated fill be given a custom direction (instead of either from the corners or from the center)?
  • I’m running into [some wacky layering stuff] (http://www.peachriot.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-16-at-2.46.57-PM-1024x851.png) with my pizza when I try to change the size of the pepperoni using mousePressed(). I know it’s because of something to do with the setup vs draw and where the background is, but I can’t figure it out exactly. how do I get the new pepperoni to overwrite the old ones altogether so that the cheese is always being drawn underneath? (Rebecca)
  • For drawing cheese (or anything for that matter), is there a way to set where the mouse starts instead of 0,0? Also, how do i restrict the area in which i can draw the lines? Let’s say i just want to draw cheese on the surface of the pizza but not anywhere else? (Rebecca)
  • I made [this sketch] (https://vimeo.com/106343974) of circles that randomly appear on the screen in different sizes. I added a mousePressed() event so that every time you click the mouse, the background color randomly changes and wipes the drawing clean. I wanted to try a version where every time you click the mouse, the stroke color of the circles changes but I'm having trouble figuring out how to do it. I was able to get the stroke colors to randomize in void draw() but not in mousePressed. (Rebecca)

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.
    • The basics of drawing in Processing are covered in videos 1.0-2.1 and in Learning Processing chapters 1 and 2 (see PDF via e-mail).

  • PREPARE FOR NEXT WEEK:

    • Videos 3.0-4.3 cover flow and variables in Processing.
    • The same material can be found in chapters 3-4 in Learning Processing.

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

Questions | Examples

  • Cole: When I tried to pull in an image for the background an error told me that the canvas has to be the same size as the image. Can you have the program read the size of the image file and, on run, automatically make the window that size?
  • Cole: Is there a way to mouse over and find the location of a pixel? (E.g. The way it works when you do a screen grab on Mac).
  • Cole: Can you explain the radian inputs? I.e. PI, HALF_PI, etc...
  • Cole: Is there any way to create a novel shape, and then fill it in?
  • Sehwan -- Cannot export my 1st week coding assignment to web for documentation, even though I did according to your directions with using Java script convert. (still trying...)
  • Sehwan -- How can we load fonts to our programming to show on screen?
  • XI: Can you explain the difference between stroke(rgb), stroke(v1, v2, v3) and stroke（gray）? Are stroke(rgb)and stroke(v1,v2,v3) the same?
  • How can we automate generation of a shape or pattern that changes based on set increments, e.g. the size of an ellipse increased by 10 pixels each time it is redrawn by the sketch?
  • Martin: Is there a way to put a grid with coordinates on the screen?
  • Song: How can we simultaneously scale the size of the Processing screen and any sketch elements proportionately? (i.e. making the screen x larger and making any elements x larger).

Add Your Homework

  • Cole -- Untitled (Self Portrait in Processing) -- This was fun to mess around with. Especially because seeing the code translate into graphics feels a bit like wizardry. I'm excited to start making thinks move and interact. I went for round 2 and made this guy too. Untitled (Self Portrait in Processing 2).
  • Yingjie -- Moon Phases -- Interesting progress for drawing graphics through typing codes. Also need to pick up the maths which has been forgotten for a long time.
  • Sehwan -- Re-generated my work -- I re-generated one of my art-pieces. I choose to describe my poster which is designed in 2005,’Typo Janchi’.
  • Soni -- A reptile -- I tried to draw a couple of different things to get used to processing. I was really excited that I can draw with code, but I struggled a little bit with using arc(), rotate(), etc.
  • Martin -- [Skyhigh ITP] (http://www.martsromero.com/?page_id=12) -- I had a lot of fun doing the homework but this really epitomized what Shiffman said in one of his videos, "The Philosophy of Incremental Development." I came with a plan but then had to reorganize everything.
  • Tommy -- [Mondrian] (http://www.tommypayne.org/?p=86)
  • Andrew -- [Night Ninja] (http://ajlevine.com/itp/2014/09/09/assignment-1-a-ninja-in-processing/) I had fun working with different 2D shapes to create a character, I can't wait to keep moving on these! :)
  • Nick -- Values I wanted to start exploring depictions of light within Processing, and try to play with texture.
  • Song -- [Processing Sketch 138] (http://www.songhitp.com/?p=22)
  • Xi--line monster
  • Marc -- Jazzper
  • Rebecca -- Pizza Pizza I had a lot of fun with this assignment, though arc() is still incredibly confusing to me. Also found visualizing the coordinate system and placement was a bit difficult for my brain, maybe will take some better planning next time.
  • Upasana -- [Perspective, Illusion of depth] (http://www.upasanajain.com/?p=50)
  • Binyao --Big Face Cat

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