PComp Final update

Progress report on my PComp Final.  After collecting all the necessary hardware, we began setting up our system.  Show below is our Arduino Yun, connecting the RFID card reader and Adafruit thermal printer.


The card reader reads an NYU ID on bump, sending the card number to Arduino.  Arduino then generates a barcode receipt with that card number printed below.  For our final product, the student email (Or name, if we get that information) will print below the barcode for easier identification, and the barcode itself will print on a sticker, not receipt.

PComp Final update #1 from John Farrell on Vimeo.



First successful receipt & number printout.

At the moment, the project stands like this: The card reader gets the RFID number from a scanned card.  A Processing sketch, acting as our communication hub, displays confirmation or error messages based on the scans.  Taking the card number from Arduino, Processing saves a .csv file of the number from each scan, and automatically uploads it through FTP.

PComp Final update #2 from John Farrell on Vimeo.

The screenshot below shows the next step: Processing will signal a PHP file to run, which will read the .csv file, and check it against a column for Card Numbers in the database.  A file is sent back to Processing showing whether the number was present or not.  Depending on the answer, Processing will offer different prompts to the user.

Screen Shot 2013-11-23 at 5.28.20 PM


What remains is a lot of PHP work (Which I am learning on the go), refining our Processing order of operations, and visuals (Not to mention fabrication of a casing to mount on the wall).  Ideally, we could even have a real-time display of students with food in the refrigerator.  With 10 days left until the project is due, I think we are on track.

ICM Final Update

After some second looks from friends and the resident Danne Woo, I am making some changes in my ICM data viz.  Previously, the size of the points was mapped to the collection number, which is also what was being mapped on the Y.  This double representation of data was confusing, as nothing indicated what the point size was being mapped to, and it wouldn’t make sense to convey the same data twice.  Also, all the data points were mapped to one Y coordinate, tracking along the X axis with mouseX.  Again, this wasn’t really conveying any information.  Taking an action like what with no reason just adds confusion to the visualization, regardless of whether it was visually appealing or not.

Screen Shot 2013-11-19 at 11.55.59 PM


Realizing I needed to get back to basics, I reverted back to the vertical lines I had set up before the mouseX point, with some different styling.   As seen below in the first screenshot, I am still currently laying the data out by borough, by district.  The second screenshot shows that, on hover, the borough still highlights.  The dark gray data represents the total tonnage collected by the Department of Sanitation.  The red bar shows the trash collected, leaving that gap to represent the amount of recycling connected.

Screen Shot 2013-11-19 at 12.13.40 PM

Screen Shot 2013-11-19 at 12.13.51 PM



A lot of people in class liked the visual representation, likening it to a skyline.  They also commented on the Helvetica font, which I was hoping would invoke feelings of the city, as the font is used for all Subway signs.  It still needs significant work to present next Tuesday.  My wish list includes:

  • Highlighting the recycling data
  • Clearing up ambiguous text and axis labels
  • Remove currently non-functioning buttons
  • Insert NYC map using PImage to highlight boroughs on hover

IF that all gets done…I would like to add another layer of data.  Either looking at total borough data, which would break out to district data, or show the district data per capita.  There’s some styling to be refined as well.  But there was a lot of good feedback in class today, both aesthetically and functionally.   I hope I can get it all integrated in time.

ICM Final proposal

ICM Final (4)

ICM Final (3)

ICM Final (2)

ICM Final (1)

   ICM Final


For my ICM final, I am producing a data visualization on trash collected in New York City (**data could change…**).  After investigating waste for our initial PComp final concepts, I explored trash and waste data in the city, and began looking at this particular data set.  It shows trash collected per ton in each district in each borough, for the month of September 2011.  I have been interested in data visualization for a couple years now and, combining this data with an initial framework developed for our data homework assignment, I decided to pursue something more realized.  Looking at the work of Jer Thorpe, Edward Tufte, and Nicholas Felton has been a huge inspiration and, though my work obviously won’t be in the same ballpark, they are very helpful resources.  The graph on the “Initial Thoughts” page was the first step.  Each dot represents a district, and the boroughs are labeled for the moment.  The Y axis will show the trash by weight.  Labels are needed of course.  Below:


Screen Shot 2013-11-13 at 9.01.33 PM

I experimented with grouping the connection lines to the left…

Screen Shot 2013-11-13 at 9.02.06 PM

…then grouping them on mouseX…

Screen Shot 2013-11-13 at 9.02.22 PM

…and finally on highlighting boroughs through mouse interaction.

I’ve begun to like the look of what’s happening.  As noted in the last slide, I still have some important decisions to make.  Interactive graphic, or series of prints of static images?  Color scheme needs a lot of work.  If it will be interactive, what animations and visualizations do I go with?  What will those buttons in the top left look like and control?  Should I look up population data to help contextualize the trash data?  Should I work on trying to show was 7000 tons of trash actually looks like?  All questions I need to answer in the next two weeks.

PHP Classes

For homework, we had to make an object-oriented template in PHP.  I made a class that will hopefully be used for my PComp final (see explanation in previous post), which will be automatically adding rows to a SQL database.  The output can be seen here.  There are arguments for nNumber, netID, timeEntered, and timeEaten, currently filled with arbitrary information.  I’d like to figure out how to get them all displaying on the same row in CSV format, as I think that will be easier to enter into the database (not for sure, but I’m guessing), as well as figure out if the time() function is appropriate for the timeEntered and timeEaten variables.  I didn’t worry about formatting the output as this information will never be visible to anyone.

PComp Final

After a lot of discussion, both in class and out, Arielle, Allison and I have decided on our PComp final project (also qualifying as my CommLab Web final).  We will be wiring up the floor refrigerator to track leftovers, with the goal of preventing food waste on the floor.  As Sam said to me, “a very high-tech solution to a very low-tech problem.”  Every Monday morning, the fridge is cleaned out and old food is thrown out.  We have volunteered to handle theses cleanouts going forward to track the waste and get some exposure to what’s going on in the fridge.  This past week, our first week doing the cleanout, 23lbs of food were wasted.  For a group of college kids who are supposed to broke, it seems like a lot of money down the drain.



The basic system diagram above shows our plan.  Currently, students just write their name and date on the food packaging when they put it in the fridge.  In our system, the user will first tap their NYU ID on a card reader.  The card will trigger a printer to print a QR code label, which the user will put on their food.  This creates a record in a database of the student, with a unique ID for the QR code, as well as a time entered.  When the student eats their food, they simply scan the QR code on a webcam, which will mark the food as “eaten” in the database.  A cron will scan the database two or three times a day.  If it sees that a food was entered 2 days ago, without being eaten, it will send a reminder email to the student.  Hopefully, at the end of the week, will have a fridge free of leftovers, or (more likely), we can identify who is leaving leftovers in the fridge to spoil.

We already have our card reader, adafruit thermal printer, and touchscreen display.  Our Arduino Yun is in the mail.  Some things to note: A one-time only interaction will be needed the first time a student taps their ID.  They will have to enter their netID, which we will use in our database for the email notification.  While not ideal, the fact that it only needs to be done once is very important.  Disrupting such a casual, ingrained system is delicate, and we need our interaction to be no more complicated or time-consuming than writing your name and date.   Our real issues will be on the technical side.  Processing will act as our communication hub for the card reader, Yun, webcam and printer.  It will also have a display function for our touchscreen.  It will be outputting information to a PHP script, which will create (or modify in the case of a checkout) a record in our database.  It will need to communicate to both a QR generation software as well as our automated email service.  We will need to be checking the database for existing records at every card tap, as well as throughout the day.  With all of the hardware in place, it’s time for us to start working.  Getting up and running ASAP is a priority, as we will need all the time we can get for user testing to ensure a successful implementation.


Click Here for an updated and more detailed system diagram.

Stop-Motion Movie

Medieval Love in a Modern Time from John Farrell on Vimeo.


Stop-Motion movie for CommLab Animation, done with Kyle and Eamon.  It stars Sebastian, my ~6ft tall suit of armor, as he enjoys a fine Sunday in the park.  Fun, surprises, heartbreak, and even true love await him.  Definitely needs some touching up, as well as more attention to the sound, but pretty happy with it for a one-week assignment.

PHP Calculator

Week 2 Web assignment – make a calculator using PHP and HTML.   I chose to make a calculator that draws shapes based on the number of sides you input into the form.   Originally, I was trying to draw the shapes in PHP but abandoned that fairly quickly.  As of now, there are images stored in a variable, which are called using a switch statement.  As of now, there are 6 options.  1-5, and one secret.  Try it here

Screen Shot 2013-11-05 at 9.36.45 PM

Initial screen

Screen Shot 2013-11-05 at 9.37.01 PM

Result after entering “5”

Web Project Inspiration

One web project I particularly enjoy is Epic Exquisite Corpse.  For those unfamiliar with the idea, an exquisite corpse is a drawing game.  You and a friend would fold a piece of paper in half, and you’d draw on one side, with a few lines of your drawing overlapping the fold.  Your friend only sees the overlapping lines, and has to draw something using those lines but without seeing what you drew.  Then you unfold the paper to see the results.  It’s a game I often play with my friends on long trips, forces you to draw a little differently than normal, and usually turns out pretty funny.  Here’s an example (note the folds/drawing transitions):

This isn’t mine, by the way.


Taking that concept to a much bigger scale, Xavier Barrade created a website with 1 million available squares.  When you choose to draw, you get a randomly chosen block with a various number of lines poking in.  Your drawing must connect to all of those lines.  When you’re done, it’s entered into the larger drawing.

Screen Shot 2013-11-04 at 4.58.00 PM


It currently has ~50,000 drawings from 172 countries.  I enjoy the idea of collaborative art, and this is a fantastic example of that.  Drawing (and art in general) isn’t defined by language barriers.  Anyone on a computer can add to this giant mosaic.  At its best, the drawings flow seamlessly into one another, creating some fantastic images.  It’s great to see a fun, tangible game make its transition to the web.