Midterm: paper towel gifs

For our midterm, Rushali had the great idea of sensing toilet paper use wirelessly and keeping track of it. After making a list of potential sensors that could detect movement and looking at the hardware in the bathroom, we realized that it would be hard to detect the kind toilet paper use we were interested in sensing and measuring. But, the paper towel dispenser had a springs in it that we thought could easily detect a pull with a simple stretch sensor. Next, we decided our output triggered by the pull should be a gif. We wrote a p5 program that pulls from the giphy API to create a series of arrays, and auto-updates at a set time interval. When a paper towel is pulled out of the dispenser, a random gif is pulled from the array, and updates each time a paper towel is pulled.

img_1541
Non-wireless arduino & sensor installation

Actually setting up and deploying our circuit into the real world proved challenging! But we were able to hook everything up and insulate our circuit from the metal in the dispenser to get our prototype working.

After we had a wired version working the way we wanted, we set out to make it wireless with bluefruit! Once we had our sensor installed, we didn’t want to keep removing it and putting it back, so we tested out our wireless circuit with a potentiometer first. Then, we hooked everything up in the paper towel dispenser and it kind of worked. There was a noticeable delay between when the paper towel was pulled and when the gif changed.

As next steps we discussed potentially keeping the data on paper towel use, since right now we aren’t saving it or keeping track of it in any way. Of course it would also be great to improve the wireless functionality and try to keep it running for a longer period of time. I imagine we could also serve our p5 sketch so that anyone could go to our app and see the gifs change as paper towels get used.

One concern we had is we made using paper towels more fun, so we might be encouraging their use! We thought it might be better to show deforestation gifs. Either way, it was a great way to experiment with sensing things in the real world.

Valparaiso Chile logo

I chose to make a logo for my favorite city in the world: Valparaiso, Chile. My mom is Chilean and my grandmother lived nearby for many years, so I’ve visited several times. It’s a port city that thrived before the Panama Canal was built, and has struggled economically since. It’s distinctiveness comes from being built over several hills. The sidewalks are often steep or simply stairs, and there are several elevators to bring people up and down the biggest hills and the steepest parts. Some are over 100 years old! More recently it has attracted artists and is known for it’s graffiti and bohemian scene.

Current logo

My Logo

Originally, I purposefully tried to avoid the more expat/bohemian elements of the current culture, and make something that the people there would recognize. I abstracted three iconic parts (which is perhaps already too many) to begin the name of the city, and the rest of the letters lay on the steps. I tried to maintain the expressiveness and color of the current logo. My mom was born there and she understood and was excited by all the essential characteristics, so that seemed good to me. She really loved the steps!

I changed the height of the A based on feedback–it kind of didn’t make logical sense with the rest of the word. I also played with adding trolley cables. Ultimately, I didn’t think this was successful.

valpo-final

Final version

I slept on it and decided it was just way too much, and created a version where the elements are even further simplified, and got rid of the trolley that was complicating the A. I maintained the elevator and there are tiny steps on the V. The font was actually an accident (I intended to maintain futura, and the smaller text is futura condensed), but after typing it out, I liked the only slightly varying weight of myriad and thought it looked good once I played with the letter height.

valpo-final_new

On a tourist map:

logo_map2

Sketches and previous iterations

img_1528     img_1527

screen-shot-2016-10-22-at-5-31-59-pm        screen-shot-2016-10-22-at-7-26-47-pm

Iconic aspects of Valparaiso/Source images

Graffiti

    

     

Architecture

     

doors

     

Elevators

     

     

Trolleys

trolly     va01

stamp

Port: ships, containers, cranes

 

Serial: p5 vs node

This week we experimented with passing serial from sensors through different programs, and using serial to control things on the web or in real life!

Troubleshooting

I initially couldn’t get p5 to list the available ports and couldn’t figure out why since I copied the code from the lab. I went back to the code from the synthesis examples to check, and these didn’t recognize my usb port either. I also tried switching to another usb port. Finally I figured out it was because the serial control program had been updated. Everything worked fine with p5 after I downloaded the new version!

It was a good opportunity to experiment with node, though I eventually got stuck when I went to interact with a webpage in the browser. I just used p5, but it would be nice to figure it out.

hating the p5 web editor
hating the p5 web editor
screen-shot-2016-10-16-at-8-16-56-pm
Using node

Serial events p5 versus node:

screen-shot-2016-10-16-at-8-21-13-pm

screen-shot-2016-10-16-at-8-22-10-pm

 

Business Cards

This week we learned about composition, and were tasked with creating a design for a personal business card. I do data analysis full-time, but I’ve been moving toward data visualization at ITP. I knew from our typography exercise that I wanted to use Raleway for the font. As an initial step, I printed out my name and information in a few different point sizes and weights. I hoped to get the process of analysis and visualization across, and to showcase a few different projects, but showing just one was plenty of work. There are many components of a good data visualization that don’t work well on a static and small business card, so I abstracted the elements to tell a story.

The final version:

final

final

 

 

 

 

 

 

 

In earlier sketches, I developed the “disorganized data” to “organized data” visualization, but I wanted it to relate to something real, meaningful, or something I’d at least worked on before. I explored the idea of using data from a map of NYC recycling I made last semester, or a project I had done on women’s representation in government. I moved away from the women-in-government idea after I didn’t find a good way to summarize the data (for now). There are 96 countries that have more women in their respective parliaments than the U.S. does!

firstdraft

My final idea was the connect the data on the front of the card to the community districts in NYC that I had mapped for the recycling project. The bars organize the community districts by borough. It seemed like too much to include words and numbers on the back, so instead I abstracted the outline from the base map, and included a link so curious people could check out the entire thing. The colors of the boroughs on the front correspond to the outline of the colors of the boroughs on the back. I used a diagonal line to take advantage of what we learned in class about composition: that the eye moves from the top left and the weakest portion is the bottom right. I extended the line to the back, hoping to convey that this is the logical 3rd portion, and that all the parts are related. Printing, folding, and securing the front and back with surface mount was another challenging part that resulted in some imperfect cards.

folded

Some good feedback I’ve gotten since showing the final product around is to add a QR code to the back that links to the map, or to outline each of the community districts in the borough color. They seem like good ideas to explore in a future version!

Analog Out labs

This week we worked with analog out, using it to control a servo motor and a small speaker. To create sound, we used the tone function and the pitches library.

I used a photocell as my variable resistor for servo motor control, but I also tried building my own FSR with velostat. I got normal readings before sewing everything together (with resistance varying depending on how close the probes are to one another) but then got really wild unpredictable readings when I tested it after.

test2 test1

I didn’t end up connecting it to my circuit because I wasn’t sure what value resistor to use. I wonder what happened?

 

Coffee/Beer/Carbs/Please don’t judge me

Color Hue Test

colorhuetest

 

Color palette of food/drink before and during ingestion

colorportrait_final

colorpalette

For the color palette of my life I chose to photograph everything I ate and drank for about 75 hours. I chose food and drink partially because I was concerned that this would end up being a project about my office environment, but largely because I’m somewhat fascinated with the phenomenon of people photographing food and presenting it on social media. Sometimes I do like looking at people’s food (I have instagram-searched dumplings, for example), but a lot of the time I find it unappetizing. Also, since people are performing on social media, the food they post is selected based on various criteria (deliciousness, trendiness, etc) depending on the person. I wonder what their diet might look like outside of the curated version they present to the world.

I wanted a full data set of everything I ate and drank, but since photographing my food before eating it isn’t part of my eating ritual, I usually remembered this project some (or several) bites in. For the purposes of the assignment, which is actually about color, I also eliminated some ‘duplicates’ (my second cup of coffee/water from the same mug). Creating the composite image made the sad sequence of take-out apparent, but was an interesting color study. In isolating the colors themselves, which are mostly brown-orange, I became a bit nauseated.

I don’t usually eat sour patch kids, but I thought it was interesting that this, the mango, and the tomato on my bagel were really the stand-out, brightest colors. I think this would look different at the beginning of the week, when I have more mental energy to devote to eating vegetables, or in the summer, when produce surrounds me more. I’m not particularly proud of my role as busy-metropolitan consumer in the mess that is American food culture. Perhaps this palette is another visualization of problems related to it.

While adopting the practice of photographing food, I went to see Ukeles’ Maintenance Art exhibit at the Queen’s museum and found these standard colors for glassphalt, the processed pieces of recycled glass that are added to asphalt. Inspired by the process of transformation that they represented, much like the consumption of food, I applied my color palate to an image of glassphalt.

glassphalt_colors
Standard glassphalt colors – I would like to research these more but google wasn’t a helpful start

final_abstract

I focused on a brown of which I think there were varying shades and tints in my diet, with small amounts of the brighter colors I ate.