The assignment for the week was to use the New York Times API in order to chart a cultural shift over time. I initially chose to track the terms “payphone” vs “cellphone” to try to see the moment in time in which cellphones made payphones obsolete.
For how simple this result is, I had a lot of trouble wrapping my head around the coding process for some reason. One big sticking point was the need to combine the date ranges for both sets of data into one complete range that would encompass both. The solution was to take one of the search terms’ date ranges, add it to an ArrayList, comb the other term’s range for dates that aren’t duplicates, use a little Java (the Collections class) to sort the combined results, and then re-export that out to a String array.
At one point, I was getting a complete graphing for “payphone” but an incomplete graphing for “cellphone” (it would only draw the results for 2oo6 and 2007, even though some debug efforts were showing that the data was still there for other years). After trying many many things and wasting lots of time to no avail, I eventually realized that the culprit was using the “==” operator instead of “.equals()” for a String array. I ALWAYS forget about this and my lazy side wishes that Processing would just let you get away with the former option. What I don’t understand is why the first result set still graphed correctly and why only the second was affected – I was using the same display code for both.
Eventually, I got it working and took the screenshot above. I found the results kind of boring, so then I set about making the program modular so that you can define whatever two strings you want at the beginning of the code and the graph scale and date range will adjust itself accordingly. When I accomplished that, I took some screenshots of some more visually interesting results:
Strange how “cassette” briefly resurfaces in 1998. I wonder if some alternate use for the term came up?
This one shows you a president sandwich. I thought it looked neat.
This visualization takes a random sampling of one-tenth of all hotels in the world and displays them in a map view by default. The points on the map are color-coded by the hotel’s star rating, with 0/unrated being the darkest orange and 5 stars being the brightest yellow. If you press S, the visualization changes to star ranking mode, in which it divides the random 10% set into proportionally-sized squares for each ranking. By pressing M, you can return to map view.
The first challenge with this project was wrangling the huge dataset into some sort of usable shape. I downloaded and went through some tutorials for openRefine, and then loaded the set it. After poking around, I noticed that some of the most complete categories included the hotel name, the star rating (after combing through and setting all unrated hotels to 0), the latitude and longitude, and the country name. In order to try to reduce the amount of data for Processing to parse, I cleaned for those categories and deleted the data I didn’t plan on using (later I ended up taking out the hotel name field, which further cut the file size by about 50%).
Once loaded into Processing, I set out trying to plot the data into a map view. I looked around for map libraries, but the most prominent one only worked with Processing 1.5 or lower. Since I was using Table classes to organize my data (2.0+), I couldn’t use it. After some experimenting, I found that mapping the latitude and longitude coordinates to the edges of the screen makes for a perfectly usable (and rather neat-looking) map. I color-coded them by star ranking by mapping their rating to green in an RGB color with red set to 255. That way, the 0-stars are red, and the hotels get more yellow the higher they’re ranked.
After that, I set about animating the map. It was around then that framerate became a major issue (the screen only refreshed once every 1-3 seconds or so). By putting in a random-selection filter, I found that limiting the data to 8% of the total produced a usable framerate, which was disappointing. (Later, I added a motion blur which let me get away with a slightly chunkier framerate, letting me bump it to 10% – it could probably go to 15 but it would start to really show at that point.)
The final step was to add the star ranking view. In order to make the squares proportionally sized to each other, I had Processing sort/count the number of hotels in each category in the setup() loop. I noticed unrated was the largest, so I mapped all the other squares against that. I also ended up square-rooting each category, so that the size difference of the squares would be exaggerated.
For my Visual Language class, I made a color toy in Processing that creates mandala-like designs using random small adjustments to hue, brightness, or saturation values depending on if the user presses H, S, or B on the keyboard.
When we were studying the pixel array, I decided to make some video mirrors. I was interested in having part of my body be in one place and part of it be in another place, so I started by making a mirror that divides you into vertical strips and displays half of them upside down. I used the modulus to divide the screen into strips. I love the modulus now; it’s my programming best friend.
After that, I wanted to make a more elaborate mirror with the same concept, reversing you on both the horizontal and vertical axes. I got the effect below when I was trying and failing to make a checkerboard pattern, but I think this looks more interesting anyway:
After learning about Arduino programming and switches in the lab last week, I wanted to make my own custom switch. The lab taught us how to program the Arduino to change between 2 LEDs when a switch is pressed, which, although thrilling to me as an electronics novice, is probably not that exciting to the everyday person. Since the result of the switch isn’t that entertaining, I decided that I wanted the actual experience of using the switch to be fun instead.
My first idea was to modify a Wooly Willy by adding wire ends to the sides of his face, so that when you give Willy a mustache or a beard, it would complete a simple circuit and switch from a red LED (labeled “dweeb”) to a green LED (“cool guy”). Unfortunately, when I did surgery on the toy and freed the metal filings, they turned out to not be conductive. I tried the same thing with 2 other types of magnetic filings, and none of them worked – they weren’t dense enough to carry a charge.
After panicking for a while, I came up with an idea for a game where you drag a pencil through a thin path surrounded by aluminum foil, and if the pencil lead touches the foil a red light goes off, signifying a loss. I brought in aluminum foil and cut a spare piece of plywood to match the foil’s width. I glued paper to the top of the plywood, and then traced and cut out a thin maze-like path in the foil terminating in a large goal area.
After cutting the foil, I glued it to the paper backdrop, and I embedded a wire end into the upper-right corner. I then took a pencil, and struggled for at least half an hour trying to reliably affix another small wire end to an equally small nub of pencil lead. After I finally got it, the lead broke. At this point, I decided to just curve the end of the wire around the broken nub so that it was more of a stylus than a pencil.
I then added a piezo that buzzes when you make a mistake and hit the aluminum foil, and I adjusted my code so that it allows you 6 mistakes before the game plays a funeral dirge and stops operating.