CL – Final Project

But this machine can only swallow money / you can't lay a patch by computer design / with just a lot of stupid, stupid signs

Lachlan Campbell, Sydney Hu, David Yang

Enter Autovendor: We made a small vending machine with a screen and physical keypad. Three typical snack items rotate in the showcase. Then, upon entering the accompanying code for an item, the machine shows a stop-motion animation, such as the machine eating the food itself with sound and video. (The self-consumption particularly is a joke since the vending machines at IMA have a reputation of unreliability.) Afterwards, users can enter their phone number to be texted a receipt, with a pun based on the animation they saw. It’s a humorous and slightly subversive piece.

Watch Sydney’s demo (2:02:56):

Reflection

In the end, I’m super proud of the work we did, and I love how it turned out. The casing production was a new experience for all of us, but the work drove us all to do something new & challenging (David designing/fabricating, me writing the software, Sydney producing the animations/puns), as well as work together on a tight timeline. At the show, people found its functionality unexpected but delightful, and even Andy Hamilton (president of NYU) liked trying it out.

Try the app

(Requires/optimized for large screens)

Code:

2019-12-15

Today was the first day of the show. We had some more software issues, which I fixed last-minute:

2019-12-14

On the hardware side, after David & Sydney’s spray-painting, microwaviness is down, and they re-glued the casing back together. But setting up the show today, we noticed tons of little issues. The display’s stand wouldn’t keep it totally upright, making the whole device tilt up, so David & Sydney painted some wood blocks for support in the back. The wire from the keypad kept the casing from being flush with the side of the display, exposing the bezel, so we routed it behind the isthmus between the display openings in the casing and taped it there.

The software had a number of bugs too. The keypad’s number wasn’t visible for anyone tall (moved it down slightly), incorrectly-written phone numbers jammed up the app (I close the receipt flow if anything goes wrong), there was a lack of feedback (I added a “sending…” label), etc. Sydney noticed some clips were running short—eventually we realized that unlike in the first versions of the animations, each animation is now of a different length, so I allowed setting custom durations on each variant animation clip. Super excited for people to interact with the installation tomorrow!

Code changes:

2019-12-12

Knowing now that we’re in the show this weekend, we internally made a timeline for integrating feedback from yesterday’s demo and getting the installation ready. We discussed a bunch of ideas, like turning the screen vertical. In the end, we decided we didn’t have the capacity to entirely redesign & refabricate the casing, but instead would spray-paint it black and inset the keypad to reduce the microwaviness.

The software upgrade I made, via Gabe’s input, is to ask if customers want a receipt, to decrease friction for viewing several animations consecutively.

2019-12-11

Today we put the machine together for an in-class demo. Things mostly worked, but we got a bunch of great feedback from Gabe & the class to integrate into the final version.

2019-12-09

At IMA with David, we made some measurements and designed the front panel laser cut/engraving design. We used two cut windows to let the display show through, then the title of the piece engraved at the top in the same font as the software.

2019-12-07

I finished the software today. It now goes through the full flow without bugs (I think!):

• Showing the 3 products spinning with an onscreen keypad that responds to keyboard input
• Upon selection, showing a full-screen video player with a random variant of the product
• When the video is done, show a modal allowing input of a phone number (or pressing a keypad key to dismiss the modal)
• Sending a receipt over SMS if a phone number is provided

Also bought the numeric keypad:

At IMA, I made hardware sketches with David. We worked together for awhile on two different plans for the architecture:

Eventually, we decided to go the extra mile with the top plan, for a more seamless design with more complex construction. David bought the acrylic at Canal Plastics, drew up the laser cut patterns, then made the cuts and constructed the box.

2019-12-06

I made initial progress on allowing multiple variants tonight, but the interface is bug-ridden and crashes frequently. Also changed the interface to use a pixel font, Press Start.

2019-12-04

We planned out the hardware and project timeline today. Optimistically:

• Friday: all software & animations done
• Saturday: all materials acquired, hardware designed
• Monday: initial construction done
• Tuesday/Wednesday: iteration & documentation

We acquired the monitor from the Equipment Room we’ll use in the project, & Sydney applied for the IMA/ITP Winter Show.

2019-12-03

I created an API endpoint for sending receipts over SMS with Twilio. It ended up being super straightforward: (using Next.js API Routes)

const twilio = require('twilio')('XYZ', process.env.TWILIO_AUTH)

export default (req, res) => {
  const { to, text = 'Testing receipts' } = req.query
  console.log('SENDING', to, text)
  if (!to) res.status(422).json({ error: 'Missing phone number' })
  const body = `
RECEIPT---------
${text}`

  twilio.messages
    .create({ body, to: `+1${to}`, from: '+18649736177' })
    .then(message => {
      const { date_sent, status } = message
      res.json({ date_sent, status, body })
    })
    .catch(error => console.error(error))
}

2019-12-02

David, Sydney, & I made some changes to the idea today. For posterity, the original description:

We’re making a (model of a) vending machine, with the contents projected onto the face, and a physical keypad. Upon entering the code for an item (no payment), the item will come to the front and the viewer will watch the machine eat the item itself through sound and video. It’s a humorous piece, a commentary on the American obsession with convenience, and also a joke since the vending machines at IMA have a reputation of unreliability.

We auditioned a whole set of ideas of varying scope, before deciding on a fairly straightforward evolution from the original conception:

• Instead of projection, we’ll use a regular computer monitor to simplify construction
• We’ll build a case for the display by laser-cutting acrylic—will make the project a lot more polished
• We’ll use a physical numerical keypad
• On the idea side, instead of just the self-consumption—which becomes predictable & unsurprising after 1 or 2 looks—we’ll have a few different animations, randomly picked, for each of the 3 products
• After viewing an animation, users can input their phone number to have a “receipt” texted to them

2019-12-01

I made the basic UI for the vending machine today. It shows looping videos of all the products, with their ID numbers below. On top, there is a keypad, which can be controlled via keyboard as well. (Use delete to clear, enter to submit.) Upon selection, a video plays full-screen with the food being consumed, & closes when finished. I used React/Next.js with styled-jsx to build the site.

2019-11-26

Today we threw out our previous concepts and came up with the idea of the vending machine. Here was a whiteboard sketch of figuring out the early structure: