Blog posts about this project:
Using Prototyping Workshops to Build the Thomas Jefferson University Donor Wall
Exploring LED Lights at Large Scale
I was a co-lead developer on Interactive Mechanics’ project to build a large-scale interactive LED donor wall for Thomas Jefferson University. My responsibilities included building the front and back end of the touch screen monitor that interacted with the LED wall; prototyping the LED wall; putting together the electronic components for the wall; and supporting installation of all components.
There were many challenges to this project. One was determining the right hardware to use. During a series of prototyping workshops we tried different combinations of micro-controllers and LED strips. We chose Neopixel LED strips because they were digital, available in long strips, and compatible with different micro-controllers. Choosing the micro-controller was much more challenging due to the scale of the project. The project would include more than 10,000 LEDs and we needed to be able to control diodes individually. While both the Arduino and Raspberry Pi worked with the Neopixel strips, they did not scale up elegantly. Instead we chose the FadeCandy micro-controller, which is a niche project purpose-built for controlling multiple LED strips.
A personal challenge of the prototyping workshops was learning to work with new technologies very quickly. I hadn’t worked with electronics prior to this project so I had to quickly learn how to read electronics schematics and understand electronics vocabulary. Since Rasbperry Pi uses Python and Arudino uses Processing, I also had to learn to code simple functions in those languages quickly. My learning methods including reading blog posts, watching videos, and combing through support chats.
Another challenge was performance. The user interface for the touch screen got data about donors from the WordPress REST API and displayed it in a visually compelling animation. The animation was not connected to the data itself – that is, the animation was not a data visualization. The element containing all of the donors names animated east to west and was draggable and each element containing a donor’s name was animated as well. Additionally, button elements throughout the interactive animated to attract the user. There was a lot going on and performance was affected.
In the end, I identified the GreenSock Animation Platform as a means of delivering the animations needed while maintaining performance. We used the Draggable plugin for smooth dragging of the container and the TweenMax functionality to animate individual donor elements. We also used the Split Text plugin to animate some button elements. GSAP allowed us to do all of this while meeting performance standards. This snippet on CodePen demonstrates some of the Split Text functionality that we used.
gallery
