0 0 0

A Design Week Portland Installation

Codes & Arrows


Chris Erickson,  Creative Director 

Lucas Swick,  Technical Director 

Chris Arth,  Designer 

Pony Van Holtz,  Back-End Developer 

Eric Van Holtz,  Front-End Developer 

Adam  Shalz, Designer 

Kyle Hinze,  Digital Designer 

John Pomietlasz,  Copywriter

Analog Arrows. Digital  Targets.

There are a lot of ideas. Some are bad, some are good, a few are great and a very small, small amount are  incredible.

Then there’s our Codes and Arrows installation, which is, arguably, the worst idea ever. With a studio packed with folks shooting longbows, we added a new phase in our process: rigorously test the med kit. Just in  case.

Four technologies, one  bow.

To generate different 3D planets in-browser, we capture where an arrow hits the target and its velocity with an Arduino board and broadcast the data to a Node.js  webapp.

Arrow data is planet DNA: certain shots create heavily forested planets, and others generate icy planets with a Death Star looming in  orbit.

What is this  magic?

Installations don’t just grow on trees. To bridge the gap between the physical and the digital, we used Arduino, Node.js, three.js and  Twilio.

Data with  Arduino.

Capturing meaningful data was the biggest challenge. We tried a few approaches like video frame analysis and Bare Conductive paint, which creates a circuit on contact. Ultimately, we landed on an array of piezoelectric sensors, also known as vibration  sensors.

Connecting the array to the Arduino enabled us to reliably detect where and how forcibly the arrow hit the  target.

Beast  Node.

When an arrow hits the target, data feeds to a Node.js app that broadcasts a live stream to connected devices. For the event, every office monitor displayed the art and participants could visit a custom URL on their  device.

SMS-based  herding.

Regardless of how well technologies work, a disorderly event will fail. Our custom queue Craft CMS plugin captures participant info when they arrive, then Twilio texts them when their turn nears and again when it arrives. Afterward, we send participants a link to view their unique  planet.

No-BS  three.js.

The data, once fed into the webapp, generates different low-poly planets, where we use three.js to create and render the planets in real time. Users can zoom on the planets and explore each independently, admiring the details our designers put each planet's terrain, features and objects in  orbit.

Big bang  bullseye.

With participants help we created sixty different planets at the event — that’s 300 arrows launched without anyone dying. We’re proud of the work and stoked to experiment with more new  technologies.

An eagle means Parliament